JavaScriptの関数について徹底解説

2024年7月20日 2024年7月20日

慶西川

はじめに

JavaScriptの関数は、プログラミングの基礎であり、非常に強力なツールです。

本記事では、関数の基本から高度なテクニックまで、詳しく解説します。

1. 関数とは？

関数とは、一連の命令をまとめて名前を付けたもので、必要なときにその名前を呼び出すことで命令を実行できます。

関数はコードの再利用性を高め、コードの可読性を向上させます。


function greet() {
    console.log('Hello, World!');
}

greet(); // 'Hello, World!' と表示されます

2. 関数の定義方法

JavaScriptでは、主に以下の方法で関数を定義できます。

関数宣言


function sayHello() {
    console.log('Hello!');
}

関数式

const sayHello = function() {
    console.log('Hello!');
};

アロー関数

const sayHello = () => {
    console.log('Hello!');
};

3. 関数式とアロー関数

関数式は変数に関数を代入する方法です。アロー関数はより簡潔に書ける新しい記法です。


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

const add = (a, b) => a + b;

アロー関数は後ほど説明するthisを束縛しないという特性があります。

4. 引数と戻り値

関数は引数を受け取り、処理を行った結果を戻り値として返すことができます。

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

const result = add(2, 3); // result は 5 になります

5. コールバック関数

関数を引数として渡し、後で呼び出すことができます。これをコールバック関数と言います。

function greet(callback) {
    console.log('Hello!');
    callback();
}

function sayGoodbye() {
    console.log('Goodbye!');
}

greet(sayGoodbye); // 'Hello!' と 'Goodbye!' が順に表示されます

6. 即時実行関数

関数を定義すると同時に実行する方法です。

次の章でスコープの汚染を防ぐためによく使われます。

(function() {
    console.log('This is an IIFE!');
})();

7. 関数のスコープとクロージャ

関数のスコープとは、変数が有効な範囲のことです。関数を使用することで、変数の有効な範囲を指定でき、同名の変数が同じ有効範囲に存在しないようにすることができます。

クロージャは関数とその関数が宣言された時のスコープの組み合わせです。

クロージャを使用することで、無駄なグローバル変数を定義してグローバル環境を汚さずにすみます。

function outer() {
    let count = 0;

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

    return inner;
}

const counter = outer();
counter(); // 1
counter(); // 2

8. 関数のデフォルト引数

関数の引数にデフォルト値を設定できます。

初期値を設定することで引数を渡さなくても関数を実行することができます。

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

greet(); // 'Hello, Guest!' と表示されます
greet('Alice'); // 'Hello, Alice!' と表示されます

9. 高階関数

高階関数は、他の関数を引数に取るか、関数を戻り値として返す関数です。

function createMultiplier(multiplier) {
    return function(value) {
        return value * multiplier;
    };
}

const double = createMultiplier(2);
console.log(double(5)); // 10 と表示されます