JavaScriptにおける関数

関数はJavaScriptの基本的な構成要素の1つであり、高水準の解釈型スクリプト言語です。関数は特定のタスクを実行する再利用可能なコードブロックです。JavaScriptでは、関数はオブジェクトであり、他のオブジェクトと同様にプロパティを持ち、操作することができます。

関数の宣言

JavaScriptにおける関数の宣言は、functionキーワードで関数を定義し、独自の関数名、パラメータ名を含むかもしれないカッコ()、関数のコードブロックを囲む中カッコ{}に続く形式を取ります。以下は一般的な関数宣言の構文です:

function functionName(parameters) {
    // Code to be executed
}

例えば、2つの数値を加算する単純な関数宣言は次のようになります。

function addNumbers(a, b) {
    return a + b;
}

パラメータと引数

関数の宣言では、関数名の後にカッコが続き、0個以上のパラメータを含むことができます。パラメータは、関数が呼び出された際に期待される入力を表すプレースホルダです。関数を呼び出す際には、これらのパラメータに対して値を指定します。これらの値は引数と呼ばれます。

上記の「数値を加算する」関数では、aとbはパラメータです。もしもこの関数をAddNumbers(2, 3)のように2つの数値で呼び出す場合、2と3が引数となります。

return文

return文は、関数が出力する値を指定するために使用されます。return文が実行されると、関数の実行は停止し、指定された値が関数が呼び出された場所に返されます。関数にreturn文がない場合、undefinedが返されます。

addNumbers関数では、return a + b;という文がパラメータaとbを加算し、その結果を返します。

関数の巻き上げ

JavaScriptでは、関数宣言は巻き上げられます。これは、JavaScriptのインタプリタがコードの実行前に全ての関数宣言をそのスコープ内の先頭に移動するという意味です。したがって、この方法で宣言された関数は、コード内で定義される前に使用することができます。

例えば、次のコードでは、関数呼び出しの前に関数の宣言が現れているにもかかわらず、エラーなく動作します。

console.log(addNumbers(5, 3)); // Outputs: 8

function addNumbers(a, b) {
    return a + b;
}

関数式

関数式は、JavaScriptで関数を定義する方法の1つであり、それを変数に割り当てます。関数自体は変数名で参照できます。関数式の一般的な構文は次のようになります。

let variableName = function(parameters) {
    // Code to be executed
}

例えば、addNumbers関数は次のように関数式として定義することができます。

let addNumbers = function(a, b) {
    return a + b;
};

無名関数

関数式では、関数自体が通常無名（名前を持たない）であることが一般的です。ただし、名前付きの関数式も使用することができます。関数に名前を付けることはデバッグに役立ちます（スタックトレースに表示されるため）、しかし関数自体の外部からその名前で呼び出すことはできません。

let addNumbers = function add(a, b) {
    return a + b;
};

上記のコードでは、addはグローバルスコープからはアクセスできません。それは関数本体内でのみ使用できます。

IIFE: 即時関数

即時関数（Immediately Invoked Function Expression、IIFE）は、宣言と同時に実行される関数です。構文は、関数式を括弧で囲んで関数式文を作成し、それから2番目の括弧を使用して関数を即座に呼び出します。これは、新しいスコープを作成する場合に便利です。varで宣言された変数はIIFE外からアクセスできません。

(function() {
    let message = "Hello, world!";
    console.log(message);  // Outputs: "Hello, world!"
})();

console.log(message);  // Outputs: ReferenceError: message is not defined

アロー関数

アロー関数は、JavaScriptにおいて関数式を短く書くための簡潔な方法を提供します。ES6（ECMAScript 2015）で導入され、その短さとthisキーワードの扱いにより人気を集めています。アロー関数の構文は次のようになります。

let variableName = (parameters) => {
    // Code to be executed
}

2つの数値を加算する単純なアロー関数は、次のようになります。

let addNumbers = (a, b) => {
    return a + b;
};

もし関数の本体が単一の式である場合、中括弧とreturnキーワードを省略することができ、関数をさらに短く書くことができます。

let addNumbers = (a, b) => a + b;

アロー関数と'this'の文脈

アロー関数の重要な特徴の1つは、独自のthis値を持たないことです。代わりに、周囲のコードコンテキストからthisを継承します。これにより、thisを周囲のコードと同じ値にしたいコールバックやメソッド内で使用するのに適しています。

例えば、イベントハンドラ内では、アロー関数によりthisが関数自体ではなく、イベントをトリガーしたオブジェクトを参照することができます。

let button = document.getElementById('myButton');
button.addEventListener('click', () => {
    // `this` refers to `button`, not the function
    this.classList.toggle('active');
});