Day 3・関数とオブジェクト — 処理とデータをまとめる

アロー関数 — (x) => x + 1 の読み方

現代のJSやReactで頻出するアロー関数を、ふつうの関数と対応させて「読める」ようにする。

矢印 => は「引数から結果へ」の矢印

現代のJavaScriptやReactのコードを読むと (x) => x + 1 のような書き方をよく見ます。これがアロー関数です。矢印 => の左が引数、右が返す値だと読めば、ほとんどの場合それで十分です。まずは「書く」より「読める」ことを目標にしましょう。

JAVASCRIPT

// ふつうの関数
function addOne(x) {
  return x + 1;
}

// 同じ意味のアロー関数
const addOne = (x) => x + 1;

矢印の左が引数、右が return される値。上下は同じ意味

アロー関数は、本体が1つの式だけなら波かっこ {} と return を省略できます。上の (x) => x + 1 は「x を受け取って x + 1 を返す」という意味で、return を書かなくても矢印の右の値が自動で返ります。この短さが、リストの加工などで大量に使われる理由です。

JAVASCRIPT

// 波かっこを使えばふつうの関数と同じように複数行も書ける
const greet = (name) => {
  const upper = name.toUpperCase();
  return "Hi, " + upper;
};

// 引数が1つなら () も省けることがある
const square = x => x * x;

波かっこ版では return が必要。省略版では矢印の右がそのまま戻り値

なぜアロー関数が主流なのか

map や filter のような配列メソッドには「各要素にこの処理をして」と関数を渡します。そのたびに function と書くと長くなるので、短く書けるアロー関数が好まれます。React のイベント処理でも onClick={() => ...} の形で毎日のように登場します。読めれば、AIが生成したコードの大半が理解できます。

毎回 function で長い

小さな処理でも function 宣言だと記述量が多い

JAVASCRIPT

const result = numbers.map(function (n) {
  return n * 2;
});

アローで短く

同じ処理を1行で。map/filter と相性がよい

JAVASCRIPT

const result = numbers.map((n) => n * 2);

矢印 => の左が引数、右が返す値だと読む
本体が式1つなら {} と return を省略でき、右の値が自動で返る
波かっこ {} を使う場合は return が必要
まずは書けなくても「読める」ことを目標にすればよい

AIにはこう聞く

アロー関数が読めないときは「この (x) => x * 2 をふつうの function の書き方に直して」と頼めば、対応する形を見せてくれます。逆に「この function をアロー関数に書き換えて」と頼めば、短い形に直してくれます。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

アロー関数 const triple = (n) => n * 3; と同じ意味のふつうの関数はどれ?

(x) => x + 1 のように波かっこ {} を使わないアロー関数では、返り値はどうなる?

アロー関数 (n) => n * 2 を、日本語で「何を受け取り何を返すか」を説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。