JavaScriptのforEach()で配列の値を変更することは可能？実例で解説

結論から言うと、JavaScriptでforEach()を実行しながら配列の値を変更することは可能です。

forEach()のコールバック関数には「要素の値」「インデックス（添字）」「元の配列」の3つの引数が渡されます。このうちインデックスを利用することで、反復処理中に元の配列の要素を直接書き換えられます。

実際にサンプルコードで確認してみましょう。

サンプルコード

以下の例では、配列の各要素を2乗した値で上書きしています。

let arr = [1, 2, 3, 4];
arr.forEach((val, index) => arr[index] = val * val);
console.log(arr);

実行結果

このコードを実行すると、コンソールには次のように出力されます。

[ 1, 4, 9, 16 ]

ご覧のとおり、forEach()で反復処理を行いながら、元の配列そのものを書き換えることができています。コールバック関数内でarr[index] = 値という形式で代入することで、各要素が順に更新されていく仕組みです。

補足：forEach()で配列を変更する際の注意点

forEach()で要素を変更する場合は、以下の点に注意しておくと安心です。

1. 変更できるのは「要素」であり、配列の再代入は反映されない

コールバックの第一引数（val）に直接値を代入しても、元の配列は変わりません。必ずインデックスを使ってarr[index] = 値のように代入する必要があります。

2. 反復中の要素の追加・削除は避ける

forEach()は処理開始時の配列の長さを基準に動作するため、ループ中に要素を追加・削除すると、意図しない挙動になることがあります。

3. 新しい配列を作りたい場合はmap()が便利

元の配列を残したまま変換結果を得たい場合は、map()メソッドを使うとより簡潔に記述できます。

let arr = [1, 2, 3, 4];
let squared = arr.map(val => val * val);
console.log(squared); // [ 1, 4, 9, 16 ]

このように、forEach()は元の配列を直接変更したい場合に、map()は新しい配列を生成したい場合に、それぞれ使い分けるのがおすすめです。