こう 聞かれます
- 「クロージャとは
何ですか。 どんな ときに 使いますか」 - 「関数を
返す関数を 書いた ことは ありますか」 - 「外側の
関数が 終わった あとも、 中の 変数を 使えるのは なぜですか」
面接官が 見ている点
- 言葉の
定義だけでなく、 短い コードで 動きを示せるか - 「変数を
外から 触れないように 閉じ込める」という 使い道を言えるか - ループと var の
組み合わせで 起きる 不具合を、 クロージャの 見方で 説明できるか
短い答え
- クロージャは、
関数が 作られた 場所の 外側の 変数を、 覚えたまま 使い続けられる 仕組みです。 - 外側の
関数が 終わっても、 返された 関数から 変数を 読み 書きできるので、 外から 直接触れない 状態を 持てます。 - 数を
数える 関数や、 設定を 覚えた 関数を 作る とき、 イベントで 呼ばれる 関数が 外の 値を 使う ときに 働いています。
少し 詳しい答え
数を 数える関数
makeCounter がcount をcount は
JavaScript
function makeCounter() {
let count = 0;
return () => {
count += 1;
return count;
};
}
const a = makeCounter();
const b = makeCounter();
console.log(a());
console.log(a());
console.log(b());1
2
1count は
ループと let
あとでi を
JavaScript
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log("var", i);
});
}var 3
var 3
var 3let なら
JavaScript
for (let j = 0; j < 3; j++) {
setTimeout(() => {
console.log("let", j);
});
}let 0
let 1
let 2作った
よく ある間違い
- 「関数の
中に 関数を 書く こと」とだけ言う 要点は、 外側の 変数を 覚えたまま、 外側の 関数が 終わった あとも 使えることです - 値を
写して 覚えていると思う 覚えているのは 変数その ものです。 あとで 変数が 変われば、 関数から 見える 値も 変わります - 定義だけ話して
コードで示さない 数を 数える 例のような 5 行ほどの コードを 示すと、 分かっている ことが 伝わります
深掘りの問い
- 「クロージャで
気を つけることは」 関数が 残っている 限り、 覚えている 変数も 消えません。 大きな データを 覚えたまま 関数を 残すと、 メモリを 使い続ける、と答えます - 「React の useState と
クロージャは 関係 ありますか」 イベントの 関数は、 作られた ときの state の 値を 覚えています。 古い値を 見てしまう ときは、 前の 値を 受け取る 形で 更新する、と答えます - 「クラスの
プライベートな フィールドとの違いは」どちらも 外から 触れない 状態を 持てます。 クラスは #を付けた フィールドで、 クロージャは 関数の スコープで 閉じ込める、と答えます