8. Advanced JavaScript

Advanced JavaScript topics are commonly asked in mid-level frontend interviews.

These concepts help developers understand how JavaScript works internally.

Many React and frontend interview questions are based on these topics.

---

Topics Covered

• Prototype
• Prototype Chain
• Currying
• Memoization
• Polyfills
• call()
• apply()
• bind()
• Deep Copy
• Execution Context
• Garbage Collection

---

1. Prototype (VERY IMPORTANT)

Every JavaScript object has a hidden property called prototype.

Prototype allows objects to share methods and properties.

---

Example

function User(name) {
  this.name = name;
}

User.prototype.sayHi = function () {
  console.log("Hi");
};

const user1 = new User("Dipak");

user1.sayHi();

---

Output

Hi;

---

Why Prototype is Important

Without prototype:

• Every object gets separate copy of function
• More memory usage

With prototype:

• Functions are shared
• Better memory optimization

---

Prototype Relationship

Object → Prototype → Prototype → null

---

2. Prototype Chain

If JavaScript cannot find a property in object, it searches inside prototype.

This searching process is called prototype chain.

---

Example

const arr = [1, 2, 3];

console.log(arr.toString());

toString() is not directly inside array.

JavaScript finds it through prototype chain.

---

How Prototype Chain Works

arr
  ↓
Array.prototype
  ↓
Object.prototype
  ↓
null

---

Important Point

JavaScript keeps searching upward until:

• Property found OR
• null reached

---

3. Currying (VERY IMPORTANT)

Currying converts function with multiple arguments into sequence of functions with one argument each.

---

Normal Function

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));

---

Curried Function

function add(a) {
  return function (b) {
    return a + b;
  };
}

console.log(add(2)(3));

---

Output

5;

---

Why Currying is Useful

• Function reusability
• Partial application
• Functional programming

---

Real Example

function multiply(a) {
  return function (b) {
    return a * b;
  };
}

const double = multiply(2);

console.log(double(5));

---

Output

10;

---

4. Memoization

Memoization stores previous results to avoid repeated calculations.

Improves performance.

---

Example

function memoizedAdd() {
  let cache = {};

  return function (num) {
    if (cache[num]) {
      console.log("From cache");

      return cache[num];
    }

    console.log("Calculated");

    cache[num] = num + 10;

    return cache[num];
  };
}

const add = memoizedAdd();

console.log(add(5));
console.log(add(5));

---

Output

Calculated
15

From cache
15

---

Why Memoization is Important

• Faster performance
• Avoids repeated calculations
• Used in React optimization

---

5. Polyfills

Polyfill is custom implementation of modern JavaScript feature.

Used when browser does not support feature.

---

Example — Custom map() Polyfill

Array.prototype.myMap = function (callback) {
  const result = [];

  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }

  return result;
};

const nums = [1, 2, 3];

const output = nums.myMap((num) => num * 2);

console.log(output);

---

Output

[2, 4, 6];

---

Why Polyfills are Asked in Interviews

Interviewers check:

• JavaScript fundamentals
• Internal understanding
• Array method knowledge

---

6. call(), apply(), bind() (VERY IMPORTANT)

Used to control value of this.

---

call()

Calls function immediately.

Arguments passed separately.

---

Example

const user = {
  name: "Dipak",
};

function greet(city) {
  console.log(this.name, city);
}

greet.call(user, "Kolkata");

---

Output

Dipak Kolkata

---

apply()

Similar to call() but arguments passed as array.

---

Example

greet.apply(user, ["Kolkata"]);

---

bind()

Returns new function.

Does NOT execute immediately.

---

Example

const newFn = greet.bind(user, "Kolkata");

newFn();

---

Difference Between call, apply, and bind

Method	Executes Immediately	Arguments Format
call()	Yes	Separate values
apply()	Yes	Array
bind()	No	Separate values

---

Real Use Case of bind

Useful in:

• React class components
• Event handlers
• Maintaining correct this

---

7. Deep Copy

Deep copy creates completely independent object copy.

Nested objects are also copied separately.

---

Problem with Shallow Copy

const user = {
  name: "Dipak",
  address: {
    city: "Kolkata",
  },
};

const copy = { ...user };

copy.address.city = "Delhi";

console.log(user.address.city);

---

Output

Delhi;

Original object changed.

---

Deep Copy Example

const deepCopy = structuredClone(user);

deepCopy.address.city = "Delhi";

console.log(user.address.city);

---

Output

Kolkata;

---

Deep Copy Methods

Method	Notes
structuredClone()	Modern and recommended
JSON methods	Limited support for types

---

JSON Deep Copy

const copy = JSON.parse(JSON.stringify(user));

---

Limitation

Does not copy:

• Functions
• undefined
• Dates properly

---

8. Execution Context (VERY IMPORTANT)

Execution context is environment where JavaScript code runs.

---

Types of Execution Context

Type	Description
Global Context	Default execution area
Function Context	Created for functions
Eval Context	Created by eval()

---

Global Execution Context

Created when program starts.

Contains:

• Global object
• this
• Variables/functions

---

Function Execution Context

Created whenever function runs.

---

Example

function greet() {
  let name = "Dipak";

  console.log(name);
}

greet();

Function gets separate execution context.

---

Execution Context Phases

---

1. Memory Creation Phase

Memory allocated for:

• Variables
• Functions

---

2. Execution Phase

Code executes line by line.

---

Example

console.log(a);

var a = 10;

---

Memory Phase

a = undefined

---

Execution Phase

a = 10

---

Relation with Hoisting

Hoisting happens because of memory creation phase.

---

9. Garbage Collection

JavaScript automatically removes unused memory.

This process is called garbage collection.

---

Example

let user = {
  name: "Dipak",
};

user = null;

Object becomes unreachable.

Garbage collector removes it from memory.

---

Why Garbage Collection is Important

• Prevents memory leaks
• Improves performance
• Automatic memory management

---

Common Cause of Memory Leaks

• Unused event listeners
• Global variables
• Timers not cleared
• Closures holding references

---

Important Interview Questions

---

Q1. Difference Between call, apply, and bind

Method	Executes Immediately	Arguments
call()	Yes	Separate
apply()	Yes	Array
bind()	No	Separate

---

Q2. What is Currying?

Currying converts function with multiple arguments into nested single-argument functions.

function add(a) {
  return function (b) {
    return a + b;
  };
}

add(2)(3);

---

Q3. What is Prototype?

Prototype allows objects to share methods and properties.

---

Q4. What is Memoization?

Caching previous results for performance optimization.

---

Q5. What is Execution Context?

Environment where JavaScript code executes.

Contains:

• Variables
• Functions
• this

---

Most Asked Advanced Topics

Focus heavily on:

• call, apply, bind
• Prototype chain
• Currying
• Execution context
• Memoization
• Deep copy

---

Best Practices

• Use prototype for shared methods
• Use memoization for expensive calculations
• Prefer structuredClone() for deep copy
• Understand this deeply
• Avoid memory leaks
• Practice output-based questions regularly