👩🏻‍💻

JavaScript
Syllabus

📘Types
PART 1: JavaScript Variables, Data
& Type Coercion
(VERY HIGH interview weight)

1️⃣ What is JavaScript doing internally?

JavaScript is:

Interpreted

Single-threaded

Dynamically typed

Memory-managed (GC)

JS code execution has 2 phases:

1. Memory Creation Phase

2. Execution Phase

Variables behave differently based on how they are declared.

2️⃣ Variables in JavaScript ( var , let , const )

🔹 var
Function scoped

Hoisted & initialized as undefined

Can be re-declared & updated

JavaScript 1
 [Link](a);// undefined
var a =10;
[Link](a);// 10

📌 Problem with var :

No block scope → bugs in loops

🔹 let
Block scoped

Hoisted but not initialized

Lives in Temporal Dead Zone (TDZ)

[Link](b);// ❌ ReferenceError
let b =20;

🔹 const
Block scoped

Must be initialized

Cannot be reassigned (but objects CAN be mutated)

const x =10;
x =20;// ❌
Error

const obj = {a:1 };

obj.a =2;// ✅allowed

🔥 Interview Comparison
Feature var let const

Scope Function Block Block

JavaScript 2
 Feature var let const

Hoisted Yes (undefined) Yes (TDZ) Yes (TDZ)

Reassign Yes Yes ❌

Redeclare Yes ❌ ❌
3️⃣ Data Types in JavaScript
🔹 Primitive Types (Stored by value)
string

number

boolean

null

undefined

symbol

bigint

let a =10;
let b = a;
b =20;
[Link](a);// 10

🔹 Non-Primitive (Reference types)

Object

Array

Function

let obj1 = {x:10 };

let obj2 = obj1;
obj2.x =20;

JavaScript 3
 [Link](obj1.x);// 20

📌 Stored in heap, reference in stack.

4️⃣ typeof quirks (INTERVIEW FAVORITE)

typeof10// "number"
typeof"hi"// "string"
typeoftrue// "boolean"
typeofundefined// "undefined"
typeofnull// ❗"object" (BUG in JS)
typeof {}// "object"
typeof []// "object"
typeoffunction(){}// "function"

🔥 Why is typeof null object?

→ Legacy JS bug (kept for backward compatibility).

5️⃣ null vs undefined

Feature null undefined

Meaning Intentional empty Not assigned

Type object (bug) undefined

Assigned by Developer JS engine

let a;
[Link](a);// undefined

let b =null;

6️⃣ Type Conversion vs Type Coercion

JavaScript 4
 🔹 Type Conversion (Explicit)
You convert manually.

Number("10")// 10
String(10)// "10"
Boolean(0)// false

🔹 Type Coercion (Implicit) 🔥

JS converts automatically.

"5" +2// "52"

"5" -2// 3
"5" *2// 10
true +1// 2
false +1// 1

📌 prefers string concatenation

+

📌 Other operators force number conversion

7️⃣ == vs === (TOP INTERVIEW Q)

== (Loose equality)
Allows type coercion

"5" ==5// true

null ==undefined// true

=== (Strict equality)

No type conversion

"5" ===5// false

null ===undefined// false

JavaScript 5
 📌 Always use === in real projects

8️⃣ Truthy & Falsy Values

❌ Falsy values (only these 7)
false
0
-0
0n
""
null
undefined
NaN

Everything else → truthy

if (" ")[Link]("true");// runs

if ([])[Link]("true");// runs

9️⃣ Output-Based Interview Questions

Q1

[Link](typeoftypeof10);

✅ Output: "string"

Q2

[Link](null ==undefined);
[Link](null ===undefined);

JavaScript 6
 ✅ true
✅ false
Q3

let a =10;
let b ="10";

[Link](a + b);
[Link](a - b);

✅ "1010"
✅0
Q4

[Link]([] + []);
[Link]([] + {});

✅ ""
✅ "[object Object]"
1️⃣0️⃣ Common Interview Questions (With Short
Answers)
1. Why let is better than var ?
→ Block scope + avoids bugs + TDZ

2. What is TDZ?
→ Time between hoisting & initialization where access is illegal

3. Is JS statically typed?
→ No, dynamically typed

JavaScript 7
 4. Why const object can change?

→ Reference is constant, not the value

5. Difference between primitive & reference types?

→ Value copy vs reference copy

🧪 Mini Practice (Solve Now)

1. Predict output:

[Link](1 +"2" +3);

[Link](1 + +"2" +3);

1. Fix the bug:

if (value ==null) {
// handle empty
}

✅ What You’ve Gained

✔ Deep understanding
✔ Interview traps covered
✔ Strong base for next topics
👉 NEXT PART?
PART 2: Functions, Scope, Hoisting & Execution Context ( 🔥 CORE JS)
Just reply Next
(We’ll keep building this into a full JS interview weapon 💪)
Next

Excellent.
This is where real JavaScript interviews are decided 🔥

JavaScript 8
 📘Execution
