Scribd
Upload
7 views6 pages

JavaScript Closure and Scope Explained

The document provides explanations and outputs for eight JavaScript concepts related to closures, hoisting, destructuring, the event loop, function binding, object properties, class inheritance, and recursive promises. Key takeaways include the differences between 'var' and 'let', the temporal dead zone of 'let', reference mutations during destructuring, the order of execution in the event loop, context loss in function binding, reference comparison in maps, pitfalls in class inheritance, and the dangers of recursive promises. Each concept is illustrated with code examples and their respective outputs.

Uploaded by

nthumar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views6 pages

JavaScript Closure and Scope Explained

The document provides explanations and outputs for eight JavaScript concepts related to closures, hoisting, destructuring, the event loop, function binding, object properties, class inheritance, and recursive promises. Key takeaways include the differences between 'var' and 'let', the temporal dead zone of 'let', reference mutations during destructuring, the order of execution in the event loop, context loss in function binding, reference comparison in maps, pitfalls in class inheritance, and the dangers of recursive promises. Each concept is illustrated with code examples and their respective outputs.

Uploaded by

nthumar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

✅ Answers & Explanations to All 8 Questions

🧠 1. Closure Puzzle with var and let


const funcs = [];

for (var i = 0; i < 3; i++) {


[Link](() => [Link](i)); // closure over `i`
}

for (let i = 0; i < 3; i++) {


[Link](() => [Link](i)); // block scoped `i`
}

[Link](fn => fn());

✅ Output:
3
3
3
0
1
2

💡 Why:
●​ var is function scoped, so all 3 closures share the same i, which becomes 3 after the
loop.​

●​ let is block scoped, so each iteration gets its own i — captured correctly as 0, 1, 2.​
🔥 2. Temporal Dead Zone with Hoisting
function test() {
[Link](a); // ❌ ReferenceError
let a = 10;
}
test();

✅ Output:
pgsql

ReferenceError: Cannot access 'a' before initialization

💡 Why:
●​ let is hoisted but exists in a temporal dead zone (TDZ).​

●​ Accessing a before initialization throws a ReferenceError — not undefined like var.​

🕳️ 3. Deep Destructuring & Reference Mutation


const user = { info: { name: "Alice", age: 25 } };
const { info } = user;

[Link] = 30;
[Link]([Link]); // ?

✅ Output:
30

💡 Why:
●​ Destructuring { info } copies the reference — not a deep clone.​

●​ So [Link] = 30 mutates the same info object inside user.​

⏳ 4. Event Loop Madness


[Link]('A');

setTimeout(() => [Link]('B'), 0);

[Link]().then(() => [Link]('C'));

[Link]('D');

✅ Output:
css

A
D
C
B

💡 Why:
●​ 'A' and 'D' are synchronous, logged immediately.​

●​ [Link](...) is a microtask, runs after sync but before macrotasks.​

●​ setTimeout(..., 0) is a macrotask, runs after microtasks.​

🧪 5. Function Binding and Context Loss


const obj = {
value: 42,
getValue: function() {
return [Link];
}
};

const fn = [Link];
[Link](fn()); // ?

✅ Output:
vbnet

undefined (or error in strict mode)

💡 Why:
●​ fn is called without a context — this becomes window (or undefined in strict mode).​

●​ To fix:​

const fn = [Link](obj);

⚙️ 6. Object Property Gotcha


const a = { name: "test" };
const b = { name: "test" };

const map = new Map();


[Link](a, 123);
[Link](b, 456);

[Link]([Link]({ name: "test" }));


✅ Output:
javascript

undefined

💡 Why:
●​ { name: "test" } is a new object. Map keys are compared by reference, not by
value.​

●​ So the final .get() doesn’t match any key.​

💥 7. Class Inheritance: Overriding Pitfall


class Parent {
constructor() {
[Link] = () => [Link]('Parent');
}
}

class Child extends Parent {


constructor() {
super();
[Link] = () => [Link]('Child');
}
}

const p = new Parent();


const c = new Child();

[Link](); // ?
[Link](); // ?
✅ Output:
nginx

Parent
Child

💡 Why:
●​ Each say is a new arrow function on the instance.​

●​ If say was defined on the prototype instead, it could be overridden without reassigning
in constructor.​

🧩 8. Recursive Promise Trap


const fn = () => [Link]().then(() => fn());

fn();

✅ Output:
arduino

Infinite loop of microtasks, eventually causes stack overflow or


memory exhaustion.

💡 Why:
●​ This is a recursive chain of promises — no base case = infinite recursion via
microtasks.​

●​ Even though it’s async, it never breaks the loop, and will blow up memory.​

●​ ⚠️ Dangerous pattern! Always add a stopping condition.​

You might also like