JavascriptのforEach()メソッド: examples, index, map, break continue return

JavaScriptで配列やループを使いたいとき。よく使われるメソッドに forEach() メソッドがあります。この記事では、forEach()メソッドの使用例、indexとarrayパラメータの使用例を見ていきます、 map()などの他のメソッドとの違い、break continue return キーワードの使い方などを見ていく。

forEach()メソッドは配列だけでなく、集合やマップなどJavaScriptのほとんどのデータ型に対して実装されています。今回は配列のメソッドだけを見てみましょう。

💡

Node.jsを実行するには、asdfでインストールすることをお勧めします。それについては、この投稿を参照してください。

1. JavaScriptのforEach()の基本

1.1. Array.prototype.forEach() メソッドを理解する

forEachメソッドは Array.prototype オブジェクトの一部なので、すべての配列インスタンスで利用できます。このメソッドは配列を走査し、各要素に対して指定された関数を実行する読みやすい方法を提供します。 forEach()メソッドはコールバック関数をパラメータとして受け取り、配列の各要素に対して実行します。

forEach() メソッドの基本構文

forEach()メソッドの基本構文は簡単です。

array.forEach(function callback(currentValue[, index[, array]]) {
    // Your code here
})

コールバック関数は、現在の値、インデックス、配列の3つのパラメータを受け取る。 currentValue は配列の現在の要素、index はその位置、array は配列自体への参照である、パラメータ index と array は省略可能である。

以下は単純な forEach() メソッドを使った例である。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number));

1.3. 通常のfor文との比較

従来の for 文と比較して、forEach() メソッドはより読みやすく簡潔な構文を提供します。また、インデックス外の繰り返しや配列の値が変更されてエラーが発生するといった開発者のエラーを防ぐことができます。

しかし、forEachはfor文と同じレベルの制御、特に反復処理から抜け出すときや反復処理をスキップするときの制御を提供しないという注意点を守って使用する必要があります。

2.forEach()、map()の違い

JavaScriptで配列を反復処理するために利用できる他のメソッドには、filter()、map()、reduce()があります。これらのメソッドはforEachよりも特化されており、特定のユースケースに最適化されている：

map()：各要素にコールバック関数を適用して配列を変換し、変換後の要素を含む新しい配列を返す。
Reduce()：前の値と現在の値を結合する関数を適用することで、配列内の値を1つの値に削減する。
filter()：新しい配列を作成し、指定した条件を満たす要素のみを保持する。

map()メソッドは新しい配列を返すが、forEach()メソッドは常に undefined を返すことに注意すること。

他の配列メソッドの詳細については、それぞれの記事を参照してください。

3.forEach()メソッドにおけるbreak、continue、returnキーワード

関数型プログラミングに基づく forEach() メソッドの基本的な前提は、配列のすべての要素を走査することです。そのため、break や continue キーワードによる走査の一時停止や再開はサポートしていません。

しかし、returnキーワードを使用することで、breakキーワードの役割を引き継ぐことができる。

以下の例では、要素の値が 3 の場合、return キーワードを使って次の要素に移動していることがわかる。

const array = [1, 2, 3, 4, 5];
 
array.forEach((element) => {
  if (element === 3) {
    return; // Skips the current iteration
  }
 
  console.log(element);
});

4. forEach()の使用例

4.1. データのクリーニングとフォーマット

JavaScriptのforEach()メソッドは、データを処理したり表示したりする前に、データをクリーニングしたりフォーマットしたりするのに便利です。例えば、大文字と小文字が混在した名前のユーザーオブジェクトの配列があるとします。

forEach()メソッドを使って大文字小文字を統一することができます：

const users = [
    { id: 1, name: "ALICE" },
    { id: 2, name: "BOb" },
    { id: 3, name: "Charlie" }
];
 
users.forEach((user) => {
    user.name =
    user.name.charAt(0).toUpperCase() + user.name.slice(1).toLowerCase();
});
 
console.log(users);
 
// Output:
// [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Bob' },
//   { id: 3, name: 'Charlie' }
// ]