PART 2: Functions, Scope, Hoisting &
Context
(Most important core JS topic)
If you understand this part well, 50–60% JS interview questions become
easy.

1️⃣ Functions in JavaScript (Deep)

🔹 Function Declaration
functionadd(a, b) {
return a + b;
}

Fully hoisted

Can be called before definition

🔹 Function Expression
const add =function(a, b) {
return a + b;
};

Not hoisted like declaration

Treated as a variable

🔹 Arrow Function
constadd = (a, b) => a + b;

Short syntax

JavaScript 9
 No own this

No arguments

Cannot be used as constructor

🔥 Interview Question
❓ Difference between arrow function and normal function?
Feature Normal Arrow
this Dynamic Lexical
arguments Yes No

Hoisting Yes (decl) No

Constructor Yes No

2️⃣ Parameters vs Arguments

functionsum(a, b) {// parameters
return a + b;
}
sum(2,3);// arguments

Default Parameters

functiongreet(name = "Guest") {
[Link](name);
}
greet();// Guest

3️⃣ Scope in JavaScript

🔹 Types of Scope
1. Global Scope

JavaScript 10
 2. Function Scope

3. Block Scope

{
let x =10;
}
// x ❌ not accessible

🔹 Scope Chain
JS looks for variables:

1. Current scope

2. Parent scope

3. Global scope

let x =10;
functionouter() {
let y =20;
functioninner() {
[Link](x, y);
}
inner();
}
outer();

4️⃣ Hoisting (INTERVIEW FAVORITE)

🔹 Variable Hoisting
[Link](a);// undefined
var a =10;

JavaScript 11
 But:

[Link](b);// ❌ ReferenceError
let b =20;

🔹 Function Hoisting
hello();// works
functionhello() {
[Link]("Hello");
}

But:

hi();// ❌ TypeError
const hi =function() {
[Link]("Hi");
};

5️⃣ Execution Context (🔥 CORE CONCEPT)

What is Execution Context?
Environment where JS code is executed.

Types:
1. Global Execution Context (GEC)

2. Function Execution Context (FEC)

🔹 Phases of Execution Context

1️⃣ Memory Creation Phase
Variables → undefined

JavaScript 12
 Functions → full definition

this → global object

2️⃣ Execution Phase

Code executed line by line

Values assigned

🔥 Example Walkthrough
var x =10;
functionfoo() {
var y =20;
[Link](x);
}
foo();

Memory phase:

x → undefined

foo → function

Execution:

x = 10

foo() called → new FEC created

6️⃣ Call Stack (VERY IMPORTANT)

Call Stack = Tracks execution contexts.

functiona() {
b();
}
functionb() {
c();
}
functionc() {

JavaScript 13
 [Link]("Hello");
}
a();

Stack:

c()
b()
a()
Global

7️⃣ IIFE (Immediately Invoked Function Expression)

(function() {
[Link]("IIFE");
})();

📌 Used to:
Avoid global pollution

Create private scope

8️⃣ arguments Object

functiontest() {
[Link](arguments);
}
test(1,2,3);

❌ Not available in arrow functions.

9️⃣ Output-Based Interview Questions
JavaScript 14
 Q1

[Link](a);
var a =10;

✅ undefined
Q2

foo();
functionfoo() {
[Link]("Hi");
}

✅ Hi
Q3

foo();
var foo =function() {
[Link]("Hello");
};

❌ TypeError
Q4

functionx() {
[Link](a);
}
var a =10;
x();

✅ 10
JavaScript 15
 🔥 10️⃣ Common Interview Questions
1. What is execution context?
→ Environment where JS code runs

2. What is call stack?

→ Stack that manages function calls

3. Why arrow functions don’t have this ?

→ They capture this from lexical scope

4. What is scope chain?

→ Variable resolution mechanism

5. Why let/const are not hoisted like var?

→ They are in TDZ

🧪 Practice (Solve Before Next)

1️⃣ Predict output:
var x =1;
functiontest() {
[Link](x);
var x =2;
}
test();

2️⃣ Fix the bug:

for (var i =0; i <3; i++) {
setTimeout(() =>[Link](i),1000);
}

✅ You’re Now Strong In:

JavaScript 16
 ✔ Functions
