Deep JavaScript Concepts

Master the runtime mechanics that trip up most developers: hoisting, scope resolution, prototypes, this binding, and module loading.

Hoisting Visualization

See how JavaScript processes your code in two distinct phases.

Creation Phase

Execution Phase

Source Code

 1console.log(a);     // undefined (var hoisted)
 2console.log(b);     // ReferenceError (TDZ)
 3console.log(greet); // function (hoisted)
 4
 5var a = 10;
 6let b = 20;
 7const c = 30;
 8
 9function greet() {
10  return "hello";
11}

After Creation Phase

Variable Environment

function greetƒ greet()

var aundefined

let b<uninitialized>

const c<uninitialized>

Temporal Dead Zone (TDZ)

let and const are hoisted but remain uninitialized. Accessing them before their declaration throws a ReferenceError.

Hoisted (undefined)

Initialized

TDZ

Scope Chain Resolution

Follow the variable lookup path through lexical environments.

Source Code

 1const global = "🌍";
 2
 3function outer() {
 4  const outerVar = "outer";
 5
 6  function middle() {
 7    const middleVar = "middle";
 8
 9    function inner() {
10      const innerVar = "inner";
11      console.log(innerVar);   // ✓ found in inner
12      console.log(middleVar);  // ✓ found in middle
13      console.log(outerVar);   // ✓ found in outer
14      console.log(global);     // ✓ found in global
15      console.log(missing);    // ✗ ReferenceError
16    }
17    inner();
18  }
19  middle();
20}

Scope Chain (innermost → outermost)

inner() Scopefunction

innerVar"inner"

middle() Scopefunction

middleVar"middle"

innerƒ inner()

outer() Scopefunction

outerVar"outer"

middleƒ middle()

Global Scopeglobal

global"🌍"

outerƒ outer()

Try Lookup

Prototype Lookup

See how JavaScript traverses the prototype chain to find properties.

Look up:

dog (instance)🔍 Searching...

name"Rex"

breed"Labrador"

__proto__

Dog.prototype

barkƒ bark()

fetchƒ fetch()

constructorƒ Dog()

__proto__

Animal.prototype

eatƒ eat()

sleepƒ sleep()

constructorƒ Animal()

__proto__

Object.prototype

toStringƒ toString()

hasOwnPropertyƒ hasOwnProperty()

valueOfƒ valueOf()

null

`this` Resolution Engine

Understand how JavaScript determines what `this` refers to.

Binding Priority (highest → lowest)

constructor>

explicit>

implicit>

global

(arrow = lexical, ignores rules)

Code Example

 1// Global context
 2function showThis() {
 3  console.log(this);
 4}
 5
 6showThis(); // Called without object

this =

window (or globalThis)

global binding

Rule

When a function is called without any object reference, `this` defaults to the global object (window in browsers). In strict mode, it would be undefined.

How it works

showThis()

no object

this = window

Module Execution Order

Understand how ES modules are resolved and executed.

Import Graph & Execution Order

main.js

entry point

api.js

exports: fetchData

utils.js

exports: log, format

config.js

exports: DEBUG, BASE_URL

Execution Sequence (depth-first, post-order)

1. config

→

2. utils

→

3. api

→

4. main

Module Details

How it works

1. JS engine builds the full import graph

2. Resolves dependencies depth-first

3. Executes leaf modules first (no dependencies)

4. Works up to the entry point

Circular imports are handled by returning partial exports.

main.jsexports: 0 | imports: 2

api.jsexports: 1 | imports: 2

utils.jsexports: 2 | imports: 1

config.jsexports: 2 | imports: 0

1console.log(a); // undefined (var hoisted)

2console.log(b); // ReferenceError (TDZ)

3console.log(greet); // function (hoisted)

5var a = 10;

6let b = 20;

7const c = 30;

9function greet() {

10 return "hello";

11}

1const global = "🌍";

3function outer() {

4 const outerVar = "outer";

6 function middle() {

7 const middleVar = "middle";

9 function inner() {

10 const innerVar = "inner";

11 console.log(innerVar); // ✓ found in inner

12 console.log(middleVar); // ✓ found in middle

13 console.log(outerVar); // ✓ found in outer

14 console.log(global); // ✓ found in global

15 console.log(missing); // ✗ ReferenceError

16 }

17 inner();

18 }

19 middle();

20}