JavaScriptでイテレートを制覇しよう！for...in、for...of、forEach()、map()、filter()、reduce()徹底解説

JavaScriptにおける「for...in」と「for...of」の比較解説

JavaScriptには、オブジェクトや配列などのイテレータブルな値をループ処理するためのループ構文がいくつかあります。その中でも、「for...in」と「for...of」はよく似た構文ですが、それぞれ異なる動作と利点を持っています。

それぞれの動作

for...in:

• オブジェクトのプロパティをループ処理します。
• プロパティ名の順序は保証されません。
• 独自のキーを持つオブジェクトや、プロパティの追加・削除が行われたオブジェクトでは、予期せぬ結果になる可能性があります。

• イテレータブルな値の要素をループ処理します。
• 配列、文字列、Set、Mapなど、多くのデータ構造で利用できます。
• 順序が保証されているため、配列などの要素を順番に処理したい場合に適しています。

具体的な例

const obj = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

for (const prop in obj) {
  console.log(prop, obj[prop]);
}

出力:

name John Doe
age 30
city Tokyo

const arr = ["a", "b", "c"];

for (const element of arr) {
  console.log(element);
}

a
b
c

それぞれの利点と注意点

利点:

注意点:

• 順序が保証されている。

• オブジェクトのプロパティをループ処理するには、Object.keys()などの方法でプロパティ名の配列を取得する必要がある。

どちらを使うべきか？

• オブジェクトの構造が単純で、プロパティ名の順序が重要ではない場合は for...in を使用できます。
• オブジェクトの構造が複雑であったり、プロパティ名の順序が重要である場合は Object.keys() と for...of を組み合わせて使用することをおすすめします。

• for...of を使用するのがおすすめです。

const person = {
  name: "John Doe",
  age: 30,
  city: "Tokyo"
};

for (const prop in person) {
  console.log(prop, person[prop]);
}

name John Doe
age 30
city Tokyo

配列の要素をループ処理

const fruits = ["apple", "banana", "orange"];

for (const fruit in fruits) {
  console.log(fruit);
}

0 apple
1 banana
2 orange

上記のコードは動作しますが、配列の要素をループ処理する場合は for...of の方が効率的です。

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

apple
banana
orange

文字列の文字をループ処理

const str = "Hello, world!";

for (const char of str) {
  console.log(char);
}

H
e
l
l
o
,
 
w
o
r
l
d
!

Set の要素をループ処理

const mySet = new Set([1, 2, 3, 4]);

for (const value of mySet) {
  console.log(value);
}

1
2
3
4

const myMap = new Map([
  ["name", "John Doe"],
  ["age", 30],
  ["city", "Tokyo"],
]);

for (const [key, value] of myMap) {
  console.log(key, value);
}

name John Doe
age 30
city Tokyo

const fruits = ["apple", "banana", "orange"];

fruits.forEach(fruit => {
  console.log(fruit);
});

apple
banana
orange

map()

map() メソッドは、配列などのイテレータブルな値の要素を処理し、新しい配列を生成する際に使用できます。

const fruits = ["apple", "banana", "orange"];

const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits);

["APPLE", "BANANA", "ORANGE"]

filter()

const fruits = ["apple", "banana", "orange"];

const filteredFruits = fruits.filter(fruit => fruit.length > 5);

console.log(filteredFruits);

["banana", "orange"]

reduce()

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((total, num) => total + num, 0);

console.log(sum);

15

• while ループ
• do...while ループ
• for ループ

これらのループ構文は、for...in や for...of と同様に、さまざまな状況で使用できます。