✔ Scope & Hoisting
✔ Execution Context
✔ Call Stack
👉 NEXT PART?
🔥 MOST POWERFUL JS CONCEPT)
PART 3: Closures (
Reply Next and we continue 🚀

🔥 Perfect.
This is THE concept that separates average JS devs from strong interview
candidates.

📘Mastery)
PART 3: Closures (In-Depth + Interview

If you understand closures properly, JS suddenly starts making sense.

1️⃣ What is a Closure? (Simple → Deep)

🔹 Definition (Interview-ready)
A closure is a function that remembers variables from its lexical scope even
after the outer function has finished execution.

🔹 Basic Example
functionouter() {
let count =0;

functioninner() {
count++;
[Link](count);
}

JavaScript 17
 return inner;
}

const fn =outer();
fn();// 1
fn();// 2

📌 still remembers
inner() count

📌 is already removed from call stack

outer()

📌 This memory retention = closure

2️⃣ How Closures Work Internally
When JS executes:

Function is created

Lexical environment is created

Inner function keeps a reference to outer variables

❗ JS does NOT copy values — it keeps references

3️⃣ Lexical Scope vs Closure
🔹 Lexical Scope
functionouter() {
let x =10;
functioninner() {
[Link](x);
}
inner();
}

🔹 Closure
JavaScript 18
 functionouter() {
let x =10;
returnfunctioninner() {
[Link](x);
};
}

📌 Closure happens only when function is returned or passed

4️⃣ Closure with Parameters
functionmultiplier(factor) {
returnfunction(num) {
return num * factor;
};
}

const double =multiplier(2);

[Link](double(5));// 10

5️⃣TRAP)
Closures in Loops (VERY COMMON INTERVIEW

❌ Problem with var

for (var i =0; i <3; i++) {

setTimeout(() =>[Link](i),1000);
}

Output:

3
3

JavaScript 19
 3

🔥 Why?
var is function scoped

All callbacks share same i

✅ Fix 1: Use let

for (let i =0; i <3; i++) {

setTimeout(() =>[Link](i),1000);
}

✅ Fix 2: IIFE
for (var i =0; i <3; i++) {
(function(i) {
setTimeout(() =>[Link](i),1000);
})(i);
}

6️⃣ Real-World Use Cases of Closures

1️⃣ Data Privacy
functioncounter() {
let count =0;
return {
inc() { count++; },
get() {return count; }
};

JavaScript 20
 }

2️⃣ Once Function

functiononce(fn) {
let called =false;
returnfunction() {
if (!called) {
called =true;
fn();
}
};
}

3️⃣ Memoization
functionmemoize(fn) {
const cache = {};
returnfunction(x) {
if (cache[x])return cache[x];
cache[x] =fn(x);
return cache[x];
};
}

7️⃣ Closures & Garbage Collection

Closures:

Keep variables alive

Can cause memory leaks if misused

JavaScript 21
 functionleak() {
let bigData =newArray(1000000);
returnfunction() {
[Link]("Leaking memory");
};
}

📌 Variables are GC’ed only when no reference exists

8️⃣ Output-Based Interview Questions
Q1

functionx() {
let a =10;
returnfunctiony() {
[Link](a);
};
}
let z =x();
z();

✅ 10
Q2

let count =0;

(function() {
let count =1;
[Link](count);
})();
[Link](count);

✅1
JavaScript 22
 ✅0
Q3

functiontest() {
var x =10;
returnfunction() {
[Link](x++);
};
}
const fn =test();
fn();
fn();

✅ 10
✅ 11
🔥 9️⃣ Interview Questions (With Crisp Answers)
1. What is a closure?
→ Function + lexical scope

2. Why are closures useful?

→ Data hiding, state retention, callbacks

3. Do closures increase memory usage?

→ Yes, variables are retained

4. Can closures cause memory leaks?

→ Yes, if references aren’t released

5. Are closures created for every function?

→ Only when inner function accesses outer variables

🧪 Practice (Must Do)

1️⃣ Predict output:
JavaScript 23
 functionouter() {
let a =5;
returnfunctioninner(b) {
[Link](a + b);
};
}
outer()(10);

2️⃣ Create:
A private counter

A function that runs only once

A memoized factorial

✅ You’ve Mastered:
✔ Closures
✔ Lexical scoping
✔ Interview traps
✔ Real-world patterns
👉 NEXT PART?
PART 4: Arrays & Array Methods (map, filter, reduce — interview heavy)
Reply Next and we continue building 🔥
Next
Awesome.
Now we enter daily-use + interview-heavy JavaScript territory 🔥
Most coding rounds are array problems.

📘+ Interview
PART 4: Arrays & Array Methods (Deep
Ready)

JavaScript 24
 1️⃣ What is an Array?
An array is a collection of elements stored in contiguous memory locations,
indexed from 0 .

let arr = [1,2,3,4];

JS arrays are:

Dynamic

Can store mixed data types

Objects under the hood

2️⃣ Creating Arrays

let a = [1,2,3];
let b =newArray(1,2,3);
let c =[Link]("abc");// ['a','b','c']

3️⃣ Basic Array Operations

[Link]
arr[0]
arr[[Link] -1]

4️⃣ Array Methods (CORE)

🔹 push() / pop() (End)

[Link](5);// add
[Link]();// remove

JavaScript 25
 🔹 shift() / unshift() (Start)

[Link]();
[Link](0);

5️⃣ Iteration Methods (INTERVIEW FAVORITE)

🔹 forEach()

[Link]((el, i) =>[Link](el, i));

No return

Cannot break

🔹 map() ⭐
const doubled = [Link](x => x *2);

Returns new array

Does NOT modify original

🔹 filter()

const even = [Link](x => x %2 ===0);

🔹 reduce() ⭐⭐⭐ (MOST IMPORTANT)

const sum = [Link]((acc, curr) => acc + curr,0);

How it works:

JavaScript 26
 acc → accumulator

curr → current value

0 → initial value

6️⃣ Advanced Reduce Examples (INTERVIEW GOLD)

Sum

[1,2,3].reduce((a,b) => a+b,0);

Max

[1,5,2].reduce((a,b) =>[Link](a,b));

Frequency Map

['a','b','a'].reduce((acc, c) => {
acc[c] = (acc[c] ||0) +1;
return acc;
}, {});

7️⃣ Searching & Checking

🔹 find()

[Link](x => x >2);

🔹 findIndex()

JavaScript 27
 [Link](x => x ===3);

🔹 some() / every()

[Link](x => x >3);

[Link](x => x >0);

8️⃣ Slice vs Splice (VERY COMMON Q)

🔹 slice()

[Link](1,3);

Non-mutating

🔹 splice()

[Link](1,2);

Mutates original

9️⃣ Sorting Arrays (TRICKY)

[10,2,5].sort();// ❌ [10,2,5]
Correct:

[10,2,5].sort((a, b) => a - b);

JavaScript 28
 🔥FAVORITE)
