Help us understand the problem. What is going on with this article?

配列に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など)の操作に使う

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした