Javascriptにおける、forとforEachの比較

同じ結果を出力する繰り返し文を、次の２つの文法で記述し比較する。

• for文
• forEach文

前提(環境構築)

以下はJavasciptを実行し、実行結果を比較する。

実行結果も記すが、実際に実行する場合は、実行環境として以下を要求する。

• ubuntuなどのunixコンソール上で実行する。
• Node.jsがインストールされている。
• gitでこのリポジトリをcloneし、カレントディレクトリをforAndForEachとする。

# ubuntuのパッケージマネージャを利用してNode.jsをインストールする
$ sudo apt-get update
$ sudo apt-get install nodejs

# ソースファイルをcloneする
$ git clone https://gist.github.com/546dd9e378f93f6c24b8c8abab6fe187.git forAndForEach
$ cd forAndForEach

1.配列の中身を出力する

for文

for_element.jsのソースコード

const items = [ "hello", 32, true ];

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

上記のコードの実行結果を示す。

$ node for_element.js
hello
32
true

forEach文

forEach_element.jsのソースコード

const items = [ "hello", 32, true ];

items.forEach( item => {
  console.log(item);
});

上記のコードの実行結果を示す。

$ node forEach_element.js
hello
32
true

for文と同様に、forEach文も繰り返し処理をすることができる。

しかし、記述方法は異なり、配列.forEach関数の引数に、関数(今回はitemを引数とするアロー関数)を渡す。 すると、渡された関数を、配列の各要素に対し実行することで、繰り返し処理が実現できる。

おまけ 様々な関数定義とforEach文

関数定義の仕方は以下を一例に、様々ある。

• 関数定義文(function statement)
• アロー関数

様々な関数を定義し、それをforEach文に渡して実行してみる。

forEachWithBonus_element.jsのソースコード

const items = [ "hello", 32, true ];


// アロー関数を事前に定義する方法
console.log("アロー関数を事前に定義する方法");
const printItem1 = item => {
  console.log(item);
}
items.forEach( printItem1 );


// 無名関数を利用する方法
console.log("無名関数を利用する方法");
items.forEach( function ( item ) {
  console.log(item);
});


// 無名関数を事前に定義する方法(無名関数に名前をつける)
console.log("無名関数を事前に定義する方法(無名関数に名前をつける)");
const printItem2 = function ( item ) {
  console.log(item);
}
items.forEach( printItem2 );


// 関数定義文を利用する方法
console.log("関数定義文を利用する方法");
function printItem3( item ) {
  console.log(item);
}
items.forEach( printItem3 );

上記のコードの実行結果を以下に示す。

$ node forEachWithBonus_element.js
アロー関数を事前に定義する方法
hello
32
true
無名関数を利用する方法
hello
32
true
無名関数を事前に定義する方法(無名関数に名前をつける)
hello
32
true
関数定義文を利用する方法
hello
32
true

2. 配列の添字と配列の中身を出力する。

for文

for_element_index.jsのソースコード

const items = [ "hello", 32, true ];

for( let i=0; i<items.length; i++ ){
  console.log(`${i} : ${items[i]}`);
}

上記のコードの実行結果を記す。

$ node for_element_index.js
0 : hello
1 : 32
2 : true

補足: console.log内で定義している文字列はテンプレートリテラルを利用し、変数の値を埋め込んだ文字列をつくっている。

forEach文

forEach_element_index.jsのソースコード

const items = [ "hello", 32, true ];

items.forEach( (item, index) => {
  console.log(`${index} : ${item}`);
})

上記のコードの実行結果を記す。

$ node forEach_element_index.js
0 : hello
1 : 32
2 : true

上記のように、forEach文に渡す関数の、第一引数は配列の要素、第二引数は配列の添字を受け取るようになっている。