Javascriptの「forEach文」の使い方をまとめてみた

18/11/11 17:27:19     19/05/05 15:05:58

foreachのイメージ

繰り返し処理はコンピューターの得意分野で、プログラミングにおいて非常に重要な概念です。基本的な知識でありながら、世の中のほぼすべてのシステムに繰り返し処理が実装されていると言っても過言ではありません。

そんな重要な繰り返し処理ですが、JavaScriptにおける繰り返し処理の実装方法の一つが「forEach文」です。「forEach」文は繰り返し処理のなかでも少し特殊で、配列に特化した繰り返し処理のためのコードです。

「forEach文」を押さえれば、他の繰り返し処理にも対応できます。なぜなら、単純な繰り返し処理よりも配列の繰り返しの方が多少なりとも難しいからです。またJavaScript以外の言語での繰り返し処理、配列の繰り返し処理にも対応できるようになるので、ぜひ押さえてください。

JavaScriptのforEach文を押さえるということは、プログラミング言語全般における重要な概念の一つを押さえたということになります。

forEachの使い方

forEachの使い方の前に、for文を使用して配列に操作を加える方法を紹介します。具体的には以下のようになります。

var array = [1, 2, 3];
for(var i=0, i<array.length; i++)
{
     console.log(array[i]);
}

たとえばこのように記述すると、iのカウントをプラスしながら順番に出力していきます。一般的なループの記述方法ですが、配列に対してもきちんと処理を行うことができます。次に、forEach文の記述例を紹介します。

var array = [配列データ];
array.forEach(コールバック関数)

このような記述方法になります。中身を入れてみると以下のようになります。

var array = ['赤', '青', '緑'];
array.forEach(function(value){
     console.log(value);
}):

配列arrayに色をそれぞれセットして、それに対してforEachでvalueに値をセットし、最終的に出力しています。ちなみに、valueは引数です。

上記のコードを実行すると、赤、青、緑、と配列に格納されているインデックス順に出力されていきます。forEachはカウント数等気にしなくても勝手にループされるので、便利な概念です。

また、複数の配列に対してforEachを使用することも可能です。具体的には以下のようになります。

var arrays = [

     { color: '赤', English: 'red' },
     { color: '青', English: 'blue' },
     { color: '黄', English: 'yellow' },
];

上記の配列をforEachを使って出力すると以下のようになります。

arrays.forEach( function( value ) {
     console.log( value.color );
});

このように記述すると、赤、青、黄、とcolorの中身がインデックス順に表示されます。

forEachの注意点

forEachは上記の通り少ないコードで配列に処理を加えることのできる便利な概念ですが、残念ながらbreakやcontinueを使用することができません。これらのコードを記述するとエラーになります。

var array = ['赤', '青', '緑'];
array.forEach(function(value){
     if( value == 1 ) break;
     console.log(value);
}):

このコードはぱっと見インデックスの1番目である青でブレークしそうな感じがしますが、エラーになります。continueもforEach文で使用するとエラーになります。この場合、for分を使用するしかありません。

var array = ['赤', '青', '緑'];
for( var i = 0; i<array.length; i++) {
     if( array[i] == 1) break;
     console.log( array[i] );
}

このようにfor文で記述すると、インデックスの1番目である青できちんとブレークします。

コールバック関数の使い方

上でvalueを使用しましたが、あとindexとarrayを使用することができます。valueは配列データの値、indexは配列のインデックス番号、arrayは現在処理している配列、という内訳です。構文は以下になります。

array.forEach( function( value, index, array ) ) {
     //処理
});

このような構文です。具体的にそれぞれデータを入れていきます。

var arrays = [ 1, 2, 3, 4, 5];
arrays.forEach( function( value, index, array ) {
     array[ index ] = value * 2;
});
console.log( arrays );

arrayに現在のデータが格納されており、indexはインデックス番号です。それをforEachで回し、それぞれのデータを2倍にしてarraysに再格納しているイメージになります。わざわざarrayを用意しなくてもvalueをそのまま2倍にすれば良い、と思われるかもしれませんが、作業用に別にメモリ領域を確保する仕様になっています。

forEachと$.eachとの違い

jQueryの$.eachとforEachの使い方や構文は似ていますが、異なる点もあります。一つ目の違いはコールバック関数の引数です。

array.forEach( function( value, index, array ) {
     //処理
});

forEachは上でも説明してきた通りvalue、index、arrayの三つの引数が用意されています。一方で、$.eachの引数は以下のようになります。

$.each( array, function( index, value ){
     //処理
});

このように、arrayという引数はありません。また、ややこしいことにvalueとindexが逆になっています。統一しておいてほしいところですが、現状バラバラになっています。また、上でforEachはbreakでループを抜けることができないと説明しましたが、$.eachの場合はループを抜けることができます。

詳細については、今回はforEachがメインテーマなので割愛します。

forEachとmapの違い

mapもforEach同様配列に対して繰り返し処理ができるメソッドですが、返り値があるかどうかで違いがあります。たとえば配列の内容を倍にして別の配列に格納する処理を行う際、forEachだと別に変数を用意する必要があります。しかし、mapではreturnでそのまま格納できます。

var array = [1, 2, 3];
var array2 = [];
array.forEach( function( value ) {
     var temp = value * 2;
     array2.push( temp );
})
console.log( array2 );

まずこれがforEachを使って配列の値をすべて倍にして別の配列に格納するコードです。mapでまったく同じように記述すると以下のようになります。

var array = [1, 2, 3];
var array2 =array.map(function(value ) {
     return value * 2
})
console.log( array2 );

mapを使用すると、一時退避用の変数を用意しなくても良いようになります。以上、forEachの概要や似たようなコードとの違いについて解説してきました。forEachはコードをすっきりさせつつ、引数が三つある点が魅力です。

案件量が豊富なアルマサーチ

アルマサーチ

最後に、アルマサーチのご紹介!

アルマサーチはフリーランス向けに案件をご紹介することに特化したエージェントサービスです。豊富な案件量から、安定して継続的な案件のご紹介を実現しており、口コミから登録エンジニアが急増中です。

アルマサーチが選ばれる理由

  1. 豊富な案件量。週3?4日の案件や在宅リモート案件も。
  2. 優秀なコンサルタント陣。
  3. 案件に参画後もしっかりサポート。

豊富な案件量

フリーランス向けに特化し、業界屈指の案件量を誇ります!週3?4日の案件や、在宅リモート案件もありますし、その他あらゆる希望をしっかりお伝えください。最適な案件のご紹介をさせていただきます。

優秀なコンサルタント陣

技術に疎く、開発の希望を伝えても響かないエージェント・・・嫌ですよね。アルマサーチにはそのような者は一切おりません!さらに独立にまつわる税金や保険関係に詳しいスタッフが徹底的にサポートさせていただきます。

案件に参画後もしっかりサポート

常駐先が決まった瞬間に、一度も連絡が取れなくなるエージェント・・・いますよね?アルマサーチでは、そのようなことは一切ありません!常に電話やメールは即対応しますし、月に1度のランチミーティングなどから現場の状況を細かくヒアリングし、就業環境改善に尽力いたします。

相談する

人気記事

編集部おすすめ記事

この記事を読んだ人はこんな記事を読んでいます

案件探しやフリーランスになるための相談する