アロー関数、スコープ、テンプレートリテラル

アロー構文、ブロックスコープ、クロージャをマスターし、テンプレートリテラルで動的な文字列を組み立てます。

8 分 · 3 問

アロー関数はモダンなコードのいたるところにあります。map や filter のコールバック、イベントリスナー、Promise など。その強みは、本体が単一の式に収まるときの暗黙のリターンを伴うコンパクトな構文です。波かっこを開いた途端に、return は再び必須になります。

const double = (n) => n * 2;

const isAdult = (user) => user.age >= 18;

const buildUser = (name) => ({ name, active: true });

const sum = (a, b) => {
  const total = a + b;
  return total;
};

console.log(double(21)); // 42
console.log(buildUser("Ana").active); // true

スコープは変数がどこで見えるかを決めます。let と const では、ブロック(if、for、波かっこ)の中で宣言された変数はそのブロック内でのみ存在します。もう1つの本質的な仕組み: 関数は、それが作成されたスコープの変数へのアクセスを、そのスコープが終わった後でも保持します。これがクロージャであり、カウンター、キャッシュ、状態マネージャを動かしているものです。

function createCounter() {
  let count = 0;
  return () => {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

バッククォートで区切られるテンプレートリテラルは、連結よりはるかに優れた代替手段です。${...} で式を注入し、改行はそのまま保持されるので、メッセージやHTMLの断片を組み立てるのに理想的です。

const user = { firstName: "Nadia", cartCount: 3 };

const message = `Hello ${user.firstName}, you
have ${user.cartCount} items in your cart.`;

console.log(message);

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. 暗黙のリターンを持つアロー関数からオブジェクトを正しく返す構文はどれですか?
   • (name) => { name: name }
   • (name) => ({ name })
   • (name) => return { name }
2. if ブロックの中で let で宣言された変数は、そのブロックの後でアクセスできますか?
   • はい、var と同じように
   • いいえ、そのスコープはブロックに限定されます
   • 初期化されていた場合のみ
3. テンプレートリテラルを区切る文字はどれですか?
   • シングルクォート
   • ダブルクォート
   • バッククォート