【JavaScript】forEach()を使った配列の要素のループ処理の基本

「forEach()」はJavaScriptの配列に対してループ処理を行うメソッドで、コールバック関数を通じて各要素を操作できます。また、類似メソッドとして「map()」があり、違いは「forEach()」が元の配列を変更するのに対して、「map()」は新しい配列を作成する点です。注意点として、元の配列を変更する可能性や非同期処理の場合の挙動に注意が必要です。

「forEach()」の基本的な使い方

「forEach()」とは？

forEach()はJavaScriptの配列に対してループ処理を行うメソッドです。各要素を順番に取得し、指定した処理を行うことができます。 例:

const fruits = ["apple", "orange", "banana"];
fruits.forEach(function(fruit) {
    console.log(fruit);
});
// apple
// orange
// banana

「forEach()」のコールバック関数

forEach()メソッドはコールバック関数を引数として受け取ります。この関数は最大3つの引数を持つことができます：現在の要素、現在の要素のインデックス、元の配列です。

fruits.forEach(function(fruit, index, array) {
    console.log(fruit, index);
});
// apple 0
// orange 1
// banana 2

「forEach()」の使用例4パターン

数字の配列での合計

数字の配列から合計値を求める例です。

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(num => sum += num);
console.log(sum); // 15

文字列の配列での大文字変換

文字列の配列を大文字に変換する例です。

const words = ["hello", "world"];
words.forEach((word, index, arr) => arr[index] = word.toUpperCase());
console.log(words); // ["HELLO", "WORLD"]

配列内のオブジェクトの特定のキーを取得

オブジェクトが入った配列から特定のキーの値を取得する例です。

const users = [{name: "Alice", age: 28}, {name: "Bob", age: 22}];
users.forEach(user => console.log(user.name));
// Alice
// Bob

特定の条件を満たす要素のカウント

配列内の要素で特定の条件を満たすものの数をカウントする例です。

const scores = [85, 90, 78, 88, 92];
let passed = 0;
scores.forEach(score => {
    if(score >= 80) passed++;
});
console.log(passed); // 4

「forEach()」と「map()」

「map()」とは？

map()は配列の各要素に対して関数を実行し、その結果を新しい配列として返します。これはforEach()とは違い、元の配列を変更することなく新しい配列を作成する特性があります。 例:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

「forEach()」と「map()」の違い

forEach()とmap()の主な違いは、forEach()は何も返さない点、一方でmap()は新しい配列を返す点にあります。forEach()は配列の各要素に何らかの処理を適用するのに適している一方、map()は各要素に処理を適用し、その結果を新しい配列として取得したい場合に使用します。

例:

const fruits = ["apple", "banana", "cherry"];
let upperCaseFruits = [];

fruits.forEach(fruit => upperCaseFruits.push(fruit.toUpperCase()));
console.log(upperCaseFruits); // ["APPLE", "BANANA", "CHERRY"]

const mappedUpperCaseFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(mappedUpperCaseFruits); // ["APPLE", "BANANA", "CHERRY"]

この例から、forEach()は元の配列を変更しつつ新しい配列に結果を追加しているのに対し、map()は元の配列を変更せずに新しい配列を直接作成していることがわかります。

非同期処理での違い

forEach()内で非同期処理を行う場合、期待する順序で処理が実行されないことがあるので注意が必要です。一方、map()を用いた非同期処理は通常、Promise.all()と組み合わせて使われ、すべての非同期処理が完了するのを待ってから次の処理に進むことができます。

例:

const items = [1, 2, 3];

// forEachの場合
items.forEach(async (item) => {
    const result = await someAsyncFunction(item);
    console.log(result);
});

// mapの場合
const results = await Promise.all(items.map(item => someAsyncFunction(item)));
console.log(results);

上記のmapの例では、someAsyncFunctionの全ての非同期処理が完了した後、結果がresults配列に格納されます。

「forEach()」を使用する際の注意点

元の配列を変更する

forEach()は元の配列を直接変更することができます。これは意図しない結果を生む可能性があるので注意が必要です。 例:

const originalNumbers = [1, 2, 3];
originalNumbers.forEach((num, index, arr) => arr[index] = num * 2);
console.log(originalNumbers); // [2, 4, 6]

この例ではoriginalNumbers配列の各要素が2倍に変更されています。

非同期処理の場合

forEach()内で非同期処理を行う場合、期待する順序で処理が実行されないことがあるので注意が必要です。 例:

const items = [1, 2, 3];
items.forEach(async (item) => {
    const result = await someAsyncFunction(item);
    console.log(result);
});

上記の例では、非同期関数someAsyncFunctionの結果が期待する順序でログに表示されない可能性があります。

「forEach()」の使い方まとめ

forEach()はJavaScriptの配列に対してループ処理を行う強力なツールですが、使用する際はその特性や注意点を理解して正しく利用することが重要です。適切な場面での使用を心がけることで、コードの効率性や読みやすさを向上させることができます。