関数

処理をまとめて再利用できるようにするためのブロックです。

関数宣言

// 関数宣言
function greet(name) {
  return `こんにちは、${name}さん！`;
}

// 関数の呼び出し
console.log(greet("太郎")); // こんにちは、太郎さん！

関数式

関数を変数に代入する書き方です。

// 関数式（無名関数）
const add = function(a, b) {
  return a + b;
};

console.log(add(5, 3)); // 8

アロー関数（ES6）

より簡潔に関数を書ける構文です。

// アロー関数 - より簡潔な書き方
const multiply = (a, b) => a * b;

console.log(multiply(4, 2)); // 8

// 複数行のアロー関数
const divide = (a, b) => {
  if (b === 0) {
    return "0で割ることはできません";
  }
  return a / b;
};

console.log(divide(10, 2)); // 5
console.log(divide(10, 0)); // 0で割ることはできません

アロー関数とふつうの関数の違い

アロー関数は 定義された場所の this をそのまま引き継ぎます（レキシカル this）。一方ふつうの関数の this は「呼び出し方」によって変わります。コールバック関数として渡したときに this がずれない点がアロー関数の便利なところです。

ただしアロー関数は arguments オブジェクトを持たず、オブジェクトのメソッドには向きません。また new で呼び出すとエラーになるため、コンストラクタとしては使えません。用途に応じて使い分けましょう。

デフォルトパラメータ（ES6）

引数が渡されなかったときの初期値を指定できます。

function welcome(name = "ゲスト") {
  return `ようこそ、${name}さん！`;
}

console.log(welcome());       // ようこそ、ゲストさん！
console.log(welcome("花子")); // ようこそ、花子さん！

レスト構文（ES6）

可変長引数を配列として受け取ります。

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

可変長引数はレスト構文で

古いコードでは可変長引数に arguments オブジェクトが使われていましたが、現在は ...numbers のような レスト構文 が推奨です。レスト構文で受け取った引数は本物の配列なので、map や reduce などの配列メソッド（配列 で詳しく学びます）がそのまま使え、アロー関数でも動きます。

次に読む

• オブジェクト — 関連するデータと処理をひとまとめにする