クロージャーのサンプルコードの改善案

[munierujp]

URL : https://github.com/asciidwango/js-primer/blob/master/source/basic/function-scope/README.md

// `increment`関数を定義し返す関数
function createCounter() {
    let count = 0;
    // `increment`関数は`count`変数を参照
    function increment() {
        count = count + 1;
        return count;
    }
    return increment;
}
// `myCounter`は`createCounter`が返した関数を参照
const myCounter = createCounter();
myCounter(); // => 1
myCounter(); // => 2
// 新しく`newCounter`を定義する
const newCounter = createCounter();
newCounter(); // => 1
newCounter(); // => 2
// `myCounter`と`newCounter`は別々の状態持っている
myCounter(); // => 3
newCounter(); // => 3

現在のサンプルコードは上記のように最後の2行が同じ値になるようになっていますが、違う値になるようにしたほうが別々の状態を持っていることがわかりやすいと思います。 たとえば、newCounterのほうの呼び出しを1回減らして、3と2にするなどです。

// `increment`関数を定義し返す関数
function createCounter() {
    let count = 0;
    // `increment`関数は`count`変数を参照
    function increment() {
        count = count + 1;
        return count;
    }
    return increment;
}
// `myCounter`は`createCounter`が返した関数を参照
const myCounter = createCounter();
myCounter(); // => 1
myCounter(); // => 2
// 新しく`newCounter`を定義する
const newCounter = createCounter();
newCounter(); // => 1
// `myCounter`と`newCounter`は別々の状態持っている
myCounter(); // => 3
newCounter(); // => 2

[bubbleinwater]

それぞれにconsole.logも付け足すのは良いことではないですか？ ウェブサイトの元のコードで実行のボタンを押すと3が一つだけ出力されるんですけど、なぜ呼び出しただけで3が出てくるのかわからなくてここに辿り着きました。

[yumetodo]

確かにconsole.logの数が足りないのは疑問がありますね。