JavaScript/function()

function

function は、JavaScript において関数を定義するためのキーワードです。関数は、複数のコードをまとめて再利用可能にする構造で、プログラムの構造化や繰り返し処理を効率化するのに役立ちます。function を使うことで、名前付き関数や無名関数を作成することができます。また、JavaScript では関数そのものもオブジェクトとして扱われます。

構文

名前付き関数

function 関数名(引数1, 引数2, ...) {
  // 実行するコード
  return 戻り値;
}

無名関数 (関数式)

const 関数名 = function(引数1, 引数2, ...) {
  // 実行するコード
  return 戻り値;
};

即時実行関数式 (IIFE)

(function(引数1, 引数2, ...) {
  // 実行するコード
})(引数1, 引数2, ...);

関数の引数 (デフォルト値)

function 関数名(引数1 = デフォルト値, 引数2 = デフォルト値, ...) {
  // 実行するコード
}

関数の引数 (可変長引数 - Rest parameter)

function 関数名(...引数) {
  // 実行するコード
}

関数の戻り値

function 関数名(引数1, 引数2, ...) {
  return 戻り値;
}

使用例

名前付き関数

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice')); // Hello, Alice!

無名関数 (関数式)

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('Bob')); // Hello, Bob!

即時実行関数式 (IIFE)

(function(name) {
  console.log(`Hello, ${name}!`);
})('Charlie'); // Hello, Charlie!

デフォルト値のある引数

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

console.log(greet()); // Hello, Guest!

可変長引数 (Rest parameter)

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

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

戻り値

function square(number) {
  return number * number;
}

console.log(square(5)); // 25

注意点

• 名前付き関数と関数式の違い: 名前付き関数は巻き上げ（hoisting）によってスクリプト内でどこでも使用できますが、関数式は定義後にのみ使用できます。
• IIFE の用途: 即時実行関数式 (IIFE) は、スコープを分離してグローバルスコープを汚染しないために使用されます。
• Rest parameter: 可変長引数を利用することで、関数が任意の数の引数を受け取れるようになります。

関連項目

• アロー関数
• メソッド
• クラス
• クロージャ

参考

• MDN Web Docs: function 文
• ECMA-262: 関数定義