πŸͺ TechCookies
HomeDSASystem DesignJSMy Progress
Free
Log inStart free
TechCookies β€” Practice Β· Learn Β· PrepareTechCookies β€” Practice Β· Learn Β· Prepare
ConceptsPracticeSD challengesPricingPrivacyTermsContact
Β© 2026 TechCookies
JSβ€ΊFunctions & Scope
πŸ”§Functions & ScopebeginnerFreeJS
functionscopehoistinglexical scopeIIFE
Learn
0/7 done~57 min
1
The 11 scope exceptions
Exceptions
~14 min
πŸ”’
Predict the output
Predict
Complete previous first
πŸ”’
True or false?
T/F
Complete previous first
πŸ”’
Fill in the blanks
Fill
Complete previous first
πŸ”’
Fix the bugs
Fix Bug
Complete previous first
πŸ”’
Spot the bug
Spot Bug
Complete previous first
πŸ”’
Put it together
Cement
Complete previous first
1 / 7Exceptions~14 min
The 11 scope exceptions
Open each one. Mark what you know β€” flag what you don't.
11 of 11 seen
EX-001var leaks out of blocks
Why

var's scope boundary is the nearest function, not the nearest block. Block braces {} don't create a new var scope.

Code
if (true) { var x = 1; }
console.log(x)  // 1 β€” var escaped the block
Remember

Block braces {} are invisible to var.

EX-002var b = a = 5 creates an accidental global a
πŸ’€ Extreme
Why

Parsed as var b = (a = 5). a = 5 assigns to an undeclared variable, creating an implicit global. Only b is actually declared.

Code
function f() { var b = a = 5; }
f();
typeof a  // 'number' β€” a leaked to global scope!
typeof b  // 'undefined' β€” b is local
Remember

Chained assignment only declares the leftmost variable.

EX-003const binding is const; object contents are mutable
Why

const locks the reference (the pointer), not the object the pointer points to. The object's properties can still be changed freely.

Code
const o = { x: 1 };
o.x = 2;   // works β€” mutating the object
o = {};    // TypeError β€” reassigning the binding
Remember

const locks the arrow, not what it points to.

EX-004TDZ shadow: inner let shadows outer from the first line of the block
⚠ Trap
Why

let/const are hoisted to the top of their block and immediately enter the TDZ. They shadow any outer variable of the same name for the ENTIRE block β€” including lines before the declaration.

Code
let x = 'outer';
{
  console.log(x);  // ReferenceError β€” inner x is in TDZ
  let x = 'inner';
}
Remember

Inner let shadows outer from very first line of the block.

EX-005var + loop + closure: all callbacks share one variable
⚠ Trap
Why

var creates one binding in the enclosing function scope. All closures capture the same i. By the time setTimeout fires, the loop has finished and i = 3.

Code
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Logs: 3 3 3 β€” not 0 1 2
// Fix: replace var with let (creates a new binding per iteration)
Remember

var + closure + loop = classic bug. Fix: let.

EX-006let at top level is NOT a property of window
πŸ”₯ Missed
Why

var declarations at the top level attach to the global object (window). let/const are stored in a separate Declarative Environment Record that has no connection to window.

Code
var a = 1;
window.a   // 1 β€” var is on the global object

let b = 2;
window.b   // undefined β€” let is NOT on window
Remember

var owns a desk in the global office. let rents a separate room.

EX-007for(const item of arr) valid; for(const i = 0; i++) throws
πŸ”₯ Missed
Why

for...of creates a fresh binding per iteration β€” const gets a new slot each time. Traditional for reuses the same binding and i++ would attempt a reassignment, which throws for const.

Code
for (const x of [1, 2, 3]) { }   // ok β€” fresh binding each iteration

for (const i = 0; i < 3; i++) { } // TypeError β€” i++ reassigns a const
Remember

for...of: fresh const per iteration. Traditional for: reassigns.

EX-008catch(e) block-scopes e; redeclaring inside throws
πŸ”₯ Missed
Why

The catch parameter is treated as a binding scoped to the catch block. Declaring let e inside the same block is a duplicate declaration and a SyntaxError.

Code
try {
  throw 1;
} catch (e) {
  let e = 2;  // SyntaxError β€” e already declared by catch
}
Remember

catch(e) declares e. No redeclaring inside the catch block.

EX-009Module-level var/let/const do NOT attach to globalThis in ESM
πŸ”₯ Missed
Why

ESM creates its own module scope β€” a Declarative Environment Record separate from the global object. Top-level declarations are module-private even when using var.

Code
// In an ES module (.mjs or <script type="module">):
var x = 1;
console.log(globalThis.x);  // undefined β€” not on global object
Remember

ESM: ALL top-level vars stay in module scope. None attach to globalThis.

EX-010Function declarations inside blocks are block-scoped in strict mode; hoisted in sloppy
πŸ’€ Extreme
Why

In sloppy mode, function declarations in blocks are hoisted to the enclosing function scope (legacy behaviour). In strict mode (or ESM), they are block-scoped. Avoid both β€” use const fn = () => {} for block-local functions.

Code
// sloppy mode:
{ function f() { return 1; } }
console.log(f());  // 1 β€” leaked to enclosing scope

// strict mode:
'use strict';
{ function g() { return 1; } }
console.log(typeof g);  // 'undefined' β€” block-scoped
Remember

Function in block: strict=block-scoped, sloppy=hoisted. Always use const fn = () => {} instead.

EX-011eval() in sloppy mode injects var declarations into the calling scope
πŸ’€ Extreme
Why

eval() runs code in the current scope. New var declarations escape into the surrounding function (or global). In strict mode, eval() is sandboxed β€” new vars stay inside.

Code
function f() {
  eval('var x = 1');
  console.log(x);  // 1 β€” x created in f's scope!
}
// strict mode:
'use strict';
function g() {
  eval('var x = 1');
  console.log(typeof x);  // 'undefined' β€” x sandboxed inside eval
}
Remember

eval sloppy = scope injection. eval strict = sandboxed. Avoid eval entirely.

Open each exception to continue
Notes
πŸ”
Loading…
Sections
0/7 done~57 min
1
The 11 scope exceptions
Exceptions
~14 min
πŸ”’
Predict the output
Predict
Complete previous first
πŸ”’
True or false?
T/F
Complete previous first
πŸ”’
Fill in the blanks
Fill
Complete previous first
πŸ”’
Fix the bugs
Fix Bug
Complete previous first
πŸ”’
Spot the bug
Spot Bug
Complete previous first
πŸ”’
Put it together
Cement
Complete previous first
Notes
Notes
πŸ”
Loading…