JavaScriptでのforEach文の使い方をご紹介！

Javascript
プログラミング言語

公開日時: 2020-10-29 　更新日時: 2021-10-07

この記事でわかること

システム エンジニア: JavaScriptではforEach文をどのような場合に使用するのですか。

プロジェクト マネージャー: forEach文は配列の要素を繰り返し処理する場合などに使用します。

JavaScriptでのforEachの使い方とは？

今回は、JavaScriptでのforEach文の使い方について説明します。配列の要素を繰り返し処理する場合などに、forEach文を使用します。

for文とは違った特徴があり、用途に応じて使い分ける必要があります。

ここでは、以下の内容で説明します。
・基本的な使い方
・ラムダ式
・オブジェクトの要素を取得
・コールバック関数
・第2引数
・breakやcontinueは使用不可

JavaScriptでのforEach文の使い方に興味のある方はぜひご覧ください。

基本的な使い方

JavaScriptにおける、forEach文の使い方を紹介します。

forEach文は以下のように使用します。

 配列.forEach( コールバック関数 )

1	配列.forEach( コールバック関数 )

それでは実際のソースコードを見てみましょう。

 var items = [ "item1", "item2", "item3" ];
 items.forEach( function( item ) {
  console.log( item ); 
 });

var items = [ "item1", "item2", "item3" ];

items.forEach( function( item ) {

console.log( item );

});

実行結果は以下のようになります。

 item1
 item2
 item3

item1

item2

item3

このように、配列の全要素を取得できます。

forEach文では、要素の途中から繰り返し処理をしたり、要素の途中まで繰り返し処理をすることはできません。必ず全要素に対して処理しますので、そうしたくない場合は、for文を使用してください。

 var items = [ "item1", "item2", "item3" ];
 // 2つめの要素以降を処理する
 for( var i = 1; i < items.length; i++) {
  console.log( items[i] );
 }

var items = [ "item1", "item2", "item3" ];

// 2つめの要素以降を処理する

for( var i = 1; i < items.length; i++) {

console.log( items[i] );

}

実行結果は以下のようになります。

 item2
 item3

1 2	item2 item3

forEach文でも、コールバック関数のindexを使用すれば上記の処理は可能です。
この方法については後述します。

ラムダ式

JavaScriptでは、forEach文をラムダ式で記述できます。

実際のソースコードを見てみましょう。

 var items = [ "item1", "item2", "item3" ];
 items.forEach( item => console.log( item ) );

1 2	var items = [ "item1", "item2", "item3" ]; items.forEach( item => console.log( item ) );

実行結果は以下のようになります。

 item1
 item2
 item3

item1

item2

item3

ラムダ式で記述することで、すっきりとしたソースコードになります。

ラムダ式で繰り返し処理の中で複数行実行するには、以下のように”{}”で囲みます。

 var items = [ "item1", "item2", "item3" ];
 items.forEach( item => {
  console.log( "item is" );
  console.log( item );
 });

var items = [ "item1", "item2", "item3" ];

items.forEach( item => {

console.log( "item is" );

console.log( item );

});

実行結果は以下のようになります。

 item is
 item1
 item is
 item2
 item is
 item3

item is

item1

item is

item2

item is

item3

このようにJavaScriptでは、forEach文をラムダ式で記述できます。

オブジェクトの要素を取得

JavaScriptでは、オブジェクトに対して全要素を取得できます。

実際のソースコードを見てみましょう。

 var person = [
  { name: 'taro', age: 10, gender: 'male' },
  { name: 'hanako', age: 20, gender: 'female' },
  { name: 'jiro', age: 40, gender: 'male' },
  { name: 'kyoko', age: 25, gender: 'female' },
 ];
 

 person.forEach( function( value ) {
  console.log( "name: " + value.name );
  console.log( "age: " + value.age );
  console.log( "gender: " + value.gender );
 });

var person = [

{ name: 'taro', age: 10, gender: 'male' },

{ name: 'hanako', age: 20, gender: 'female' },

{ name: 'jiro', age: 40, gender: 'male' },

{ name: 'kyoko', age: 25, gender: 'female' },

];

person.forEach( function( value ) {

console.log( "name: " + value.name );

console.log( "age: " + value.age );

console.log( "gender: " + value.gender );

});

実行結果は以下のようになります。

 name: taro
 age: 10
 gender: male
 name: hanako
 age: 20
 gender: female
 name: jiro
 age: 40
 gender: male
 name: kyoko
 age: 25
 gender: female

age: 10

gender: male

age: 20

gender: female

age: 40

gender: male

age: 25

gender: female

このように、JavaScriptではオブジェクトに対して全要素を取得できます。

コールバック関数

JavaScriptのforEach文では、コールバック関数で3つの引数を使用できます。

 // value：配列のデータ値
 // index：配列のインデックス
 // array：現在処理している配列
 配列.forEach( function( value, index, array ) {
  // 繰り返し処理
 });

