【初学者必見】JavaScirptのforEachとは何か解説します

本日は

【初学者必見】JavaScirptのforEachとは何か解説します

というテーマの記事となっております。

こんな方にオススメの記事です

JavaScriptのforは分かったけどforEachって何なの？違いがわからないし、ややこしいなー

という方にオススメの記事となっております。

それでは早速行ってみましょう！

forEachとは何でしょうか。

まずは基本的なお話からですが、forEachは配列に特化した繰り返し処理を行うメソッドとなっています。

例えば配列の中身を繰り返し処理をして取り出す場合はfor文を思い浮かべると思います。

結論からお伝えするとforは「どこでも使える構文」で、forEachは「配列の要素にのみ」使えるメソッドとなっています。

ちなみに以下はfor文を使用したコードになりますが結果は同じになります。

let array =['みかん','いちご','キウイ'];

for(let i =0; i<array.length; i++){
  console.log(array[i]);
}

//結果
"みかん"
"いちご"
"キウイ"

この使い方でも問題はないのですが、for分はカウンターやループの終了条件の設定が必要です。

forEachはこのような設定が不要でコードも簡潔に書くことが出来ます。

また、forやfor ofでループする場合と違い、map()やfilter()などによる処理結果をそのままループできることも特徴の一つといえます。

const array = ['みかん','いちご','キウイ'];

array.forEach((value,index)=>{
  console.log(index,value);  
});

//結果
0 "みかん"
1 "いちご"
2 "キウイ"

forEachのコード例は上記のようにコールバック関数を使う形になります。

さらにvalueで配列の要素を受け取り、indexで要素の番号を取得しています。

では実際にどのような構文になっているか見てみましょう。

基本的には以下のような書き方が基本となります。

配列名.forEach(コールバック関数(要素の値));
配列名.forEach(コールバック関数(要素の値,要素の番号)

forEachは配列の要素を0番目から順番に取り出すことが出来ます。

そしてその取り出した値をコールバック関数を使って呼び出す形となります。

forEachは簡略して書くことが可能です。

以下の例をご覧ください。

const array = ['みかん','いちご','キウイ'];

array.forEach(value => console.log(value));

//結果
"みかん"
"いちご"
"キウイ"

こちらでも結果は同じものとなります。

簡易記法は最初は奇妙に感じる書き方かもしれませんが、慣れると便利ですしコード自体もすっきりと書ける記法ですので是非使ってみましょう。

その他のforEachの特徴として、ループ文の定番であるbreakやcontinueが使えないというものがあります。

continueの代わりとしてreturnを使えばOKですが、breakの代わりはありませんので、要素に対しては必ずコールバック関数が呼び出される形となりますのでご注意ください。

いかがでしたでしょうか。

forやforEachはじめ、JavaScriptのループ構文は種類が色々とありますがそれぞれの特徴と違いを把握した上で適切に使用できるようにしておきましょう。

それではまた明日の記事でお会いしましょう♪

おしまい✨