for in文がどうしても理解できない

Question

現在Javascriptを勉強し始めて4ヶ月ほどになります。
ですが、for in分だけがどうしても理解できません。

for( var 変数 in オブジェクト ) {
 
    //ここに繰り返し処理を書く
 
}

簡単だ例文では理解することはできるのですが、下記のような例文をどうしても理解することができません。

 state = {
    orderForm: {
      name: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "your name"
        },
        value: ""
      },
      street: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "street"
        },
        value: ""
      },
      zipCode: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "ZIP Code"
        },
        value: ""
      },
      country: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "Country"
        },
        value: ""
      },
      email: {
        elementType: "input",
        elementConfig: {
          type: "email",
          placeholder: "Your Mail"
        },
        value: ""
      },
      deliveryMethod: {
        elementType: "select",
        elementConfig: {
          options: [
            { value: "fastest", diplayValue: "Fastest" },
            { value: "cheapest", diplayValue: "Cheapest" }
          ]
        },
        value: ""
      }
    },
    loading: false
  };

    const formElementsArray = [];
    for (let key in this.state.orderForm) {
      formElementsArray.push({
        id: key,
        config: this.state.orderForm[key]
      });
    }

orderFormオブジェクトのプロパティがあるだけ繰り返し処理する機能だと思うのですが、ここではなんの処理をしているのでしょうか？

Answer 1

ここではなんの処理をしているのでしょうか？

オブジェクトの配列化処理です。

一つ一つの処理は次のように置き換えることができます。

const formElementsArray = [];
for (let key in this.state.orderForm) {
  let conf = this.state.orderForm[key];

  console.log( "id : ", key );
  console.log( "conf : ", conf );

  let item = {
    id: key,
    config: conf
  };
  formElementsArray.push( item );
}
console.log( formElementsArray );

Comments

[21212121]

ありがとうございます。
無事理解することができました。

Answer 2

this.state.orderFormから要素をひとつずつ取り出して
整形してformElementsArray配列に後ろから追加しています

Comments

[yambejp]

やってることはこんな感じ？

const formElementsArray = Object.entries(state.orderForm).map(x=>({id:x[0],concfig:x[1]}));

thisがどう影響してるかわからないので省略

[21212121]

なるほどです。
理解できました。
ありがとうございます。
なぜmapではなくわざわざfor in文を使うのかが腑に落ちませんでした。
もう一つ質問があるのですが、for in文の中の変数はどんな役割を果たしているのでしょうか？

[yambejp]

> 変数はどんな役割

どの変数の話でしょうか？

[21212121]

for( var 変数 in オブジェクト ) {

//ここに繰り返し処理を書く

}

このvarの部分です

[yambejp]

その変数は、オブジェクトのキーです
{aaa:1,bbb:2,ccc:3}ならaaa,bbbb,cccと順番に参照されます
通常のオブジェクトはイテラブルではないのでinで抜き出すしかないです
（または例したようにentries,keys,valuesなど利用）

[AkitoshiManabe]

> わざわざ
「例文」でしたら、「for in 文の学習が目的だから」ではないでしょうか。let key の変数宣言は、プロパティ名を受け取る目的のテンポラリ（一時変数）ですね。何にせよ解決されてよかったです。

[21212121]

ありがとうございました。
解決できました。