10️⃣ Shallow vs Deep Copy (INTERVIEW

❌ Shallow Copy
const copy = arr;

✅ Shallow Copy Methods

const a1 = [...arr];
const a2 = [Link]();

⚠️ Deep Copy (Objects inside array)

[Link]([Link](arr));

11️⃣ Array Destructuring

const [a, b, ...rest] = [1,2,3,4];

1️⃣2️⃣ Output-Based Interview Questions

Q1

[Link]([1,2,3] + [4,5]);

✅ "1,2,34,5"
Q2

JavaScript 29
 const arr = [1,2,3];
[Link] =1;
[Link](arr);

✅ [1]
Q3

[Link]([] == []);

✅ false
🔥 1️⃣3️⃣ Interview Questions (With Answers)
1. map vs forEach?
→ map returns new array

2. filter vs find?
→ filter returns array, find returns element

3. Why reduce is powerful?

→ Can replace map + filter

4. slice vs splice?
→ Non-mutating vs mutating

🧪 Practice Problems (ARRAYS)

1️⃣ Reverse an array
2️⃣ Find max/min
3️⃣ Remove duplicates
4️⃣ Flatten array
5️⃣ Group by property
6️⃣ Polyfill formap

JavaScript 30
 7️⃣ Polyfill for reduce

✅ You’re Now Strong In:

✔ Array methods
✔ reduce mastery
✔ Output traps
✔ Interview logic
👉 NEXT PART?
PART 5: Objects & this 🔥 INTERVIEW CRITICAL)
keyword (

Reply Next and we continue 🚀

Next
🔥 Great — now we hit Objects & this , one of the most confusing + most
asked JS topics in interviews.

📘+ Interview
PART 5: Objects &
Mastery)
this Keyword (Deep

1️⃣ Objects in JavaScript (Deep Basics)

🔹 Creating Objects
const user = {
name:"Alex",
age:22,
isAdmin:true
};

Objects store data as key–value pairs.

2️⃣ Accessing Object Properties

JavaScript 31
 Dot vs Bracket

[Link];
user["age"];

📌 Bracket notation is required when:

Key has spaces

Key is dynamic

let key ="name";

user[key];

3️⃣ Add / Update / Delete Properties

[Link] ="Delhi";
[Link] =23;
delete [Link];

4️⃣ Nested Objects

const person = {
name:"Sam",
address: {
city:"Hyd",
pin:500001
}
};

5️⃣ Looping Over Objects

JavaScript 32
 🔹 for...in

for (let keyin user) {

[Link](key, user[key]);
}

🔹 Object Methods
[Link](user);
[Link](user);
[Link](user);

6️⃣ Object Destructuring

const { name, age } = user;

Rename:

const {name: userName } = user;

Default:

const { role ="user" } = user;

7️⃣ this Keyword ( 🔥 MOST ASKED)

🔹 Definition
this refers to the object that is calling the function.

JavaScript 33
 1️⃣ this in Global Scope

[Link](this);

Browser → window

[Link] → {}

2️⃣ this Inside Function

functiontest() {
[Link](this);
}
test();

Non-strict → window

Strict → undefined

3️⃣ this Inside Object Method

const obj = {
name:"JS",
show() {
[Link]([Link]);
}
};
[Link]();

✅ JS
4️⃣ this Inside Arrow Function

const obj = {
name:"JS",
show:() => {

JavaScript 34
 [Link]([Link]);
}
};
[Link]();

❌ undefined
📌 Arrow functions do NOT have their own this

📌 They take from lexical scope

this

8️⃣ call , apply , bind (INTERVIEW FAVORITE)

🔹 call

functiongreet(city) {
[Link]([Link], city);
}
[Link]({name:"Alex" },"Hyd");

🔹 apply

[Link]({name:"Alex" }, ["Hyd"]);

🔹 bind

const newFn = [Link]({name:"Alex" },"Hyd");

newFn();

9️⃣ Output-Based Interview Questions

Q1

JavaScript 35
 const obj = {
name:"A",
fn() {
[Link]([Link]);
}
};
[Link]();

✅A
Q2

const obj = {
name:"A",
fn:() => {
[Link]([Link]);
}
};
[Link]();

❌ undefined
Q3

functionsayHi() {
[Link]([Link]);
}
[Link]({name:"JS" });

✅ JS
🔥 10️⃣ Tricky Interview Questions
1. Why arrow functions don’t have this ?

JavaScript 36
 → They inherit from lexical scope

2. bind vs call?
→ bind returns function, call invokes immediately

3. Can we change this of arrow function?

→ ❌ No
🧪 Practice Problems
1️⃣ Implement your own bind

2️⃣ Fix inside callback

this

3️⃣ Convert function to arrow & predict output

✅ You’ve Mastered:
✔ Objects
✔ Destructuring
✔ behavior
this

✔ call / apply / bind

👉 NEXT PART?
PART 6: Prototypes & Inheritance (JS Internals)
Reply Next 🚀
Next
🔥 Great — now we go under the hood of JavaScript.
This topic explains how JS objects really work and is a senior-level interview
favorite.

📘(Deep
PART 6: Prototypes & Inheritance
+ Interview Mastery)

JavaScript 37
 1️⃣Based)
