こんにちは。櫻井です。
今回は一見するとシンプルで使いやすそうに見えるけど実はちょっと扱いづらいfor in文について説明したいと思います。

for in文

for in文はfor文と同じくループ処理を行うためのもので、以下のような記述の仕方をします。

    
      for(var a in b){
        // なんか処理
      }
    
  

普通にfor文書くよりシンプルになりました。
for文は「iがdataItem.lengthより小さい間は{}の中の処理をして終わったらiに1を足すっていうのを繰り返してね。iがdataItem.lengthと同じかそれ以上になったら終わっていいよ。」って感じのことが書かれてますが、for in文は「bの中の数の文だけ{}の中の処理をしてね」感じのことが書かれてます。aはどこに行った？ってなりますがaには{}のなかの処理がされるごとに異なるものが入ります。
例えば

    
      var target = document.querySelector('#js-txt');
      var dataItem = [{
        "id": 1,
        "name": "りんご"
        }, {
          "id": 2,
          "name": "みかん"
        }, {
          "id": 3,
          "name": "イチゴ"
        }
        ];

      for(var property in dataItem) {
        target.innerText += `${dataItem[property].id}:${dataItem[property].name}\n `
      }
    
  

この場合だと

    
      1:りんご
      2:みかん
      3:イチゴ
    
  

こんな形で表示されます。aはfor文でいう初期化式といつまでループ処理をするかを決める評価式が足されたようなものだと考えるとわかりやすいかも知れません。

for in文の問題点

ここまでの説明だと楽にできていいじゃんって思えますがそうもいかなくて、for in文は処理する順番を元からある配列を上から処理してくれる保証がないみたいなんです。
僕がテストした感じだと一度も順番が狂ったことはなかったのですが絶対ではないとなると順番通りに流し込まなければならないものなどを扱いづらくなります。
なので順番通りにしたいときは結局for文が一番良さそうです。

まとめ

今回は便利だけど使いづらいfor in文について説明しました。
DOMの生成で順番通りにしたいときには使えそうにないですが、純不動でいいものにはすっきりしていていい気がします。
DOMの生成にはfor文を使いますが、wordpressではwhile文を使うケースが多いのでwhileでもできそうですが、どちらの方がいいんでしょうね？今度検証してみます。