JavaScriptの関数完全ガイド

はじめに
関数
まとめ

はじめに

JavaScriptにおける関数は、コードの再利用性や組織化を促進する重要な概念です。この記事では、アロー関数、即時関数、無名関数、クロージャ、および可変長引数といった異なる関数の種類とその使い方を詳しく解説します。

関数

アロー関数

ES6（ES2015）から導入されたアロー関数は、簡潔な構文と特定のthis挙動の違いが特徴です。以下は、アロー関数の基本的な使い方です。

// 従来の関数定義
function traditionalFunc(arguments) {
  // 処理
}

// アロー関数
const arrowFunc = (arguments) => {
  // 処理
};

// 引数が一つの場合、括弧を省略可能
const simpleFunc = argument => {
  // 処理
};

// 処理が一行の場合、中括弧とreturnを省略
const add = (a, b) => a + b;

即時関数

即時関数は、定義された直後に実行される関数で、主にローカルスコープを作成しグローバルスコープの汚染を防ぐために使用されます。

(function(name) {
  console.log(`Hello, ${name}!`);
})("Alice");

無名関数

無名関数（または匿名関数）は、名前が定義されていない関数で、一般的にはイベントハンドラやコールバックとして使用されます。

const greet = function(name) {
  console.log(`Hello, ${name}!`);
};

greet("Alice");

クロージャ

クロージャは、関数とその関数が作成されたレキシカル環境の組み合わせを指し、外部の変数を参照し続けることができます。

function createCounter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const counter = createCounter();
counter();  // 結果: 1
counter();  // 結果: 2

可変長引数

ES6から導入された可変長引数は、関数に任意の数の引数を渡すことができます。これにより、関数がより柔軟に使用できるようになります。

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

console.log(sum(1, 2, 3));  // 結果: 6
console.log(sum(4, 5, 6, 7));  // 結果: 22