JavaScript の for ループの代替品

この記事は？

Python 版はこちら (言語が違う以外ほぼ同じ):

JavaScript の Array において、「各要素に対してこうする」というコードを書く機会がしばしばあります。基本的な実装方法は、「要素数だけ for ループを回して処理」です。

しかし、for を用いずにそれを実現できるメソッドがあります。上手く使えると、コード量を削減し、より簡潔に記述することができます。

ただし、可読性などの観点で、for のままのが良いシチュエーションもあるので注意。 各要素に対して複雑な処理をするのであれば、for で書いた方が無難です。

前提知識 - アロー関数式

次の 3つの関数は、いずれも「引数を 2倍した値を返す」という動作で等価です。

function (e) {
  return e*2;
}

e => { return e*2; }

// 関数の内容が return のみのとき、return も省略可
e => e*2

アロー関数式 => を使用すると、function return を省略して書くことができます。

Array 各要素に対し、任意の処理をする

例: 各要素を 2倍にする

const input  = [1, 2, 3, 4];
const output = [];

for(let i = 0; i < input.length; i++) {
  output.push(input[i] * 2);
}
// output: [2, 4, 6, 8]

const input  = [1, 2, 3, 4];
const output = input.map(e => e*2);
// output: [2, 4, 6, 8]

.map() の引数に、処理内容を定義した関数を指定します。1 を引数に関数 e => e*2 が、次は 2 3 4 を引数にと繰り返します。その関数の帰り値が、出力される Array (ここでは output) の要素に入れられます。

例が単純すぎて味気無いですが、もう少し応用的な例としては <input type="file" multiple> に入力されたファイルのファイル名抽出とかが挙げられます。

const files      = document.getElementById("any-input-element").files
const files_name = [];

for(i = 0; i < files.length; i++) {
  files_name.push(files[i].name);
}

const files      = document.getElementById("any-input-element").files
const files_name = Array.from(files).map(e => e.name)
//                 ~~~~~~~~~~~~~~~~~
// .map を使うため、FileList から Array に変換

(2024/01/29 追記) ↑あまり良い例じゃなかったかも･･･

@juner さんより、コメントにてご指摘いただきました。Array.from() 自体に .map() 的な機能があるようです。

const files_name = Array.from(files, e => e.name);

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from

(言い訳すると、シンプルに知らなかった。あと .map() のサンプルで苦し紛れに思いついたのがコレだったんです･･･。)

Array から特定条件の要素のみ取り出す

例: 偶数だけ取り出す

const array      = [1, 2, 3, 4];
const array_even = [];

for(let i = 0; i < array.length; i++) {
  if((array[i] % 2) == 0) {
    array_even.push(array[i]);
  }
}
// array_even: [2, 4]

const array      = [1, 2, 3, 4];
const array_even = array.filter(e => (e % 2) == 0);
// array_even: [2, 4]

.map() 同様、各要素に対して .filter() の引数に渡した関数が呼び出されます。今度は、関数の返り値が true なら出力 Array (ここでは array_even) に入れ、false なら除かれます。

ある値が複数あるいずれかと一致するか

例: 入力されたワードが曜日であるか確認する

const input           = "mon";
const day_of_the_week = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];

let is_input_true = false;
for(let i = 0; i < day_of_the_week.length; i++) {
  if(input === day_of_the_week[i]) {
    is_input_true = true;
    break;
  }
}
// is_input_true: true

const input           = "mon";
const day_of_the_week = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];

let is_input_true = day_of_the_week.includes(input);
// is_input_true: true

.includes() の引数に渡した値が、Array 内 (ここでは day_of_the_week) にあれば true、なければ false を返します。

あとがき - 標準 API リファレンスを見てみよう

リーダブルコードにて、こんな旨のアドバイスがありました。(文はうろ覚え)

たまに標準 API の仕様書を読んでみると良い。
全部完璧に覚える必要は無い。
だが、何となく覚えておいたものが、急に役立つことがある。

実際、MDN で Array のメソッドを調べてみると、けっこう色々なメソッドがあるのが分かります。それを読んでいくと、「あれ？あの時に書いたやつ、このメソッドで一発･･･」なんて出会いがあるかも。