プロフィール
JavaScript PR

JavaScript – for…inを使った配列のループ処理

 
記事内に商品プロモーションを含む場合があります

JavaScriptには、
配列をループするためのいくつかの方法があります。

その中で、
for...inはオブジェクトのプロパティを
ループするための構文ですが、
配列にも使うことができます。

ただし、
配列に使う場合にはいくつかの注意点があります。

本記事では、
for...inの基本的な使い方、
配列に対する使用方法、
代替案などを初心者にもわかりやすく解説していきます。

Contents
  1. for…inとは？オブジェクトの繰り返しに使う！
  2. for…ofとは？配列の要素そのものをループする構文！
  3. 配列をループするための推奨方法for...of、forEach()
  4. まとめ

for…inとは？オブジェクトの繰り返しに使う！

基本構文

for...in命令は、
オブジェクトのプロパティ（キー）を
繰り返すために使用されます。

オブジェクトの中にある
すべてのプロパティにアクセスしたいときに便利です。

const person = { name: "John", age: 30, city: "New York" };
for (let key in person) {
  console.log(key + ": " + person[key]);
}


このコードでは、name, age, cityという
キーが繰り返され、それぞれの値がコンソールに出力されます。

配列に使うとどうなるの？

配列はJavaScriptではオブジェクトの一種です。
そのため、for...inを使うと、
配列の要素のインデックス（0, 1, 2など）が
ループの対象となります。

しかし、配列に対しては
for...inよりも他のループ方法が
適していることが多いです。

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

配列での使用例

for...inを使うと、
配列のインデックスがループされます。

これは配列の要素を操作するのに便利そうに思えますが、
for...inには配列に適さない点があります。

const fruits = ['apple', 'banana', 'cherry'];
for (let index in fruits) {
  console.log(index, fruits[index]);
}


このコードでは、
インデックス（0, 1, 2）と
その対応する要素が出力されますが、
for...inでは配列のすべてのプロパティがループの対象となるため、
予期せぬ動作が起こる可能性があります。

注意！for…inが配列に適さない理由

for...inはオブジェクトのプロパティも
含めてループ対象にするため、
配列のインデックス以外の情報も
取得してしまうことがあります。
特に、配列にカスタムプロパティやメソッドが
追加された場合、それらもループの対象になります。

つまり、
ループ中に配列のプロパティが
動的に追加・削除されても、
それらを含めて繰り返します。
これが意図しない結果を生む場合があるため、
注意が必要です。

例えば、
配列に新しいプロパティを追加すると、
そのプロパティもループ対象に含まれてしまいます。

const arr = [1, 2, 3];
arr.newProperty = "I'm new!";
for (let key in arr) {
  console.log(key);  // 0, 1, 2, newProperty
}


このように、
意図しないプロパティも
ループの対象となることがあるため、
配列にfor...inを使う際には注意が必要です。

for…ofとは？配列の要素そのものをループする構文！

for…inとの違い

for...ofは配列の要素そのものをループする構文です。
for...inがインデックスを返すのに対して、
for...ofは直接要素の値を返すため、
配列の内容を簡単に操作できます。

const fruits = ['apple', 'banana', 'cherry'];
for (let fruit of fruits) {
  console.log(fruit);
}


このコードでは、apple, banana, cherryといった
配列の中身そのものがループで取得されます。

配列をループするための推奨方法for...of、forEach()

配列のループには、
for...inよりもfor...ofや
forEach()メソッドの方が効率的で安全です。

for...ofでは配列の要素そのものを扱うことができ、
forEach()ではコールバック関数を使って柔軟に操作できます。

forEachの使用例：

const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => console.log(fruit));

まとめ

for...inは、
オブジェクトのプロパティを繰り返すための便利な命令ですが、
配列に対して使うことは推奨されません。

配列をループする際には、
for...ofやforEach()といった、
配列専用のメソッドを使うことで、
より直感的で安全なループ処理が可能になります。

RELATED POST