配列にfor...inはダメと言うけれど、

javascriptにおいて、配列にfor...inはダメとは言うけれど、
なぜダメなのか説明ができないと思ったので言語化してみようと思う。

はじめに結論

• for...in命令では処理の順序が保証されない(余分なものが処理される)
• for...inでは仮変数にはインデックス番号が格納されるので、値と誤解をまねく
• 配列(他の列挙可能オブジェクト含む)にはfor...of命令を使う

for...in命令って？

example01.js

for(仮変数　in 連想配列){
  ループ内で実行する命令
}

for...in命令は、
指定された連想配列(オブジェクト)の要素を取り出して、先頭から処理する方法のこと。
仮変数には格納されるのは要素値(value)そのものではないことに注意

example02.js

var data = { apple: 150, orange: 100, banana: 120};
  for (var key in data){
   console.log(key + ':' +data[key]);
  }
// apple:150
// orange:100
// banana:120

for...of命令って？

example03.js

for(仮変数　of 列挙可能なオブジェクト){
  ループ内で実行する命令
}

for...of命令は、
列挙可能なオブジェクト(配列、NodeList、argumentsなど)の値そのものを順に取り出して処理する方法のこと。

example04.js

var data = [ 'apple', 'orange', 'banana'];
  for (var value of data){
   console.log(value);
  }
// apple
// orange
// banana

配列にfor...inを使ってみる

for...in for...ofの紹介が終わったので、
for...inを配列に使ってみたコードを確認してみる。
一度、for...ofのコードと比べて見てください。

example05.js

var data = [ 'apple', 'orange', 'banana'];
  for (var key in data){
   console.log(data[key]);
  }
// apple
// orange
// banana

上記のコードでは、正常に処理されているように見えますね。
しかし、下記の場合は結果が変わってきます。

ng.js

var data = [ 'apple', 'orange', 'banana'];
//配列オブジェクトにhogeメソッドを追加
Array.prototype.hoge = function(){}
  for (var key in data){
   console.log(data[key]);
  }
// apple
// orange
// banana
// function(){}

結果を見てみると、
拡張された機能(function(){})までが列挙されてますね。
これが最初の結論で述べた　余分なものが処理される　にあたります。

ここで、for...ofの処理を見てみましょう。

ok.js

var data = [ 'apple', 'orange', 'banana'];
//配列オブジェクトにhogeメソッドを追加
Array.prototype.hoge = function(){}
  for (var value of data){
   console.log(value);
  }
// apple
// orange
// banana

function(){}は列挙されていませんね。
for...ofを使えば余計な心配をしなくて済みそうです。

おわりの結論

for...inは連想配列(オブジェクト)の操作に使う
for...ofは列挙可能なオブジェクト(配列、NodeList、argumentsなど)の操作に使う

以上になります。ありがとうございました。