JavaScript は多用途かつ強力な言語であり、その最も興味深い機能の 1 つはクロージャの概念です。クロージャは、特にスコープと変数アクセスに関連して、JavaScript 関数がどのように動作するかを理解するための基礎です。このチュートリアルでは、クロージャとは何か、クロージャがどのように機能するかを探り、この概念を習得するのに役立つ実践的な例を提供します。

クロージャとは何ですか?

クロージャは、関数がそのスコープ外で実行された場合でも、その字句スコープへのアクセスを保持する関数です。簡単に言うと、クロージャを使用すると、関数が作成された環境を「記憶」することができます。

なぜクロージャが重要なのでしょうか?

クロージャはいくつかの理由から不可欠です:

• データ プライバシー: クロージャを使用すると、関数の外部からアクセスできないプライベート変数を作成できます。

• ステートフル関数: 関数が呼び出し間で状態を維持できるようにします。

• 関数型プログラミング: クロージャは関数型プログラミングの重要な概念であり、高階関数とカリー化を可能にします。

クロージャはどのように機能しますか?

クロージャを理解するために、基本的な例から始めましょう:

function outerFunction() {
    let outerVariable = 'I am outside!';

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: I am outside!

上記の例では:

• outerFunction は変数 externalVariable を作成し、innerFunction.

を定義します。

• innerFunction は、その字句スコープ内にある externalVariable にアクセスします。

• outerFunction は innerFunction を返し、クロージャを作成します。

• myClosure が呼び出されるとき、outerFunction の実行が終了した後でも、outerVariable にアクセスできます。

クロージャの実践例

1.プライベート変数の作成

クロージャを使用すると、特定の関数を通じてのみアクセスまたは変更できるプライベート変数を作成できます。

function createCounter() {
    let count = 0;

    return {
        increment: function() {
            count  ;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount()); // 1

この例では、count は、increment、decrement、および getCount メソッドを通じてのみアクセスおよび変更できるプライベート変数です。

2.関数を動的に作成する

クロージャを使用すると、特定のデータを使用して関数を動的に作成できます。

function greetingGenerator(greeting) {
    return function(name) {
        return `${greeting}, ${name}!`;
    };
}

const sayHello = greetingGenerator('Hello');
const sayGoodbye = greetingGenerator('Goodbye');

console.log(sayHello('Alice')); // Hello, Alice!
console.log(sayGoodbye('Bob')); // Goodbye, Bob!

ここで、greetingGenerator は、greeting 変数を使用してクロージャを作成し、sayHello とsayGoodbye が呼び出されたときにそれを使用できるようにします。

3.非同期コードでの状態の維持

クロージャは、コードのさまざまな部分にわたって状態を維持する必要がある非同期プログラミングで特に役立ちます。

function fetchData(url) {
    let cache = {};

    return function() {
        if (cache[url]) {
            return Promise.resolve(cache[url]);
        } else {
            return fetch(url)
                .then(response => response.json())
                .then(data => {
                    cache[url] = data;
                    return data;
                });
        }
    };
}

const getUserData = fetchData('https://jsonplaceholder.typicode.com/users/1');

getUserData().then(data => console.log(data)); // Fetches data from the API
getUserData().then(data => console.log(data)); // Returns cached data

この例では、getUserData への複数の呼び出しにわたってキャッシュが維持され、URL ごとにデータが 1 回だけフェッチされ、その後は再利用されます。

結論

クロージャは JavaScript の強力な機能であり、関数がその字句スコープの外で実行された場合でも、その字句スコープへのアクセスを維持できるようになります。これらはデータ プライバシー、ステートフル関数を可能にし、関数型プログラミングの基礎となります。クロージャを理解して使用することで、より効率的で読みやすく、保守しやすい JavaScript コードを作成できます。

プロジェクトでクロージャを試してみると、すぐにその多用途性と威力を理解できるでしょう。コーディングを楽しんでください!