HTML/CSS

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

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。




本日は



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



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



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

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

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


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

この記事を書いている人

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()などによる処理結果をそのままループできることも特徴の一つといえます。

forEachのコード例

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

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

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

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

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

forEachの構文

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


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

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



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


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

forEachの簡略記法

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


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


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

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

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

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


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

forEachはbreakとcontinueが使えない

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

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

終わりに

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


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


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


おしまい✨

  • この記事を書いた人
  • 最新記事

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

-HTML/CSS
-