JavaScriptでアロー関数の書き方

JavaScriptのアロー関数（=>）の簡潔な書き方をブラウザで実行して学べます。初心者向けに、コードを編集して実行結果をすぐ確認できます。 下のコードはブラウザ内でそのまま実行できます。「実行エディタで開く」を押すと、progoのオンラインJavaScript実行環境にコードが読み込まれ、その場で動作を確認できます。

サンプルコード

// 通常の関数
const add = (a, b) => a + b;
console.log(add(3, 5));

// 引数1つなら括弧を省略できる
const square = x => x * x;
console.log(square(6));

// 複数行なら { } と return
const greet = name => {
  const msg = `Hi, ${name}`;
  return msg;
};
console.log(greet("progo"));

ポイント解説

• (引数) => 式で簡潔に関数を書けます。
• 1行で値を返す場合はreturnと{}を省略できます。
• thisを束縛しない点が通常の関数と異なります。