Phase 9 — Advanced JavaScript

Advanced JavaScript explains how JavaScript works internally. These concepts help developers write faster, cleaner, and more efficient applications and are commonly asked in technical interviews.

Execution Context

An Execution Context is the environment where JavaScript code is executed.

There are three types:

• Global Execution Context
• Function Execution Context
• Eval Execution Context (rarely used)

javascriptCopy
1function greet() {
2    console.log("Hello");
3}
4
5greet();

Call Stack

The Call Stack keeps track of function calls.

javascriptCopy
1function one() {
2    two();
3}
4
5function two() {
6    console.log("Two");
7}
8
9one();

Functions are added to the stack when called and removed after execution.

Memory (Heap)

JavaScript stores objects and arrays inside the Heap Memory.

javascriptCopy
1const user = {
2    name: "Ankit"
3};

Primitive values are stored separately from objects.

Garbage Collection

JavaScript automatically removes unused objects from memory using Garbage Collection, helping prevent memory leaks.

Hoisting

Variables and function declarations are moved to the top of their scope before execution.

javascriptCopy
1console.log(a);
2
3var a = 10;

Output

textCopy
1undefined

Scope Chain

JavaScript searches for variables from the current scope outward until it finds them.

javascriptCopy
1const name = "JavaScript";
2
3function show() {
4    console.log(name);
5}
6
7show();

Lexical Scope

A function can access variables from the scope where it was created.

javascriptCopy
1function outer() {
2
3    let message = "Hello";
4
5    function inner() {
6        console.log(message);
7    }
8
9    inner();
10}
11
12outer();

Closures

A Closure remembers variables from its outer function even after that function has finished executing.

javascriptCopy
1function counter() {
2
3    let count = 0;
4
5    return function () {
6        count++;
7        console.log(count);
8    };
9
10}
11
12const increment = counter();
13
14increment();
15increment();

Output

textCopy
11
22

Prototype Chain

JavaScript objects inherit properties and methods through the Prototype Chain.

javascriptCopy
1const person = {
2    greet() {
3        console.log("Hello");
4    }
5};
6
7const user = Object.create(person);
8
9user.greet();

Event Loop

The Event Loop manages asynchronous operations such as timers and promises.

javascriptCopy
1console.log("Start");
2
3setTimeout(() => {
4    console.log("Timer");
5}, 0);
6
7console.log("End");

Output

textCopy
1Start
2End
3Timer

Microtask Queue

Microtasks include Promise callbacks.

javascriptCopy
1Promise.resolve().then(() => {
2    console.log("Microtask");
3});

Microtasks execute before macrotasks.

Macrotask Queue

Macrotasks include:

• setTimeout()
• setInterval()
• setImmediate() (Node.js)

javascriptCopy
1setTimeout(() => {
2    console.log("Macrotask");
3}, 0);

call(), apply(), bind()

These methods change the value of this.

javascriptCopy
1const user = {
2    name: "Ankit"
3};
4
5function greet() {
6    console.log(this.name);
7}
8
9greet.call(user);

Currying

Currying converts a function with multiple arguments into multiple functions with one argument.

javascriptCopy
1const multiply = a => b => a * b;
2
3console.log(multiply(5)(4));

Output

textCopy
120

Memoization

Memoization stores previous results to improve performance.

javascriptCopy
1const cache = {};
2
3function square(num) {
4
5    if (cache[num]) {
6        return cache[num];
7    }
8
9    cache[num] = num * num;
10
11    return cache[num];
12
13}

Debounce

Debounce delays a function until the user stops triggering an event.

Common uses:

• Search boxes
• API requests
• Input validation

Throttle

Throttle limits how often a function executes.

Common uses:

• Scroll events
• Resize events
• Mouse movement

Functional Programming

Functional Programming focuses on writing reusable and predictable code.

Key concepts:

• Pure Functions
• Immutability
• Higher-Order Functions
• Function Composition

Best Practices

• Understand the call stack before learning asynchronous JavaScript.
• Use closures to create private variables.
• Use call(), apply(), and bind() when working with this.
• Use debounce for search inputs and API calls.
• Use throttle for scrolling and resizing events.
• Apply memoization to expensive calculations.
• Prefer pure functions and avoid unnecessary side effects.

Summary

In this tutorial, you learned:

• Execution Context
• Call Stack
• Memory and Heap
• Garbage Collection
• Hoisting
• Scope Chain
• Lexical Scope
• Closures
• Prototype Chain
• Event Loop
• Microtask Queue
• Macrotask Queue
• call(), apply(), and bind()
• Currying
• Memoization
• Debounce
• Throttle
• Functional Programming

These advanced concepts form the foundation for understanding how JavaScript works internally and are essential for building high-performance applications and succeeding in frontend and Node.js interviews.