この例では、forEach() メソッドが users 配列を繰り返し処理し、各ユーザーの名前を適切な大文字に変更しています。このようにデータを整理することで、アプリケーション全体の一貫性を確保し、データを見やすく、操作しやすくすることができます。

4.2. DOM の操作

forEach()メソッドを使うと、HTMLCCollectionsを繰り返し処理してDOM要素を簡単に操作できます。例えば、特定のクラス名を持つすべての要素にクラスを追加したいとします：

const elements = document.getElementsByClassName("target");
 
Array.prototype.forEach.call(elements, (element) => {
    element.classList.add("new-class");
});

また、DOM要素のプロパティや内容を変更するために使用することもできます。例えば、あるクラス名を持つすべての image 要素の src 属性を変更したい場合、次のようにします。

const images = document.querySelectorAll(".image-class");
 
images.forEach((image) => {
    image.src = "new-image-source.jpg";
});

4.3. 他の配列メソッドとの連結

forEach()メソッドを他の配列メソッドと連結することで、より強力で読みやすいコードを作成できます。例えば、注文の配列があり、特定の商品の注文の合計収益を計算したいとします：

const orders = [
    { id: 1, product: "A", price: 10, quantity: 2 },
    { id: 2, product: "B", price: 20, quantity: 1 },
    { id: 3, product: "A", price: 10, quantity: 3 },
    { id: 4, product: "C", price: 30, quantity: 1 }
];
 
const targetProduct = "A";
 
const totalRevenue = orders
    .filter((order) => order.product === targetProduct)
    .map((order) => order.price * order.quantity)
    .reduce((acc, curr) => acc + curr, 0);
 
console.log(totalRevenue);

この例では、まず注文の配列にフィルタをかけて、対象商品を含む注文だけを保持します。次に、map メソッドを使用して、フィルタリングされた各注文の収益を計算します。最後に、reduce メソッドを使用して合計収益を累積します。この連鎖的なアプローチにより、より読みやすく機能的なコードになり、コードの理解や保守が容易になります。

5. コールバック関数内でのインデックス、配列パラメータの使用

forEach()メソッドのコールバック関数は、現在の値だけでなく、各インデックスや配列そのものにアクセスするための参照を提供します。これにより、より柔軟なコールバック関数を定義することができます。

const numbers = [10, 20, 30, 40, 50];
 
numbers.forEach((number, index, array) => {
    console.log(`Index: ${index}, Number: ${number}, Array: ${array}`);
});
 
// Output:
// Index: 0, Number: 10, Array: 10,20,30,40,50
// Index: 1, Number: 20, Array: 10,20,30,40,50
// Index: 2, Number: 30, Array: 10,20,30,40,50
// Index: 3, Number: 40, Array: 10,20,30,40,50
// Index: 4, Number: 50, Array: 10,20,30,40,50

6. カスタムforEachメソッドの実装

場合によっては、forEachの機能を拡張して使いたいこともあるでしょう。例えば、for文からbreak文のように素早くループを抜けるためのカスタムforEach関数を作りたい場合や、コールバック関数に追加のパラメータを与えたい場合などです。

カスタムforEach関数を作成するには、for文を使用し、任意のパラメータを渡します。以下はbreak関数を使ったカスタムforEach関数の例です：

function customForEach(array, callback) {
    for (let i = 0; i < array.length; i++) {
        const result = callback(array[i], i, array);
        if (result === false)
            break;
    }
}
 
const numbers = [1, 2, 3, 4, 5];
 
customForEach(numbers, (number) => {
    if (number > 3) return false; // "break" when number > 3
        console.log(number);
});
 
// Output:
// 1
// 2
// 3

7. おわりに

この記事では、forEach() メソッドの使用例、index や array パラメータ、map() などの他のメソッドとの違いについて説明した、 break、continue、returnキーワードの使用など。

よりクリーンで効率的なコードを書くことができる forEach() メソッドの長所と限界を理解することで、様々なウェブ開発の課題に取り組むことができるようになります。あなたのJavaScriptスキルを向上させ、より効果的で魅力的なWebアプリケーションを作成するために、forEach()やその他の配列メソッドの探求を続けることをお勧めします。

Pnpm: パッケージマネージャ map()