🦔

クロージャーについて

2025/07/03に公開2件

JavaScriptを勉強しているときに、クロージャーという概念の理解が必要になったので、投稿してみました。
内側に定義されている関数からレキシカルスコープの変数を参照できる現象を、クロージャーといいます。

クロージャーを使うことで、下の二つのことができます。
プライベート変数の定義
プライベートとは関数の外部からアクセスできないということ
動的な関数の生成
プログラミングにおける「動的」の意味は、状況に応じて変化すること
動的な関数とは、状況によって異なる関数という意味合い
サンプルコード
function fn1() { // グローバルスコープ
    let a = 123; // 外側の関数スコープ
    function fn2() { // 内側の関数スコープ
        console.log(a); // これも内側の関数スコープ
    }
    fn2();
}
fn1();

Discussion

shiracamus

こんなコードにすると使い道を理解しやすいかと思います。

function counter(count = 1) {
    function countup() {
        return count++;
    }
    return countup;  // クロージャを返す
}
// const counter = (count = 1) => () => count++; でも同じ

const counter1 = counter();
const counter2 = counter(100);
console.log(counter1());  // 1
console.log(counter2());  // 100
console.log(counter1());  // 2
console.log(counter2());  // 101

function fibonacci() {
    let a = 1, b = 1;
    function next() {
        const c = a;
        [a, b] = [b, a + b];
        return c;
    }
    return next;  // クロージャを返す
}

const fib = fibonacci();
console.log(fib());  // 1
console.log(fib());  // 1
console.log(fib());  // 2
console.log(fib());  // 3
console.log(fib());  // 5
console.log(fib());  // 8

Yusuke

早速コードを実行してみました。私が書いたサンプルコードよりもわかりやすくて、助かりました！