⑧ 配列の値を処理しよう

最後は、配列を実際の処理へつなげよう。配列には、要素ごとに処理するためのメソッドが用意されている。

const prices = [100, 200, 300];

prices.forEach((price) => {
  console.log(price);
});

forEach が、配列の値をひとつずつ price に渡すんですね。

そう。(price) => { ... } はアロー関数という関数の書き方だ。function と同じく入力と処理を持っていて、名前をつけずにその場で渡せる。

関数を、関数に渡しているということですか。

その通り。forEach は「要素ひとつひとつに、この処理をしてくれ」と頼むための入口だ。

元の配列から新しい配列を作りたいときは map を使う。

const prices = [100, 200, 300];
const doubledPrices = prices.map((price) => price * 2);

console.log(doubledPrices);
console.log(prices);

[200, 400, 600] と [100, 200, 300] ですね。元の配列は変わっていません。

大事な性質だよ。map は結果を新しい配列として返す。元のデータを壊さないから、処理を重ねても流れを追いやすい。

条件に合う要素だけを選ぶなら filter だ。

const scores = [45, 82, 68, 91];
const passedScores = scores.filter((score) => score >= 60);

console.log(passedScores);

渡した関数が true を返した要素だけが残るんですか。③で出てきた比較が、ここでも使われていますね。

よく気づいた。filter は要素ごとに条件式を確かめて、true になったものだけを新しい配列に集める。

型も引き継がれる。scores が number[] だから、score も number だと分かる。だからここでは型注釈を書かなくていい。

変数、計算、条件式、関数、配列、型が全部つながりました。

まさにそれが狙いだよ。新しい構文を孤立して覚えるのではなく、すでに知っているものの組み合わせとして読むと理解しやすい。

分からないコードに出会ったら、値は何か、どこで名前がついたか、どの関数へ渡り、何が返るかを順番に追おう。この読み方は、どんなプログラムでも役に立つ。