JavaScript is Prototype-Based (NOT Class-

❗ Important:
JavaScript does not have classical inheritance like Java/C++
It uses prototypal inheritance

Every object in JS has a hidden property:

[[Prototype]] → accessible via __proto__

2️⃣ What is Prototype?

A prototype is an object from which other objects inherit properties and
methods.

3️⃣CONFUSION)vs
__proto__ prototype (VERY COMMON

🔹 __proto__
Exists on every object

Points to the object's prototype

const obj = {};

obj.__proto__ ===[Link];// true

🔹 prototype
Exists only on constructor functions

Used to define properties shared by instances

JavaScript 38
 functionPerson() {}
[Link] =function() {
[Link]("Hi");
};

4️⃣ Prototype Chain (🔥 INTERVIEW FAVORITE)

const arr = [];

Prototype chain:

arr →[Link] →[Link] →null

When you do:

[Link](1);

JS searches:

1. arr

2. [Link]

3. [Link]

5️⃣ Constructor Functions

Before ES6 classes 👇
functionUser(name) {
[Link] = name;
}

[Link] =function() {

JavaScript 39
 [Link]([Link]);
};

const u1 =newUser("Alex");
[Link]();// Alex

📌 new does:

1. Creates empty object

2. Sets prototype

3. Binds this

4. Returns object

6️⃣ Inheritance Using Prototypes

functionAnimal(name) {
[Link] = name;
}

[Link] =function() {
[Link]("Animal speaks");
};

functionDog(name) {
[Link](this, name);
}

[Link] =[Link]([Link]);
[Link] =Dog;

const d =newDog("Bruno");
[Link]();

7️⃣ ES6 Classes (Syntactic Sugar)

JavaScript 40
 classPerson {
constructor(name) {
[Link] = name;
}

sayHi() {
[Link]("Hi " +[Link]);
}
}

classStudentextendsPerson {
constructor(name, id) {
super(name);
[Link] = id;
}
}

📌 Internally still uses prototypes

8️⃣ [Link]()

const parent = {
greet() {
[Link]("Hello");
}
};

const child =[Link](parent);

[Link]();

9️⃣ Shadowing in Prototype Chain

const obj = {
a:1

JavaScript 41
 };

obj.__proto__.a =2;

[Link](obj.a);// 1

📌 Own property > Prototype property

🔥 1️⃣0️⃣ Output-Based Interview Questions
Q1

functionA() {}
[Link](A.__proto__ ===[Link]);

✅ true
Q2

const obj = {};

[Link](obj.__proto__ ===[Link]);

✅ true
Q3

[Link] =() =>[Link]("Hi");

[].say();

✅ Hi
🔥 1️⃣1️⃣ Interview Questions (With Crisp Answers)
JavaScript 42
 1. What is prototype?
→ Mechanism for inheritance

2. Difference between __proto__ and prototype ?

→ Object vs constructor property

3. Is class real in JS?

→ No, syntactic sugar

4. How method lookup works?

→ Prototype chain traversal

5. What is prototype pollution?

→ Modifying shared prototype (security risk)

🧪 Practice Tasks
1️⃣ Create custom constructor
2️⃣ Implement inheritance manually
3️⃣ Add method to [Link]

4️⃣ Explain prototype chain for []

✅ You’ve Mastered:
✔ Prototypes
✔ Inheritance
✔ Constructor functions
✔ Classes internals
👉 NEXT PART?
PART 7: Asynchronous JavaScript (Callbacks, Promises, Async/Await, Event
Loop)
🔥 MOST IMPORTANT FOR INTERVIEWS
Reply Next 🚀
Next

JavaScript 43
 🔥 Perfect timing — this is THE most important JavaScript topic for
interviews.
If you master this, you will crack async JS questions confidently.

📘 PART 7: Asynchronous JavaScript

Callbacks • Promises • Async/Await • Event Loop (Deep + Interview Ready)

1️⃣ Why Asynchronous JavaScript?

JS is single-threaded
But it handles:

API calls

Timers

Events
without blocking the main thread

This is possible because of:

Web APIs

Callback Queue

Microtask Queue

Event Loop

2️⃣ Synchronous vs Asynchronous

🔹 Synchronous
[Link]("A");
[Link]("B");

Output:

JavaScript 44
 A
B

🔹 Asynchronous
[Link]("A");
setTimeout(() =>[Link]("B"),0);
[Link]("C");

Output:

A
C
B

3️⃣ Callbacks
🔹 Basic Callback
functionfetchData(cb) {
setTimeout(() => {
cb("Data loaded");
},1000);
}

fetchData(data =>[Link](data));

❌ Callback Hell
a(() => {
b(() => {

JavaScript 45
 c(() => {
d();
});
});
});

📌 Hard to read & maintain

4️⃣ Promises (🔥 INTERVIEW FAVORITE)
🔹 Creating a Promise
const promise =newPromise((resolve, reject) => {
if (true)resolve("Success");
elsereject("Error");
});

🔹 Promise States
pending

fulfilled

rejected

🔹 Consuming Promises
promise
.then(res =>[Link](res))
.catch(err =>[Link](err))
.finally(() =>[Link]("Done"));

5️⃣ Promise Chaining

JavaScript 46
 fetchData()
.then(res =>process(res))
.then(result =>save(result))
.catch(err =>[Link](err));

6️⃣ Promise APIs (VERY IMPORTANT)

🔹 [Link]

[Link]([p1, p2]);

Fails fast

🔹 [Link]

[Link]([p1, p2]);

🔹 [Link]

[Link]([p1, p2]);

🔹 [Link]

[Link]([p1, p2]);

7️⃣ Async / Await (🔥 Most Used)

JavaScript 47
 asyncfunctionfetchUser() {
try {
const res =awaitfetch(url);
const data =await [Link]();
[Link](data);
}catch (e) {
[Link](e);
}
}

📌 Cleaner syntax over promises

8️⃣ Async vs Promise .then()

Aspect Async/Await Promise

Syntax Clean Chain

Error handling try/catch catch

Debugging Easier Harder

9️⃣ Event Loop (🔥🔥🔥 MUST MASTER)

Components:
1. Call Stack

2. Web APIs

3. Microtask Queue

4. Callback Queue

5. Event Loop

🔥 Execution Order Rule

1️⃣ Call Stack
2️⃣ Microtask Queue
3️⃣ Callback Queue
JavaScript 48
 Example (VERY COMMON)

[Link]("A");

setTimeout(() =>[Link]("B"),0);

[Link]().then(() =>[Link]("C"));

[Link]("D");

Output:

A
D
C
B

🔥 1️⃣0️⃣ Tricky Interview Output Questions

Q1

setTimeout(() =>[Link](1),0);
[Link]().then(() =>[Link](2));
[Link](3);

Output:

3
2
1

Q2

JavaScript 49
 asyncfunctiontest() {
return"Hello";
}
test().then([Link]);

Output:

Hello

🔥Answers)
1️⃣1️⃣ Common Interview Questions (With
1. What is Event Loop?
→ Manages async tasks

2. Microtask vs Macrotask?
→ Promises > setTimeout

3. Why JS is non-blocking?
→ Event loop + async APIs

4. Promise vs Callback?
→ Avoids hell, better error handling

5. Does async/await block JS?

→ ❌ No
🧪 Practice Tasks
1️⃣ Convert callback to promise
2️⃣ Convert promise to async/await
3️⃣ Predict output for mixed async code
4️⃣ Implement [Link] polyfill

JavaScript 50
 ✅ You’ve Mastered:
✔ Callbacks
✔ Promises
✔ Async/Await
✔ Event Loop
👉 NEXT PART?
PART 8: Browser APIs, DOM, Events, Debouncing & Throttling
Reply Next 🚀
Next
🔥 Awesome — now we cover Browser + DOM + Performance concepts.
These are must-know for frontend roles & coding rounds.

📘Debouncing
PART 8: Browser APIs, DOM, Events,
& Throttling
(Interview + Real-World Heavy)

1️⃣ What is the DOM?

DOM = Document Object Model
It is a tree-like representation of HTML that JavaScript can manipulate.

<h1id="title">Hello</h1>

const el =[Link]("title");

2️⃣ Selecting DOM Elements

JavaScript 51
 [Link]("id");
[Link]("class");
[Link]("p");

[Link](".box");
[Link](".box");

📌 querySelector returns first match

📌 querySelectorAll returns NodeList

3️⃣ DOM Manipulation

🔹 Change Content
[Link] ="Hi";
[Link] ="<b>Hi</b>";

🔹 Change Styles
[Link] ="red";

🔹 Create Elements
const div =[Link]("div");
[Link] ="Hello";
[Link](div);

4️⃣ Events in JavaScript

🔹 Event Handling
JavaScript 52
 [Link]("click",() => {
[Link]("Clicked");
});

5️⃣ Event Bubbling & Capturing (VERY IMPORTANT)

🔹 Bubbling (Default)
Child → Parent

🔹 Capturing
Parent → Child

[Link]("click", fn,true);// capture

6️⃣ Event Delegation (🔥 INTERVIEW FAVORITE)

Handle events using parent instead of multiple children

[Link]("click",e => {
if ([Link] ==="LI") {
[Link]([Link]);
}
});

📌 Improves performance
📌 Handles dynamic elements
7️⃣ Web Storage APIs
🔹 localStorage
JavaScript 53
 [Link]("user","Alex");
[Link]("user");
[Link]("user");

🔹 sessionStorage
Exists per tab

8️⃣ Debouncing (🔥 VERY COMMON)

Executes function after delay once user stops triggering

🔹 Use Case
Search input

Resize event

functiondebounce(fn, delay) {
let timer;
returnfunction(...args) {
clearTimeout(timer);
timer =setTimeout(() => [Link](this, args), delay);
};
}

9️⃣ Throttling (🔥 VERY COMMON)

Executes function once in fixed interval

🔹 Use Case
Scroll

Button spam

JavaScript 54
 functionthrottle(fn, limit) {
let flag =true;
returnfunction(...args) {
if (!flag)return;
flag =false;
[Link](this, args);
setTimeout(() => flag =true, limit);
};
}

🔥 1️⃣0️⃣ DOM Output Interview Questions

Q1

[Link] ="";
[Link]([Link]);

✅ Empty body
Q2

[Link]("div").length;

Returns number of divs

🔥 1️⃣1️⃣ Interview Questions (With Answers)

1. Event bubbling vs capturing?
→ Direction of propagation

2. What is event delegation?

→ Handling child events via parent

3. localStorage vs sessionStorage?

JavaScript 55
 → Persistent vs per tab

4. Debounce vs Throttle?
→ Delay vs rate-limit

🧪 Practice Tasks
1️⃣ Build debounce search
2️⃣ Throttle scroll logger
3️⃣ Dynamic list click handler
4️⃣ Modal open/close with JS
✅ You’ve Mastered:
✔ DOM manipulation
✔ Events
✔ Performance optimization
👉 NEXT PART?
PART 9: Advanced JS (Currying, Polyfills, Memory, Shallow vs Deep Copy)
🔥 Senior-level interview topics
Reply Next 🚀
Next
🔥 Excellent — this is the final technical depth layer.
These topics are what senior interviewers use to judge real JS understanding.

📘 PART 9: Advanced JavaScript

Currying • Polyfills • Memory • Shallow vs Deep Copy

1️⃣ Currying (INTERVIEW FAVORITE)

🔹 What is Currying?
JavaScript 56
 Transforming a function with multiple arguments into nested single-argument
functions.

🔹 Normal Function
functionadd(a, b, c) {
return a + b + c;
}

🔹 Curried Version
functioncurryAdd(a) {
returnfunction(b) {
returnfunction(c) {
return a + b + c;
};
};
}

curryAdd(1)(2)(3);// 6

🔹 Generic Currying Function

functioncurry(fn) {
returnfunctioncurried(...args) {
if ([Link] >= [Link]) {
return [Link](this, args);
}
returnfunction(...next) {
returncurried(...args, ...next);
};
};

JavaScript 57
 }

🔥 Interview Question
❓ Why currying is useful?
Function reuse

Partial application

Clean code

2️⃣ Partial Application

functionmultiply(a, b) {
return a * b;
}

const double = [Link](null,2);

double(5);// 10

3️⃣ Shallow vs Deep Copy (VERY COMMON)

🔹 Shallow Copy
const obj2 = { ...obj1 };

Copies reference for nested objects

🔹 Deep Copy
const deep =[Link]([Link](obj));

⚠️ Loses:
JavaScript 58
 Functions

Dates

Undefined

🔹 Structured Clone (Modern)

structuredClone(obj);

4️⃣ Memory Management & Garbage Collection

🔹 JS Memory Areas
Stack → primitives

Heap → objects/functions

🔹 Garbage Collection
JS removes objects when:

No references exist

let obj = {a:1 };

obj =null;// eligible for GC

🔥 Memory Leak Example

let arr = [];
setInterval(() => {
[Link](newArray(100000));
},1000);

5️⃣ Common Memory Leak Causes

JavaScript 59
 Global variables

Unremoved event listeners

Closures holding references

Timers not cleared

6️⃣ Polyfills (🔥 VERY IMPORTANT)

🔹 What is a Polyfill?
Custom implementation of JS features for older browsers

🔹 Polyfill for map

[Link] =function(cb) {
const res = [];
for (let i =0; i <[Link]; i++) {
[Link](cb(this[i], i,this));
}
return res;
};

🔹 Polyfill for filter

[Link] =function(cb) {
const res = [];
for (let i =0; i <[Link]; i++) {
if (cb(this[i], i,this)) [Link](this[i]);
}
return res;
};

🔹 Polyfill for reduce

JavaScript 60
 [Link] =function(cb, init) {
let acc = init ??this[0];
let start = init ?0 :1;

for (let i = start; i <[Link]; i++) {

acc =cb(acc,this[i], i,this);
}
return acc;
};

🔥 7️⃣ Output-Based Interview Questions

Q1

[Link](0.1 +0.2 ===0.3);

❌ false
Q2

const a = {x:1 };
const b = {x:1 };
[Link](a == b);

❌ false
Q3

let x =1;
functionfoo() {
[Link](x);
let x =2;
}

JavaScript 61
 foo();

❌ ReferenceError (TDZ)
🔥 8️⃣ Interview Questions (Crisp)
1. What is currying?
→ Breaking fn into unary functions

2. Shallow vs deep copy?

→ Reference vs value

3. What causes memory leaks?

→ Unreleased references

4. Why polyfills are needed?

→ Browser compatibility

🧪 Practice Tasks
1️⃣ Write curry function
2️⃣ Write deep clone without JSON
3️⃣ Polyfill for
bind

4️⃣ Detect memory leak scenario

✅ You’ve Mastered:
✔ Currying
✔ Memory & GC
✔ Polyfills
✔ Advanced internals
🚀 FINAL PART LEFT
JavaScript 62
 👉to-End)
