本記事では、JavaScriptのforEachメソッドの使い方・書き方について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
forEachメソッドの使い方・書き方
forEachメソッドは、配列から取り出した要素を一つずつコールバック関数に渡すためのメソッドです。基本的な書き方は以下のとおりです。
arr.forEach(function (value, index, array) {
// ループで実行したい処理を記述
});構文解説
- arr：対象の配列
- value：配列要素
- index：配列の添え字(インデックス番号)
- array：arrで指定した配列
先輩くん構文解説の「value」「index」「array」について、実際どのような値が渡されるか確認してみましょう！
let drinkArr = ["tea", "cola", "calpis"];
drinkArr.forEach(function (value, index, array) {
console.log(`value: ${value}`);
console.log(`index: ${index}`);
console.log(`array: ${array}`);
});
/* コンソールログ *
*
* value: tea
* index: 0
* array: ['tea', 'cola', 'calpis']
* value: cola
* index: 1
* array: ['tea', 'cola', 'calpis']
* value: calpis
* index: 2
* array: ['tea', 'cola', 'calpis']
*
*/1つ目のコールバック関数の引数「value」には、「tea」「cola」「calpis」が渡されていることから、forEachメソッドが配列要素の値を一つずつvalueにセットしていることが分かります。
2つ目のコールバック関数の引数「index」には、「0」「1」「2」が渡されていることから、forEachメソッドが配列の添え字(インデックス番号)を一つずつindexにセットしていることが分かります。
3つ目のコールバック関数の引数「array」には、3回とも「[‘tea’, ‘cola’, ‘calpis’]」の配列が渡されていることから、forEachメソッドを使用している配列をそのままarrayにセットしていることが分かります。
