PythonとJavaScriptの配列ループを比較

Pythonを主に使用するのですが、JavaScriptを触ってみるといろんな配列操作があってこんがらがるので整理しました。

お題

今回はstringの入った配列をループし、すべての要素の末尾に__を付けた配列を返すプログラムをお題としました。

Python

for in

Pythonでは基本for文は一つです。for i in <list>でイテレーションが出来ます。

from typing import List
array = ["hoge", "fuga", "foo", "bar"]

def add_suffix(text: str) -> str:
    return text + "__"

def for_in(array: List[str]) -> List[str]:
    ls: list = []
    for item in array:
        ls.append(add_suffix(item))
    return ls

print(for_map(array))
# ['hoge__', 'fuga__', 'foo__', 'bar__']

map

mapを利用すれば、配列すべてに関数を適用出来ます。
ただmapメソッドの返り値はmapオブジェクトというイテレータなので、listに変換する必要があります。

def for_map(array: List[str]) -> List[str]:
    return list(map(add_suffix, array))

print(for_in(array))
# ['hoge__', 'fuga__', 'foo__', 'bar__']

enumerate

indexが必要な場合、enumerateを利用出来ます。

def for_enum(array: List[str]) -> List[str]:
    ls: list = []
    for idx, item in enumerate(array):
        # idx = 0, 1, 2, 3
        ls.append(add_suffix(item))
    return ls

print(for_enum(array))
# ['hoge__', 'fuga__', 'foo__', 'bar__']

JavaScript

for

JavaScriptでは、いろんな記述法がありますが、ベーシックなのはc言語と同じスタイルでしょう。

var array = ["hoge", "fuga", "foo", "bar"];

function add_suffix(text) {
  return text + "__";
}

function forI(array) {
  returnArray = new Array();
  for (var i = 0; i < array.length; i++) {
    // i = 0, 1, 2, 3
    returnArray.push(add_suffix(array[i]));
  }
  return returnArray;
}

console.log(forI(array));
// ['hoge__', 'fuga__', 'foo__', 'bar__']

for in

var i in arrayとすると、オブジェクトのプロパティをループします。
Arrayオブジェクトのプロパティは整数値の配列なので、先のカウンターが取り出せます。
ただここでのidxはstring型なので注意が必要です。

function forIn(array) {
  returnArray = new Array();
  for (var idx in array) {
    // idx = "0", "1", "2", "3"
    returnArray.push(add_suffix(array[idx]));
  }
  return returnArray;
}

console.log(forIn(array));
// ['hoge__', 'fuga__', 'foo__', 'bar__']

ただこの方式では繰り返し順序が実装依存のため、順番が重要な配列には推奨されていません。
for...in - JavaScript _ MDN

注: for...in はインデックスの順序が重要となる 配列 の繰り返しには使うべきではありません。

繰り返しの順序が実装依存なため、配列の繰り返しは要素を一貫した順番で参照することになるとは限りません。このため、アクセスの順番が大事となる配列を繰り返す時には、数値のインデックスでの for ループ (か Array.prototype.forEach() か for...of ループ) を使った方が良いです。

for of

ECMAScript6からはfor ofが利用出来ます。
Pythonユーザーであればなじみの深い挙動です。arrayの中身そのものが取り出されます。

function forOf(array) {
  returnArray = new Array();
  for (var item of array) {
    returnArray.push(add_suffix(item));
  }
  return returnArray;
}

console.log(forOf(array));
// ['hoge__', 'fuga__', 'foo__', 'bar__']

forEach

Array.prototype.forEach()を用いれば、各要素に対してひとつづつ関数を実行出来ます。
Array.prototype.forEach() - JavaScript _ MDN

forEach() メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

function forEach(array) {
  returnArray = new Array();
  array.forEach(item => {
    returnArray.push(add_suffix(item));
  });
  return returnArray;
}

console.log(forEach(array));
// ['hoge__', 'fuga__', 'foo__', 'bar__']

for ofと異なる点は、例外を発生させる以外、途中でbreakできないところです。
また、要素がundefinedの場合関数が呼び出されません。
ただIE9以上で使用出来ます。

map

最後は配列全要素に関数を適用するmapです。Pythonとは異なり、返り値がArrayです。

function forMap(array) {
  return array.map(add_suffix);
}

console.log(forMap(array));
// ['hoge__', 'fuga__', 'foo__', 'bar__']