お役立ち情報

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

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はコードをすっきりさせつつ、引数が三つある点が魅力です。

キャリアカウンセリングのプロとして
あなたに合った案件をご案内します。

まずはお気軽にお問い合わせください!

イメージ