javascriptでクロージャがセットされている変数名を表示させたい場合

Question

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

よくあるjavascriptのクロージャのサンプルを見ていてふと頭に浮かんだことで、調べ方がわからないので質問させていただきます。
上記サンプル実行で
1
2
1
2
と表示されるんですが、これをグローバルスコープで実行した変数名も表示したい場合、つまり上記サンプルだと、
myCounter--1
myCounter--2
newCounter--1
newCounter--2
のように表示したい場合、どんなコードを書いたらよいでしょうか。

Comments

[Lhankor_Mhy]

補足願います。
たとえば、myCounterを別の変数に代入した場合、

const myCounter = createCounter();
const myCounterReferance = myCounter;
console.log(myCounter()); // => myCounter--1
console.log(myCounterReferance()); // => myCounterReference--2
console.log(myCounterReferance()); // => myCounterReference--3
console.log(myCounter()); // => myCounter--4

こうなることを期待していますか？

[moriman]

追記・修正依頼をいただきましてありがとうございます。
質問投稿時は提示頂いたような、また別の変数に代入するコードは頭にありませんでしたが、
まあ学習としてやっているので、提示して頂いたケースについても考えてみたいと思います。

[Lhankor_Mhy]

「実行した変数名」とは具体的には一体何を指すのか、ということをお聞きしたかったのですが、jun68yktさんのご回答で解決しそうなら、それでいいかと思います。

[moriman]

質問文中の「実行した変数名」はmyCounterやnew Counterのことでした。と言ってもconstで宣言しているので定数ですね。失礼しました。

Answer 1

こんにちは

以下のように、 createCounter に引数を追加して文字列を渡せばよいかと思います。

function createCounter(name) {
    let count = 0;
    
    function increment() {
        count = count + 1;
        return `${name}--${count}`;
    }
    return increment;
}

const myCounter = createCounter('myCounter');
console.log(myCounter()); // => myCounter--1
console.log(myCounter()); // => myCounter--2

const newCounter = createCounter('newCounter');
console.log(newCounter()); // => newCounter--1
console.log(newCounter()); // => newCounter--2

• 動作確認用jsFiddle: https://jsfiddle.net/jun68ykt/c9Laxszu/4/

参考になれば幸いです。

Comments

[moriman]

こんにちは。回答をいただきましてありがとうございます。
期待通り動きました。
確認なんですが。ぱっと見、仮引数のnameが、createCounter実行終了時に消えてしまうような気がしたのですが、
count変数と同様、仮引数name変数もクロージャであるincrement関数内から参照されている。
↓
そのincrement関数がグローバルスコープでmyCounter変数やnewCounter変数から参照されている。
なので、createCounter関数が実行終了してもname変数と、それに渡された「myCounter」「newCounter」文字列も消えずに保持されている。
なので、myCounterを複数回実行した場合「myCounter」という文字列もその都度表示される。
ということですよね。

[jun68ykt]

はい。そのご理解で合っています。createCounter　が　increment　を返して終了した後も、そのincrement からは name を参照できて、その name は、そのincrementが作成されたときに name に渡された値（への参照）を保持しています。後から呼ばれた、createCounter('newCounter');　によって、既存のクロージャー increment から参照する name がすべて同じ 'newCounter' という値に上書きされてしまう、ということにもなく、それぞれ個別の文字列への参照を、クロージャー increment からは同じ name という名前で持ちます。

[moriman]

理解できました。ありがとうございました。