PART 10: JavaScript Interview Coding Practice Sheet (End-

✔ Beginner → Advanced
✔ Real interview patterns
✔ 100% coverage
Reply Next and I’ll give you the complete JS coding practice sheet 💪
Next
🔥🔥 This is it — your FINAL WEAPON for JS interviews & coding rounds.
Below is a COMPLETE JavaScript Coding Practice Sheet, structured exactly
like real interview prep.
If you solve 70–80% of this, you are interview-ready.

📘Sheet
PART 10: JavaScript Coding Practice
(End-to-End)

🟢 LEVEL 1: Beginner (Logic + Basics)

🔹 Strings
1. Reverse a string

2. Check palindrome

3. Count vowels

4. Find first non-repeating character

5. Remove duplicate characters

🔹 Numbers
1. Fibonacci series

2. Factorial

3. Prime number check

4. Armstrong number

JavaScript 63
 5. Reverse a number

🔹 Arrays
1. Find max & min

2. Remove duplicates

3. Count occurrences

4. Find second largest

5. Rotate array

🟡 LEVEL 2: Intermediate (Interview Favorite)

🔹 Arrays (Core)
1. Flatten an array (multi-level)

2. Group elements by property

3. Intersection of two arrays

4. Move zeros to end

5. Find missing number

🔹 Strings
1. Anagram check

2. Longest word

3. String compression

4. Capitalize first letter of each word

🔹 Objects
1. Deep clone object

2. Compare two objects

3. Convert object → array

4. Frequency counter

JavaScript 64
 🔵 LEVEL 3: Advanced (🔥 REAL INTERVIEW)
🔹 Functions & Closures
1. Counter using closure

2. Once function

3. Memoization

4. Currying function

5. Compose functions

🔹 Polyfills (VERY IMPORTANT)

1. Polyfill for map

2. Polyfill for filter

3. Polyfill for reduce

4. Polyfill for bind

🔹 Async JavaScript
1. Convert callback → promise

2. Implement [Link]

3. Retry promise on failure

4. Sequential async execution

5. Parallel async execution

🔴 LEVEL 4: Tricky Output-Based Questions

1.

[Link]([] == ![]);

1.

JavaScript 65
 [Link]("5" +3 -2);

1.

let a = {};
let b = a;
b.x =10;
[Link](a.x);

1.

for (var i =0; i <3; i++) {

setTimeout(() =>[Link](i),0);
}

1.

asyncfunctionf() {
return10;
}
[Link](f());

🧠 LEVEL 5: Real-World Problems

1. Debounce search input

2. Throttle scroll event

3. Infinite scroll logic

4. Shopping cart total using reduce

5. Form validation logic

6. LRU Cache (basic)

JavaScript 66
 7. Deep flatten object

8. API retry with backoff

🏁 LEVEL 6: Company-Style Questions

🔹 Pattern Based
1. Two sum

2. Subarray sum

3. Remove falsy values

4. Chunk array

5. Shuffle array

🔹 Data Handling
1. Sort objects by key

2. Merge two sorted arrays

3. Pagination logic

4. Search filter logic

📌 BONUS: Must-Solve Before Interviews

1. Event delegation implementation

2. Custom setInterval

3. this binding edge cases

4. Debounce + throttle combined

5. Flatten + unique array

6. Deep freeze object

🎯 FINAL RESULT IF YOU COMPLETE THIS

✔ Crack JS interviews
✔ Write clean production JS
JavaScript 67
 ✔ Strong base for React / Node
✔ Confident in output-based questions

JavaScript 68