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