// value：配列のデータ値

// index：配列のインデックス

// array：現在処理している配列

配列.forEach( function( value, index, array ) {

// 繰り返し処理

});

コールバック関数の引数（value, index）を使ったソースコードを見てみましょう。

 var items = [ "item1", "item2", "item3" ];
 items.forEach( function( value, index ) {
  if( index > 0 ) console.log( value );
 });

var items = [ "item1", "item2", "item3" ];

items.forEach( function( value, index ) {

if( index > 0 ) console.log( value );

});

実行結果は以下のようになります。

 item2
 item3

1 2	item2 item3

2つ目以降の要素を取得していることが分かります。

コールバック関数の引数（value, index, array）を使ったソースコードを見てみましょう。

 var items = [ "item1", "item2", "item3" ];
 console.log( items );
 

 items.forEach( function( value, index, array ) {
  if( index > 0 ) array[ index ] = value + value;
 });
 

 console.log( items );

var items = [ "item1", "item2", "item3" ];

console.log( items );

items.forEach( function( value, index, array ) {

if( index > 0 ) array[ index ] = value + value;

});

console.log( items );

実行結果は以下のようになります。

 [ 'item1', 'item2', 'item3' ]
 [ 'item1', 'item2item2', 'item3item3' ]

1 2	[ 'item1', 'item2', 'item3' ] [ 'item1', 'item2item2', 'item3item3' ]

このように、JavaScriptのforEach文では、コールバック関数で3つの引数を使用できます。

第2引数

JavaScriptでは、forEach文に第2引数を指定できます。
以下のように記述します。

 配列.forEach( コールバック関数, オブジェクト )

1	配列.forEach( コールバック関数, オブジェクト )

forEach文に第2引数にオブジェクトを指定したソースコードを見てみましょう。

 var items = [ "item1", "item2", "item3" ];
 items.forEach( function( value, index ) {
  // この「this」は、「items」を参照する
  console.log( this[index] );
 }, items )

var items = [ "item1", "item2", "item3" ];

items.forEach( function( value, index ) {

// この「this」は、「items」を参照する

console.log( this[index] );

}, items )

実行結果は以下のようになります。

 item1
 item2
 item3

item1

item2

item3

このようにJavaScriptでは、forEach文に第2引数を指定できます。

breakやcontinueは使用不可

JavaScriptのforEach文では、繰り返し処理を終了するbreakや、繰り返し処理をスキップするcontinueは使用できません。

記述すると、実行時エラーになります。

実際のソースコードを見てみましょう。

 var items = [ "item1", "item2", "item3" ];
 items.forEach( function( value, index ) {
  if( index == 1 ) break;
 });

var items = [ "item1", "item2", "item3" ];

items.forEach( function( value, index ) {

if( index == 1 ) break;

});

実行結果は以下のようになります。

  if( index == 1 ) break;
  ^^^^^
 

 SyntaxError: Illegal break statement
 （中略）

if( index == 1 ) break;

^^^^^

SyntaxError: Illegal break statement

（中略）

このように、JavaScriptのforEach文では、繰り返し処理を終了するbreakや、繰り返し処理をスキップするcontinueは使用できません。

この場合はfor文を使用してください。

システム エンジニア: JavaScriptのforEach文では、繰り返し処理を終了するbreakや繰り返し処理をスキップするcontinueは使用できないのですね。

プロジェクト マネージャー: その通りです。breakやcontinueする場合はfor文を使用します。

JavaScriptでのforEachの使い方について理解しよう

いかがでしたでしょうか。JavaScriptでのforEach文の使い方について説明しました。

配列の要素を繰り返し処理する場合などに、forEach文を使用します。for文とは違った特徴があり、用途に応じて使い分ける必要があります。

注意してほしい点としては、breakやcontinueは使用できません。この場合はfor文を使用してください。

ぜひご自身でソースコードを書いて、理解を深めてみてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでのforEach文の使い方をご紹介！

JavaScriptでのforEachの使い方とは？

基本的な使い方

ラムダ式

オブジェクトの要素を取得

コールバック関数

第2引数

breakやcontinueは使用不可

JavaScriptでのforEachの使い方について理解しよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

JavaScriptでのforEach文の使い方をご紹介！

JavaScriptでのforEachの使い方とは？

基本的な使い方

ラムダ式

オブジェクトの要素を取得

コールバック関数

第2引数

breakやcontinueは使用不可

JavaScriptでのforEachの使い方について理解しよう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

JavaScript新着案件New Job

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】

官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】

システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryのparentメソッドとは？parentメソッドの使用方法を紹介

jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？

jQueryの「id」セレクタを利用する方法9選｜使う際の注意点とは

jQueryでremove()を使った要素の削除方法5選！その他の方法も解説

JavaScriptのonloadについて解説します