Here's the truth: Cookies are a storage mechanism. Sessions and JWT are authentication strategies. They often work together.

Let me clear up the confusion once and for all.
First, Understand the Difference

Key insight: You can store a session ID in a cookie. You can also store a JWT in a cookie. Cookies are just the delivery method.

What are Cookies?
Cookies are small pieces of data (max 4KB) that browsers store and automatically send with every request to the same domain.

How Cookies Work?

1. Server sets cookie via response header: Set-Cookie: userId=123; HttpOnly; Secure; Max-Age=3600

2. Browser stores the cookie

3. Browser automatically sends cookie with every subsequent request: Cookie: userId=123

Cookie Attributes (Important!)

res.cookie("token", "abc123", {
  httpOnly: true,   // Can't be accessed by JavaScript (prevents XSS)
  secure: true,     // Only sent over HTTPS
  sameSite: "strict", // Protects against CSRF
  maxAge: 3600000,  // 1 hour expiration
  domain: ".example.com" // Available to subdomains
});

What Cookies Are NOT

• Not secure by default - They need proper flags (HttpOnly, Secure, SameSite)

• Not for large data - 4KB limit

• Not cross-domain - They belong to specific domains

How Session Authentication Works

1. Client sends login credentials to server
   └─ POST /login with username + password

2. Server verifies credentials against database
   └─ If valid, creates a unique session ID

3. Server stores session data (in memory/Redis/DB)
   └─ Example: { userId: 123, role: "admin", expires: "2024-01-01" }

4. Server sends session ID to client via cookie
   └─ Set-Cookie: sessionId=abc123; HttpOnly; Secure

5. Browser stores cookie automatically

6. Client includes cookie in all subsequent requests
   └─ Cookie: sessionId=abc123

7. Server reads cookie, looks up session data
   └─ Finds userId, role, etc. from session store

8. Server responds with requested data
   └─ No need to re-authenticate for each request

9. On logout, server destroys session
   └─ Client cookie becomes invalid

Session Code Example

import express from "express";
import session from "express-session";
import MongoStore from "connect-mongo";

const app = express();

// Session configuration
app.use(session({
  secret: "your-secret-key",
  resave: false,
  saveUninitialized: false,
  store: MongoStore.create({
    mongoUrl: "mongodb://localhost:27017/sessions"
  }),
  cookie: {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    maxAge: 1000 * 60 * 60 * 24 // 24 hours
  }
}));

// Login route
app.post("/login", async (req, res) => {
  const { username, password } = req.body;
  
  // Verify user (check database)
  const user = await User.findOne({ username });
  
  if (user && await bcrypt.compare(password, user.password)) {
    // Store user info in session
    req.session.userId = user._id;
    req.session.username = user.username;
    req.session.role = user.role;
    
    res.json({ message: "Logged in successfully" });
  } else {
    res.status(401).json({ error: "Invalid credentials" });
  }
});

// Protected route
app.get("/profile", (req, res) => {
  // Check if session exists
  if (!req.session.userId) {
    return res.status(401).json({ error: "Not authenticated" });
  }
  
  res.json({
    userId: req.session.userId,
    username: req.session.username
  });
});

// Logout
app.post("/logout", (req, res) => {
  req.session.destroy((err) => {
    if (err) {
      return res.status(500).json({ error: "Logout failed" });
    }
    res.clearCookie("connect.sid");
    res.json({ message: "Logged out" });
  });
});

Session Storage Options

Pros & Cons of Sessions

What is JWT (JSON Web Token)?

JWT is a stateless authentication mechanism. The token contains all necessary user information, signed by the server. No server-side storage required.

JWT Structure

A JWT looks like this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxMjMiLCJyb2xlIjoidXNlciIsImlhdCI6MTY5MDAwMDAwMCwiZXhwIjoxNjkwMDAzNjAwfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Pros & Cons of JWT

Head-to-Head Comparison

Sessions vs JWT

When to Use Sessions

// ✅ GOOD USE CASES FOR SESSIONS

// 1. Traditional web apps (server-rendered)
app.get("/dashboard", (req, res) => {
  if (req.session.userId) {
    res.render("dashboard", { user: req.session.user });
  }
});

// 2. When you need instant logout/revocation
app.post("/admin/block-user", (req, res) => {
  sessionStore.destroy(userSessionId); // Immediately blocks access
});

// 3. When storing large amounts of user data
req.session.userPreferences = { theme: "dark", language: "es" }; // Not in cookie

// 4. Banking/financial apps (higher security requirements)

When to Use JWT

// ✅ GOOD USE CASES FOR JWT

// 1. REST APIs (stateless)
app.get("/api/users", authenticateToken, (req, res) => {
  // No session lookup needed
});

// 2. Microservices architecture
Service A: Generate token with user info
Service B: Verify token without calling auth service

// 3. Mobile applications
// Tokens work well with mobile's lack of cookie support

// 4. Single Page Applications (SPA)
// Works with localStorage or cookies

// 5. Third-party API access
const apiToken = jwt.sign({ clientId: "abc123" }, SECRET);

When to Use Both Together

Many production apps combine both:

javascript

// Hybrid approach: JWT stored in HTTP-only cookie
app.post("/login", async (req, res) => {
  const token = jwt.sign({ userId: user.id }, SECRET, { expiresIn: "15m" });
  const refreshToken = jwt.sign({ userId: user.id }, REFRESH_SECRET, { expiresIn: "7d" });
  
  // Store tokens in HTTP-only cookies (secure against XSS)
  res.cookie("accessToken", token, { httpOnly: true, secure: true });
  res.cookie("refreshToken", refreshToken, { httpOnly: true, secure: true });
  
  // Also store session in Redis for revocation ability
  await redis.set(`session:${user.id}`, token, "EX", 900);
});

Security Considerations

Common Attacks & Mitigations

Quick Reference Card

javascript

// SESSIONS - Server-side storage
// Pros: Easy logout, small cookie, CSRF protection
// Cons: Needs database, harder to scale
app.use(session({ secret: "key", store: new RedisStore() }));
req.session.userId = userId;

// JWT - Client-side token
// Pros: Stateless, scales well, works across domains
// Cons: Can't revoke easily, larger payload
const token = jwt.sign({ userId }, SECRET, { expiresIn: "1h" });
jwt.verify(token, SECRET);

// COOKIES - Storage mechanism (used with both)
res.cookie("name", "value", { httpOnly: true, secure: true });
req.cookies.name

Final Summary

The golden rule: Use HTTP-only, Secure, SameSite cookies regardless of whether you store a session ID or JWT. Store as little sensitive data as possible. Always use HTTPS in production.

For years, JavaScript developers relied on plain objects {} for key-value storage and arrays [] for lists. But objects and arrays have limitations.

Enter Map and Set – two powerful data structures introduced in ES6 that solve real problems.

Let’s explore what they are, how they differ from traditional structures, and when you should use them.

What is a Map?

A Map is a collection of key-value pairs where keys can be any data type (objects, functions, numbers, strings, etc.)

No guartee order of key, key can be any orders, may be sorted or not sorted

they remember the original insertion order.

The Problem with Plain Objects

Traditional objects have two major flaws:

1. Keys are always strings (or symbols). If you use a number or object as a key, it gets converted to a string.

2. Prototype chain pollution – properties like toString can accidentally interfere with your data.

// The problem with objects
const obj = {};
obj[1] = "number one";
obj["1"] = "string one"; // Overwrites the previous!

console.log(obj[1]); // "string one" - lost the number key

// Object keys cause issues
const user = { name: "Alice" };
obj[user] = "user data";
console.log(obj["[object Object]"]); // "user data" - key got stringified!

How Map Solves This

const map = new Map();

// Keys keep their original type
map.set(1, "number one");
map.set("1", "string one");
map.set({ name: "Alice" }, "user data");

console.log(map.get(1));  // "number one" - separate entry
console.log(map.get("1")); // "string one" - separate entry

// Object key works as expected
const alice = { name: "Alice" };
map.set(alice, { email: "alice@example.com" });
console.log(map.get(alice)); // { email: "alice@example.com" }

Map Methods at a Glance

const scores = new Map();
scores.set("Alice", 95);
scores.set("Bob", 87);

console.log(scores.has("Alice")); // true
console.log(scores.size);         // 2
scores.delete("Bob");
console.log(scores.size);         // 1

What is a Set?

A Set is a collection of unique values – no duplicates allowed. Values can be of any type, and insertion order is preserved.

The Problem with Arrays

Arrays allow duplicates, which often requires extra code to handle:

// Array with duplicates
const tags = ["js", "react", "js", "node", "react", "css"];

// Removing duplicates manually
const uniqueTags = [];
for (const tag of tags) {
  if (!uniqueTags.includes(tag)) {
    uniqueTags.push(tag);
  }
}
console.log(uniqueTags); // ["js", "react", "node", "css"] - 4 lines of code

How Set Solves This

const tags = ["js", "react", "js", "node", "react", "css"];
const uniqueTags = new Set(tags);

console.log(uniqueTags); // Set(4) { "js", "react", "node", "css" }

// Convert back to array if needed
console.log([...uniqueTags]); // ["js", "react", "node", "css"]

One line. No duplicates. Perfect.

Set Methods at a Glance

const fruits = new Set();
fruits.add("apple");
fruits.add("banana");
fruits.add("apple"); // ignored - already exists

console.log(fruits.size); // 2
console.log(fruits.has("banana")); // true

fruits.delete("banana");
console.log(fruits.size); // 1

Map vs Object

Set vs Array

Use Map when:

• Keys are unknown until runtime (dynamic)

• Keys need to be objects, numbers, or functions

• You need frequent addition and removal of key-value pairs

• Order of insertion matters

• You want to avoid prototype chain issues

• frequency / count / number of times

• occurrence(s)

• mapping / associate / pairing

• store extra info for each element

• group by something (e.g., anagrams grouping)

• find most / least frequent element

• accumulate sums per category (e.g., total score per player)

• store index/position of elements

Use Set when:

• You need a collection of unique values

• You frequently check if a value exists

• You want to remove duplicates from an array

• Order of insertion matters

• unique / distinct

• duplicate / remove duplicates

• exists / contains / present

• intersection / union / difference of elements

• first repeating / first non-repeating

• already seen before?

• check membership in O(1)

Will merge those rows and column are referece to each Other
This will only return students who got the internship, and It will return the internship which are gotten by students

Students ID mentioned in Internship table and students table

If you’ve ever found yourself writing const name = user.name or const first = arr[0] over and over again, you’re doing extra work.

JavaScript has a beautiful feature called destructuring that lets you unpack values from arrays and properties from objects into distinct variables—in one clean line.

Let’s dive into what destructuring means, how it works with arrays and objects, setting default values, and why you should start using it today.

What Destructuring Means

Destructuring is a syntax that allows you to extract data from arrays or objects and assign them to variables using a pattern that mirrors the original structure.

Think of it as "unpacking" your data.

Destructuring Arrays

With arrays, destructuring pulls values by their position.

Without Destructuring (The Old Way)

const colors = ["red", "green", "blue"];

const first = colors[0];
const second = colors[1];
const third = colors[2];

console.log(first, second, third); // red green blue

With Destructuring

const colors = ["red", "green", "blue"];
const [first, second, third] = colors;

console.log(first, second, third); // red green blue

You can also skip items using empty commas:

const [, , third] = ["red", "green", "blue"];
console.log(third); // blue

Destructuring Objects

Object destructuring uses the property names—not order.

Before Destructuring

const user = {
  name: "Alice",
  age: 28,
  city: "Paris"
};

const name = user.name;
const age = user.age;
const city = user.city;

console.log(name, age, city); // Alice 28 Paris

After Destructuring

const user = {
  name: "Alice",
  age: 28,
  city: "Paris"
};

const { name, age, city } = user;

console.log(name, age, city); // Alice 28 Paris

You can also assign to different variable names:

const { name: userName, age: userAge } = user;
console.log(userName, userAge); // Alice 28

Default Values

What if a property or array element is missing? Destructuring lets you set default values to avoid undefined.

Arrays with defaults

const [a = 1, b = 2] = [10];
console.log(a, b); // 10 2 (only a gets 10, b uses default)

Objects with defaults

const { name, role = "guest" } = { name: "Bob" };
console.log(name, role); // Bob guest

Suggestions for Using Destructuring

• Use object destructuring when you need multiple properties from the same object.

• Use array destructuring for swapping variables or getting first/second items.

• Always provide defaults when data might be missing.

• Destructure function parameters to make functions self-documenting.

• Avoid over-destructuring – don’t go more than 2 levels deep without a good reason.

Final Thought

Destructuring isn’t just a "cool trick." It’s a fundamental tool that makes your JavaScript cleaner, safer, and more expressive.

In the world of programming, timing is everything. If you've ever used an app that froze while loading a photo, or a website that felt "snappy" even while fetching data, you’ve experienced the difference between synchronous and asynchronous code.

For a language like JavaScript, which powers almost everything we do online, understanding these concepts is the key to building smooth, professional applications.

1. What is Synchronous Code? (The Waiting Game)

By default, JavaScript is synchronous and single-threaded. This means it executes code line-by-line, in order. It completes one task before moving on to the next.

The Step-by-Step Execution:

1. Execute Line 1.

2. Wait for Line 1 to finish.

3. Execute Line 2.

Everyday Example: Think of a single-file line at a coffee shop. The barista takes one order, makes that coffee, and hands it over before talking to the next person in line. If one customer orders ten complex drinks, everyone else stands still and waits.

Code example:

console.log("Order coffee");
console.log("Pay");
console.log("Wait for coffee");
console.log("Leave");

Output:

Order coffee
Pay
Wait for coffee
Leave

Key point:
If one step takes 5 seconds (e.g., making coffee), nothing else happens during those 5 seconds.

2. The Problem: Blocking Code

When a task takes a long time to finish (like a heavy calculation or a massive file download) in a synchronous environment, it creates blocking code.

Because JavaScript is "single-threaded," the entire browser tab "freezes" while it waits for that one line to finish. You can’t click buttons, scroll, or interact with the page. This leads to a poor user experience.

Everyday example:
At a busy coffee shop with a buzzer.

• You order → pay → get buzzer → sit down and check your phone.

• Buzzer rings → you pick up coffee → leave.

• Other customers can order while you wait.

Code example:

javascript

console.log("Order coffee");
console.log("Pay");

setTimeout(() => {
  console.log("Coffee ready — pick up");
}, 3000);

console.log("Sit down and check phone");

// Output:
// Order coffee
// Pay
// Sit down and check phone
// (3 seconds later) Coffee ready — pick up

Key point:
The program doesn’t freeze while waiting.

Everyday example: At a busy coffee shop with a buzzer.

You order → pay → get buzzer → sit down and check your phone.

Buzzer rings → you pick up coffee → leave.

Other customers can order while you wait.

Code example:

javascript console.log("Order coffee"); console.log("Pay");

setTimeout(() => { console.log("Coffee ready — pick up"); }, 3000);

console.log("Sit down and check phone");

// Output: // Order coffee // Pay // Sit down and check phone // (3 seconds later) Coffee ready — pick up Key point: The program doesn’t freeze while waiting.

1. Why JavaScript Needs Asynchronous Behavior JavaScript is single-threaded (one thing at a time by default). If it waited for every slow task, the whole page would freeze.

Real-world scenarios requiring async:

Scenario If synchronous (bad) If asynchronous (good) Fetching user data from a server Page freezes until data arrives Page stays responsive, shows spinner Reading a large file App unresponsive for seconds App continues, file loads in background Setting a reminder for 10 seconds later Blocks everything for 10 seconds Timer runs quietly, other code runs 4. Examples Like API Calls or Timers Timer (already shown) setTimeout / setInterval

API call (using fetch)

javascript console.log("Requesting user data...");

fetch("https://jsonplaceholder.typicode.com/users/1") .then(response => response.json()) .then(user => console.log("User received:", user.name));

console.log("This runs while waiting for the network."); Output order:

text Requesting user data... This runs while waiting for the network. User received: Leanne Graham Event listener (another async pattern)

javascript button.addEventListener("click", () => { console.log("Button clicked — but only when user acts"); }); 5. Problems That Occur with Blocking Code Blocking code = synchronous code that takes a long time.

Example of bad blocking code:

javascript console.log("Start");

// Block for 3 seconds let end = Date.now() + 3000; while (Date.now() < end) { // do nothing — just wait }

console.log("End"); While this runs:

No buttons respond

No animations update

Browser might show "page unresponsive"

User impact:

Form can’t be submitted

Spinners don’t animate

User thinks the app crashed

Real danger: A slow database query or large loop can freeze the entire UI for seconds or minutes.

Visual Summary (Mental Model) Synchronous (blocking): Task A [====] → Task B [====] → Task C [====] Time moves →

Asynchronous (non-blocking): Task A [start] → (waits) Task B [========] (finishes early) Task C [start] → finishes Task A [resumes] → finishes

Time moves → with gaps filled by other work.

Suggested Teaching Flow Start with step-by-step synchronous – simple console logs.

Introduce a delay – use setTimeout to show waiting.

Show the freeze – bad blocking loop (mention never use this in real code).

Explain the need – fetch API example (even fake fetch).

Introduce event loop intuitively – “JavaScript hands slow tasks to the browser, then comes back later.”

End with real-world UI – loading spinners, responsive buttons.

Summary :
Synchronus task run on maint thred if we align heavy task with sync it will block the next pipeline task.
Async aprroach - Will assure that given task will be done in after some period and will notify usiing call back

JavaScript originally relied on callbacks and then Promises to handle asynchronous operations. While Promises improved readability compared to nested callbacks, complex chains could still become hard to follow. Async/await was introduced as syntactic sugar over Promises to make asynchronous code look and behave more like synchronous code.

How async functions work

An async function always returns a Promise. When you mark a function with async, it automatically wraps any returned value in a resolved promise, and any thrown error in a rejected promise.

You can use the await keyword to pause execution until the awaited Promise resolves. This makes asynchronous code easier to reason about.

// Regular function
function getData() {
  return "Hello";
}

// Async function (returns a promise)
async function getDataAsync() {
  return "Hello";
}

console.log(getData()); // "Hello"
console.log(getDataAsync()); // Promise {<fulfilled>: "Hello"}


async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

Await keyword concept

The await keyword can only be used inside async functions. It pauses the execution of the async function until the promise resolves or rejects, then returns the resolved value or throws an error.

async function getUserData() {
  // Pauses here until fetch completes
  const response = await fetch('https://api.example.com/user');
  // Then continues here
  const data = await response.json();
  return data;
}

Error handling with async code

Error handling in async/await uses traditional try/catch blocks, making it more intuitive than .catch() with promises.

async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/user');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Failed to fetch user data:', error.message);
    throw error; // Re-throw if needed
  }
}

Comparison with promises

• Promises: Require .then() and .catch() chaining.

• Async/await: Allows linear, synchronous-looking code.

Example with Promises:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Example with async/await:

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Key Takeaways

1. Always use try/catch for error handling in async functions

2. Remember that async functions always return promises - you can't get the raw value directly

3. Use Promise.all for parallel operations to avoid unnecessary waiting

4. Don't forget that await only works inside async functions (unless using top-level await in modules)

5. Async/await doesn't make code faster - it just makes it easier to reason about

Async/await transforms asynchronous JavaScript from a callback maze into code that reads like synchronous logic while maintaining all the non-blocking benefits of promises.

The spread operator (...) expands an iterable (like an array or object) into individual elements.
Think of it as taking items out of a box and laying them out individually.

1. Using Spread with Arrays**

It is commonly used to combine arrays or create shallow copies.

Copying Arrays

const original = [1, 2, 3];
const copy = [...original]; // Creates a shallow copy

console.log(copy); // [1, 2, 3]
console.log(original === copy); // false (different references)

Combining Arrays

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];

console.log(combined); // [1, 2, 3, 4, 5, 6]

Adding Elements

const fruits = ['apple', 'banana'];
const moreFruits = ['orange', ...fruits, 'grape'];

console.log(moreFruits); // ['orange', 'apple', 'banana', 'grape']

Using Spread with Objects

Copying Objects

const user = { name: 'John', age: 30 };
const userCopy = { ...user };

console.log(userCopy); // { name: 'John', age: 30 }

Merging Objects

const user = { name: 'John', age: 30 };
const address = { city: 'New York', country: 'USA' };
const profile = { ...user, ...address };

console.log(profile);
// { name: 'John', age: 30, city: 'New York', country: 'USA' }

Overriding Properties

const defaultSettings = { theme: 'light', fontSize: 14, notifications: true };
const userSettings = { theme: 'dark', fontSize: 16 };

const finalSettings = { ...defaultSettings, ...userSettings };
console.log(finalSettings);
// { theme: 'dark', fontSize: 16, notifications: true }

What Rest Operator Does

The Rest operator does the exact opposite: it "collects" multiple individual elements and bunches them into a single array. It is primarily used in function parameters or destructuring.

Using Rest with Function Parameters

function logItems(category, ...items) { 
console.log(Category: ${category}); 
console.log(Items: ${items.join(', ')}); 
}

logItems('Fruits', 'apple', 'banana', 'orange');

// Category: Fruits
// Items: apple, banana, orange

Destructuring Arrays

const scores = [98, 87, 92, 85, 88];
const [first, second, ...rest] = scores;

console.log(first);  // 98
console.log(second); // 87
console.log(rest);   // [92, 85, 88]

Destructuring Objects

const person = {
    name: 'Alice',
    age: 28,
    city: 'Boston',
    country: 'USA'
};

const { name, age, ...location } = person;
console.log(name);     // 'Alice'
console.log(age);      // 28
console.log(location); // { city: 'Boston', country: 'USA' }

⚖️ Key Differences: Spread vs. Rest

Practical Real-World Use Cases

1. Immutable State Updates (React)

// Adding an item to an array immutably
const [todos, setTodos] = useState(['Learn React']);
const addTodo = (newTodo) => {
    setTodos([...todos, newTodo]);
};

// Updating an object immutably
const [user, setUser] = useState({ name: 'John', age: 30 });
const updateAge = () => {
    setUser({ ...user, age: user.age + 1 });
};

2. Function Argument Handling

// Creating flexible functions
function createUser(name, email, ...additionalInfo) {
    const user = { name, email };
    
    if (additionalInfo.length > 0) {
        user.metadata = additionalInfo;
    }
    
    return user;
}

const user = createUser('Bob', 'bob@email.com', 'premium', 'joined-2023');
console.log(user);
// { name: 'Bob', email: 'bob@email.com', metadata: ['premium', 'joined-2023'] }

3. Math Operations

const numbers = [5, 12, 8, 130, 44];

// Using spread with Math functions
const max = Math.max(...numbers);  // 130
const min = Math.min(...numbers);  // 5

console.log(max, min);

4. Converting NodeList to Array

// Convert DOM elements collection to real array
const divs = document.querySelectorAll('div');
const divArray = [...divs];

// Now you can use array methods
divArray.map(div => div.classList.add('highlight'));

5. Creating Shallow Clones with Modifications

const originalTodo = {
    id: 1,
    text: 'Buy groceries',
    completed: false
};

const updatedTodo = {
    ...originalTodo,
    completed: true,
    completedAt: new Date().toISOString()
};

console.log(updatedTodo);
// { id: 1, text: 'Buy groceries', completed: true, completedAt: '2024-01-15T10:30:00.000Z' }

6. Dynamic Function Calls

function calculate(operation, ...numbers) {
    switch(operation) {
        case 'sum':
            return numbers.reduce((a, b) => a + b, 0);
        case 'multiply':
            return numbers.reduce((a, b) => a * b, 1);
        default:
            return null;
    }
}

console.log(calculate('sum', 1, 2, 3, 4));        // 10
console.log(calculate('multiply', 2, 3, 4));      // 24

// Using with spread to pass array
const values = [5, 10, 15];
console.log(calculate('sum', ...values));          // 30

Key Takeaways

1. Spread expands - takes an array/object and spreads it into individual elements

2. Rest collects - takes individual elements and collects them into an array/object

3. Both use ... syntax but serve opposite purposes

4. Use spread for: copying, merging, passing array elements as arguments

5. Use rest for: collecting function arguments, destructuring remaining items

The spread and rest operators are powerful tools that enable more readable and maintainable code when working with arrays, objects, and function parameters in modern JavaScript.

Errors in JavaScript are objects that indicate something went wrong during execution. They interrupt the normal flow of your program.

Types of Errors:

1. Syntax Error - Code can't be parsed
   // console.log('Hello' // Missing closing parenthesis

2. Reference Error - Variable doesn't exist
   console.log(undefinedVariable); // ReferenceError: undefinedVariable is not defined

3. Type Error - Operation on wrong data type
   const num = 5;
   num(); // TypeError: num is not a function

4. Range Error - Value out of range
   const arr = new Array(-1); // RangeError: Invalid array length

5. Network Error - Failed network request
   fetch('https://invalid-url'); // NetworkError

6. Custom Errors - Your own defined errors
   throw new Error('Something went wrong');

2. Using Try and Catch Blocks

Try-catch allows you to handle errors gracefully without crashing your application.

Basic Structure:

try { 
    let result = JSON.parse("invalid json"); 

} catch (error) { 
    console.log("Error occurred:", error.message); 

}

Flow:

• try → run code

• catch → handle error if occurs

3. The Finally Block

finally runs regardless of whether an error occurred or not - perfect for cleanup operations.
Use Case:

try {
    console.log('Opening database connection...');
    const conn = await db.connect();
    
    // Do something with connection
    const data = await conn.query('SELECT * FROM users');
    
    return data;
    
} catch (error) {
    console.error('Query failed:', error);
    throw error;
    
} finally {
    console.log("ALWAYS runs - even if there was an error");
    // 
    console.log('Closing database connection...');
    await conn.close(); // Ensures connection is always closed
}

• Closing DB connection

• Cleaning resources

4. Throwing Custom Errors

You can manually create errors using throw. Create meaningful, specific errors for better debugging.

Creating Custom Error Classes:

class ApiError extends Error{
    constructor(statuscode, message){
        super(message),
        this.statuscode = statuscode,
        this.isOperational = true,
        Error.captureStackTrace(this, this.constructor)
    }
    static badRequest(message = "Bad Request"){
        return new ApiError(400, message)

    }
    static unauthorized(message = "Unauthorized"){
        return new ApiError(401, message)
    }
    static conflict(message = "Conflict"){
        return new ApiError(409, message)
    }
}
export default ApiError

// Base custom error
class AppError extends Error {
    constructor(message, statusCode = 500) {
        super(message);
        this.name = this.constructor.name;
        this.statusCode = statusCode;
        Error.captureStackTrace(this, this.constructor);
    }
}

// Specific error types
class ValidationError extends AppError {
    constructor(message, fields = null) {
        super(message, 400);
        this.fields = fields;
    }
}

class DatabaseError extends AppError {
    constructor(message, originalError = null) {
        super(message, 500);
        this.originalError = originalError;
    }
}

class AuthenticationError extends AppError {
    constructor(message) {
        super(message, 401);
    }
}

class NotFoundError extends AppError {
    constructor(resource) {
        super(`${resource} not found`, 404);
        this.resource = resource;
    }
}

5. Why Error Handling Matters

🚀 Prevents App Crash

Without handling:

JSON.parse("invalid"); // 💥 crashes app

With handling:

try {
  JSON.parse("invalid");
} catch {
  console.log("Handled safely");
}

6. Graceful Failure - Don't Crash Your App

// BAD: App crashes on error
app.get('/user/:id', async (req, res) => {
    const user = await User.findById(req.params.id);
    res.json(user); // If user not found, app crashes!
});

// GOOD: Handle errors gracefully
app.get('/user/:id', async (req, res) => {
    try {
        const user = await User.findById(req.params.id);
        
        if (!user) {
            return res.status(404).json({
                success: false,
                message: 'User not found'
            });
        }
        
        res.json({
            success: true,
            data: user
        });
        
    } catch (error) {
        console.error('Error fetching user:', error);
        res.status(500).json({
            success: false,
            message: 'Unable to fetch user'
        });
    }
});

Key Takeaways

1. Always use try-catch for async operations

2. Create custom error types for better debugging

3. Use finally block for cleanup operations

4. Never expose internal errors to users

5. Log errors with context for debugging

6. Handle unhandled rejections and exceptions at process level

7. Graceful failure keeps your app running even when things go wrong

Error handling isn't just about preventing crashes - it's about creating a robust, debuggable, and user-friendly application!

🧠 What are String Methods?

String methods are built-in JavaScript functions used to manipulate and process text.

Examples:

• toUpperCase()

• split(',') // Split into array

• slice()

• substring()

• trim()

• str.length // Get string length

• charAt(0) // Get character at index

• indexOf('search') // Find position of substring

• includes('text') // Check if contains substring

• slice(0, 5) // Extract portion of string

• replace('old', 'new') // Replace content

👉 These methods operate on string values and return new strings (strings are immutable).

How Built-in Methods Work (Conceptually)

Even though JavaScript provides built-in methods, internally they follow simple logic.

Example: toUpperCase()()

Conceptual Steps

1. Take each character

2. Get its char code

3. Check if it's lowercase (a-z)

4. Subtract 32

5. Convert back to character

6. Join result

String.prototype.upperCaseMethod = function(){
  let res = "";

  for(let i =0; i<this.length; i++){
    let ch = this[i];

    if(ch >= "a" && ch <= "z"){
    res +=  String.fromCharCode(ch.charCodeAt() -32)
    }else{
      res+= ch
    }
  }
  return res
}
console.log("hello".upperCaseMethod()); // HELLO
console.log("hello".toUpperCase()); // HELLO

Example: split()

"hello world".split(" ")

Conceptually:

1. Traverse string character by character

2. Detect separator (" ")

3. Break string into parts

4. Store parts in array

 String.prototype.customSplit = function(separator) {
    const result = [];
    let current = '';
    const str = this;

    for (let i = 0; i < str.length; i++) {
      if (str[i] === separator) {
        result.push(current);
        current = '';
      } else {
        current += str[i];
      }
    }

    result.push(current); // push the last chunk
    return result;
  };

console.log("ravi kumar".customSplit(' '));
console.log("ravi kumar".split(' '));

Example: reverse()

function reverse(str) {
  let res = "";
  for (let i = str.length - 1; i >= 0; i--) {
    res += str[i];
  }
  return res;
}

Common Interview String Problems

• Reverse a string

• Check palindrome

• Find first non-repeating character

• Count occurrences of characters

• Remove duplicates

• Longest substring without repeating characters

Why Developers Write Polyfills

A polyfill is a custom implementation of a built-in method.

Reasons:

• Understand internal working

• Support older browsers

• Improve problem-solving skills

• Prepare for interviews

Importance of Understanding Built-in Behavior

• Helps write optimized code

• Avoids misuse of methods

• Improves debugging skills

• Builds strong fundamentals

• Makes problem-solving easier

• When you create a new instance with the new keyword, a brand new empty object {} is created.

• In JavaScript, every function has a prototype. Even objects themselves have a prototype, so the prototype creates a bridge between the empty object and the function and links them together.

• Now the this keyword becomes active after the link and binds the value. Whoever calls it will bind with the caller reference — it binds this to the new object.

• If you check any class, there is no return statement. So the final work is done by the new keyword, which automatically returns the newly created object (the constructor explicitly returns the object).

function TataCar(chassisNumber, modelName) {  
  this.chassisNumber = chassisNumber;  
  this.modelName = modelName;
  this.fuelLevel = 100;  
}

// created own method using prototype
TataCar.prototype.status = function () {
  return `Tata \({this.modelName} #\){this.chassisNumber} | Fuel: ${this.fuelLevel}`;
};

const car1 = new TataCar("MH-101", "Nexon");
const car2 = new TataCar("DL-202", "Harrier");

console.log(car1.modelName);
// console.log(car2.modelName);
// console.log(car1.status());
console.log(car2.status());

const car1 = new TataCar("MH-101", "Nexon");
const car2 = new TataCar("DL-202", "Harrier");

Behind the scene
let car1 = {}; // empty object created
Prototype creates a bridge
car1.__proto__ = TataCar.prototype;
Now car1 is linked to:
TataCar.prototype.status
car1.status();
works even though status is not inside car1.
prototype creates bridge between empty object and function

this binds to new object

Inside constructor:
this.chassisNumber = "MH-101";
this.modelName = "Nexon";
this.fuelLevel = 100;

Since this === car1:

No return in constructor:

function TataCar(...) {
// no return
}

new automatically returns object

console.log(typeof car1.status) // function 

car1.status === car2.status // true

Now check the below factory function

function createAutoRickshaw(id, route) {
  return {
    id,
    route,
    run() {
      return `Auto \({this.id} running on \){this.route}`;
    },
  };
}

const auto1 = createAutoRickshaw("UP-1", "Lucknow-kanpu");
const auto2 = createAutoRickshaw("UP-2", "Agra-Mathura");

console.log("TypeOf", typeof auto1.run); // function

auto1.run === auto2.run // false

Constructor functions (with new) share methods via prototype (same reference), while factory functions create a new copy of methods for each object.

new → shared methods (memory efficient)

factory → new method copy each time (memory heavy)

Summary

Use constructor + new when creating many objects with shared behavior

• Use factory functions for simple, small use cases

Every addEventListener provides three parameters:

1. event

2. callback

3. option

By default, the option is false. Hence, the bubbling phase travels from the target element up to the window, through the DOM tree (bottom → top direction).

Bubbling Phase (Default: false)

child.addEventListener('click', (e)=>{
  console.log(`I am from child || option false => bubbling phase`);  
})

parent.addEventListener('click', ()=>{
  console.log(`I am from Parent || option false => bubbling phase`);  
})

body.addEventListener('click', ()=>{
  console.log(`I am from Body || option false => bubbling phase `);  
})

Every addEventListener provides three parameters:

1. event

2. callback

3. option

By default, the option is false. Hence, the bubbling phase travels from the target element up to the window, through the DOM tree (bottom → top direction).

Bubbling Phase (Default: false)

Output:

I am from child || option false => bubbling phase
I am from Parent || option false => bubbling phase
I am from Body || option false => bubbling phase

Stop Bubbling

To prevent bubbling upward, add e.stopPropagation() to the child.
The event will not be delegated to parent elements.

child.addEventListener('click', (e)=>{
  e.stopPropagation()
  console.log(`I am from child || option false => bubbling phase`);  
})

Output:

I am from child || option false => bubbling phase

When to Use Bubbling (Default)

• Implementing event delegation

• Creating dropdowns that close when clicking outside

• Most everyday event handling

Capturing Phase (option: true)

When we click on the target and keep the option true, the capturing phase is activated.
The event starts from the window and travels down to the target (top → bottom direction).

child.addEventListener('click', (e) => {
  console.log(`I am from Child || option true => capturing phase`);
}, true);

parent.addEventListener('click', (e) => {
  console.log(`I am from Parent || option true => capturing phase`);
}, true);

body.addEventListener('click', (e) => {
  console.log(`I am from Body || option true => capturing phase`);
}, true);

Output:

I am from Body || option true => capturing phase
I am from Parent || option true => capturing phase
I am from Child || option true => capturing phase

Stop Capturing

To stop the event from reaching the child, add e.stopPropagation() to the parent.
The event will stop at the parent.

parent.addEventListener('click', (e)=>{  
  e.stopPropagation()
  console.log(`I am from Parent || option true => capturing phase`);  
}, true)

Output:

I am from Body || option true => capturing phase 
I am from Parent || option true => capturing phase

When to Use Capturing

• You need to intercept events before they reach children

• Implementing global event logging/debugging

• Creating security layers (blocking certain clicks)

Stop Propagation Use Cases

• Creating modals (click inside shouldn't close)

• Implementing nested interactive elements

• Preventing parent handlers from interfering

stopPropagation vs stopImmediatePropagation

stopImmediatePropagation ensures:

1. No other handlers on the same element run

2. The event doesn't bubble to the parent

Bigger problem:
What if multiple handlers are on the same element?

// e.stopImmediatePropagation(); // Overkill - stops analytics too!

Use stopPropagation() when:

• Implementing modal close (click inside modal shouldn't close it)

• Creating dropdown menus

• Preventing parent handlers but keeping sibling handlers on the same element

• Form validation where you still want analytics

Use stopImmediatePropagation() when:

• Emergency/critical operations that must run alone

• Security-related checks that should block other handlers

• When you absolutely need to prevent any other code from running for this event

• Debugging (temporarily to isolate event handlers)

Event Delegation

Event delegation is a technique where you attach a single event listener to a parent element instead of attaching multiple listeners to individual child elements.

The parent listens for events that bubble up from its children and handles them using event.target.

<ul id="todo-list">
  <li>Buy milk</li>
  <li>Walk dog</li>
  <li>Pay bills</li>
</ul>

// Good: Single listener on parent
document.getElementById('todo-list').addEventListener('click', (event) => {
  // event.target is the actual element clicked
  console.log('Clicked:', event.target.textContent);
});

Benefits of Event Delegation

1. One listener for all items (current AND future)

2. Better performance

3. Automatically handles dynamically added elements

Event delegation relies on event bubbling:

1. You click a child element

2. The event bubbles up through ancestors

3. The parent's listener catches it

4. Use event.target to identify which child was clicked

Before template literals (introduced in ES6, 2015), building strings with dynamic content was clunky and error-prone. Developers had to use the + operator to combine strings and variables.

const name = "Alice";
const age = 30;

// Old way: Using + operator
const message = "Hello, my name is " + name + " and I am " + age + " years old.";
console.log(message);
// Output: Hello, my name is Alice and I am 30 years old.

Issues:

• Hard to read with multiple variables

• Tedious for multi-line strings

• Error-prone with quotes and spacing

The Multi-line Nightmare:

javascript

const oldMultiLine = "This is line one.\n" +
" This is line two.\n" +
" This is line three.";
console.log(oldMultiLine);
// Output:
// This is line one.
// This is line two.
// This is line three.

This is messy, and the indentation looks awkward. You have to manually manage the line breaks and spaces.

The Solution - Template Literal Syntax

Template literals solve these problems with a simple syntax change: backticks (`) instead of quotes (' or ").

// Old way with quotes
const oldWay = "I am a normal string";

// New way with template literals (backticks)
const newWay = `I am a template literal string`;

console.log(oldWay);
console.log(newWay);

That's it! Any string enclosed in backticks is a template literal. But the real power comes from what you can do inside them.

Embedding Variables and Expressions (String Interpolation)

The most important feature of template literals is string interpolation. Instead of using + to break the string apart, you use a placeholder: ${expression}.

Basic Variable Embedding:

const name = "Bob";
const age = 25;

// Template literal way - much cleaner!
const message = `Hello, my name is \({name} and I am \){age} years old.`;
console.log(message);
// Output: Hello, my name is Bob and I am 25 years old.

The ${} placeholder can contain any JavaScript expression, not just variable names. It will evaluate the expression and convert the result to a string.

const a = 10; const b = 5;

// You can do math directly inside the placeholder console.log(The sum of \({a} and \){b} is ${a + b}.); // Output: The sum of 10 and 5 is 15.

// You can call methods const username = "Alice"; console.log(Your capitalized name is: ${username.toUpperCase()}); // Output: Your capitalized name is: ALICE

// You can even use ternary operators const price = 9.99; console.log(This item is ${price > 10 ? 'expensive' : 'cheap'}.); // Output: This item is cheap.

This eliminates the need for temporary variables and makes the string-building logic inline and clear.

Multi-line Strings

This is where template literals truly shine. You can create multi-line strings simply by writing them across multiple lines in your code
javascript

const multiLineMessage = `This is line one.
This is line two.
This is line three.`;

console.log(multiLineMessage);
// Output:
// This is line one.
// This is line two.
// This is line three.

Building HTML Snippet

const itemName = "Coffee Mug";
const itemPrice = 12.99;

const htmlSnippet = `
<div class="product-card">
    <h3>${itemName}</h3>
    <p class="price">$${itemPrice}</p>
    <button>Add to Cart</button>
</div>
`;

console.log(htmlSnippet);
// Output: A nicely formatted, multi-line HTML string.

Template literals are a fundamental improvement in JavaScript that make working with strings cleaner, more intuitive, and less error-prone. They are a must-use feature in any modern codebase.

Before we talk about "callbacks," we need to understand that JavaScript treats functions as "first-class citizens." This means you can handle a function just like any other piece of data.

You can:

• Store a function in a variable.

• Store a function in an array or object.

• Pass a function as an argument to another function.

// 1. Define a simple function (a "recipe" for an action)
function sayHello() {
    console.log("Hello there!");
}

// 2. Define another function that takes a function as an argument
function greeter( myFunction ) {
    console.log("About to run the passed function...");
    myFunction(); // 3. Call the function that was passed in
    console.log("Finished running the passed function.");
}

// 4. Pass 'sayHello' to 'greeter'. Notice we are NOT using parentheses 'sayHello()'.
//    We are passing the function itself, just like a variable.
greeter(sayHello);

// Output:
// About to run the passed function...
// Hello there!
// Finished running the passed function.

In this simple example, sayHello is a callback function. It's a function we "call back" later inside greeter.

What is a Callback Function?

A callback function is simply a function that is passed into another function as an argument. The "host" function can then execute (or "call back") the passed-in function at an appropriate time.

Think of it like Ordering Pizza Delivery:

You call the pizza place and place your order.
They ask for your phone number—that’s the callback.
You go about your day (asynchronous waiting).
When the pizza is ready, they call you back to deliver it.

In JavaScript terms: You pass a function (your phone number) into another function (the pizza order system), and it gets executed later when the task is complete.

Think of it like Laundry Service Pickup

• You schedule a laundry pickup and give them your address.

• The laundry van comes, picks up your clothes, and leaves.

• Later, when your laundry is done, they return it to your address.

Your address is the callback—a way for the service to know where to respond once the task is complete.

In JavaScript terms: You pass a function (your address) into another function (laundry service), and it gets called when the task (washing clothes) is finished.

Why Callbacks are Used in Asynchronous Programming

JavaScript is single-threaded and non-blocking. Callbacks allow:

• Reading a file from a hard drive.

• Making a network request to an API.

• Waiting for a timer (setTimeout).

• Querying a database.

The Problem of Callback Nesting

When callbacks are nested deeply:

doTask1(() => {
  doTask2(() => {
    doTask3(() => {
      doTask4(() => {
        console.log("All tasks done");
      });
    });
  });
});



getUserData(function(userData) {
    console.log("Got user data. Now fetching friends...");
    
    getFriendsList(userData.id, function(friendsList) {
        console.log("Got friends list. Now fetching first friend's picture...");
        
        getProfilePicture(friendsList[0].id, function(pictureData) {
            console.log("Got picture data!");
            
            // Now we have everything, we can update the UI
            updateUI(userData, friendsList, pictureData);
            
        }); // End of getProfilePicture callback
        
    }); // End of getFriendsList callback
    
}); // End of getUserData callback

This leads to:

1. Difficult to Read:

2. Hard to Maintain:

3. Poor Error Handling:

4. Inversion of Control:

Conceptual Fixes

Use named functions to reduce nesting
Adopt Promises or async/await for cleaner flow
Modularize logic into smaller reusable pieces

A nested array is a data structure where elements of an array can themselves be arrays.

Accessing Nested Arrays

const data = [10, 20, [30, 40]];

console.log(data[2]);      // [30, 40]
console.log(data[2][0]);   // 30
console.log(data[2][1]);   // 40

Why Use Nested Arrays?

Represent matrix (2D arrays)

• Store grouped data

• Useful in:

  • Games (grid systems)

  • Tables / rows & columns

  • Complex data structures

Why flattening arrays is useful

Flattening means converting a nested array (arrays within arrays) into a single-level array.

const nested = [1, [2, [3, [4]]]];
const flat = nested.flat(Infinity); // [1, 2, 3, 4]

Why Flattening Is Useful

• Simplifies data access: You can loop through or map over elements without checking for nested levels.

• Improves readability: Cleaner structure makes code easier to understand and maintain.

• Enables transformations: Useful when combining .map() and .flat() via .flatMap() for efficient data reshaping.

• Prepares data for APIs/UI: Many APIs return nested arrays; flattening helps normalize data for display or further processing.

• Reduces bugs: Avoids errors from unexpected nesting when performing operations like filtering or reducing.

So instead of dealing with multiple levels, you get a single, straightforward list.

Different approaches to flatten arrays

1. Using Array.prototype.flat() (Modern & Simple)

const arr = [1, [2, [3, [4]]]];
console.log(arr.flat(2));       // [1, 2, 3, [4]]
console.log(arr.flat(Infinity)); // [1, 2, 3, 4]

2. Using Array.prototype.flatMap() (Modern & Simple)
Combines mapping and flattening (only one level deep).

const words = ["hello", "world"];
const chars = words.flatMap(word => word.split(""));
console.log(chars); // ["h","e","l","l","o","w","o","r","l","d"]

• Best for: Transforming and flattening in one step

3. Using for loop recursion

function flattenArray(arr){
  if(!Array.isArray(arr) || arr.length === 0){
    return []
  }
  let resultArray = []
  for(let i =0; i< arr.length; i++){
    let element = arr[i];
    if(Array.isArray(element)){
      resultArray = resultArray.concat(flatArray(element))
    }else{
      resultArray.push(element)
    }
  }
  return resultArray

}


console.log("flattenArray", (flattenArray([1, 2, [3, 4, 5, [6, [8]]]])));

4. Using reduce + concat

function flattenArray(arr){
  if(!Array.isArray(arr) || arr.length === 0){
    return []
  }
  
  return arr.reduce((acc, curr)=> {
    if(Array.isArray(curr)){
      return acc.concat(flattenArray(curr))
    }else{
      return acc.concat(curr)
    }
  },[])

}

5. Using without recursion

function flattenArray(arr){
  if(!Array.isArray(arr) || arr.length === 0){
    return []
  }

  let stack = [...arr];
  let res = []

  while(stack.length){
    let cur = stack.pop();
    if(Array.isArray(cur)){
      stack.push(...cur)
    }else{
      res.push(cur)
    }
  }
  return res.reverse()
}

Real-World Examples

• API responses: Cleaning nested JSON data before analysis.

• Form inputs: Flatten grouped values for validation.

• Data pipelines: Streamline mapping, filtering, and reducing.

• UI components: Render nested lists as flat menus or tables.

Why modules are needed

Before modules, all JavaScript code lived in one giant file or shared a single "global space." This caused two major problems:

• Namespace Pollution: Two different scripts might use the same variable name (like user), causing one to overwrite the other.

• Maintainability: Finding a specific bug in a 5,000-line file is nearly impossible. Modules let you organize code by feature (e.g., auth.js, api.js).

Exporting functions or values

To make a piece of code available to the rest of your app, you must "publish" it using the export keyword.

// math.js
export function add(a, b) {
  return a + b;
}

export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

export const PI = 3.14;


// logger.js
export default function log(message) {
  console.log(message);
}

Importing modules

To use those functions in another file, you "request" them using the import keyword. You must provide the relative path to the file.

Importing Named Exports

import { add, PI } from './math.js';

Importing Default Export

import log from './logger.js';

You can also rename imports:

import { add as sum } from './math.js';

Default vs Named Exports

Benefits of Modular Code

• Improved readability: Each module has a clear purpose.

• Better performance: Modern bundlers can optimize module loading.

• Scoped variables: Avoids polluting the global namespace.

• Team collaboration: Easier to assign and manage responsibilities

Object-Oriented Programming (OOP) in JavaScript is used to organize code using objects, making the code more structured, reusable, and easier to maintain.

In large applications, writing everything as separate functions becomes messy. OOP allows you to group related data and functions together inside objects.

OOP allows us to control access to data.(Encapsulation)

OOP becomes useful when building large scalable systems, backend services, and complex frontend architectures.

JavaScript OOP is actually prototype-based and not class-based, even though we write classes

The "Syntactic Sugar" Reality

The class is Syntactic Sugar of JS
When you write class Person {} in JavaScript, the engine doesn't create a static class structure. Instead, it creates a function and attaches methods to its prototype property.

class Person {} console.log(typeof Person); // Output: "function"

A real-world analogy for OOP is a car factory Think of Class as a blueprint and Objects as actual cars built from that blueprint.

What is a Class in JavaScript?

A class is like a blueprint or design of a car.

The blueprint defines:

what properties the car will have
what actions the car can perform

class Car {
}

Here Car is a class that will be used to create car objects.

Creating Objects Using Classes
Objects are instances of a class.
We create objects using the new keyword.

class Car {}

const car1 = new Car();
const car2 = new Car();

Constructor Method

A constructor is a special method that runs automatically when an object is created.

It is mainly used to initialize object properties.

Example:

class Car {
  constructor(color, brand) {
    this.color = color;
    this.brand = brand;
  }
}

const car1 = new Car("Red", "Toyota");

constructor() sets the initial values of the object.

Methods Inside a Class

Methods are functions defined inside a class.
They represent actions that objects can perform.

Example:

class Car {
  constructor(color, brand) {
    this.color = color;
    this.brand = brand;
  }

  start() {
    console.log(this.brand + " car started");
  }

  stop() {
    console.log(this.brand + " car stopped");
  }
}

const car1 = new Car("Red", "Toyota");

car1.start();

Basic Idea of Encapsulation
Encapsulation means hiding internal data and controlling access to it.

Instead of directly modifying properties, we use methods to interact with the data.

Example:

class BankAccount {
  #balance = 0;

  deposit(amount) {
    this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount();

account.deposit(1000);
console.log(account.getBalance());

Here:

• #balance is private

• It cannot be accessed directly

• it allow only using method
  account.getBalance()

So encapsulation helps to:

• protect data

• control how data is used

let a = 10, b = 3;

// Basic arithmetic
console.log(a + b);   // 13 - Addition
console.log(a - b);   // 7  - Subtraction
console.log(a * b);   // 30 - Multiplication
console.log(a / b);   // 3.333... - Division
console.log(a % b);   // 1  - Modulus (remainder)

2. Comparison Operators

let a = 5, b = "5", c = 10;

// Equality
console.log(a == b);   // true - loose equality (compares value only)
console.log(a === b);  // false - strict equality (compares value AND type)

// Inequality
console.log(a != b);   // false - loose inequality
console.log(a !== b);  // true - strict inequality

// Relational
console.log(a > c);    // false - greater than
console.log(a < c);    // true - less than
console.log(a >= 5);   // true - greater than or equal
console.log(a <= 3);   // false - less than or equal

// Special comparisons
console.log(null == undefined);  // true
console.log(null === undefined); // false
console.log(NaN == NaN);         // false (NaN is not equal to anything)
console.log(isNaN(NaN));         // true - use isNaN() to check

3. Logical Operators

let isLoggedIn = true;
let hasPermission = false;
let age = 25;

// AND (&&) - all conditions must be true
console.log(isLoggedIn && hasPermission);     // false
console.log(isLoggedIn && age > 18);          // true

// OR (||) - at least one condition must be true
console.log(isLoggedIn || hasPermission);      // true
console.log(hasPermission || age < 18);        // false

// NOT (!) - inverts the boolean value
console.log(!isLoggedIn);                      // false
console.log(!hasPermission);                    // true

// Short-circuit evaluation
let user = null;
let defaultName = "Guest";

// Returns first truthy value
let name = user || defaultName;
console.log(name);  // "Guest"

4. Assignment Operators

let x = 10;  // Basic assignment

// Compound assignment
x += 5;      // x = x + 5 -> 15
console.log(x);

x -= 3;      // x = x - 3 -> 12
console.log(x);

x *= 2;      // x = x * 2 -> 24
console.log(x);

x /= 4;      // x = x / 4 -> 6
console.log(x);

x %= 4;      // x = x % 4 -> 2
console.log(x);

x **= 3;     // x = x ** 3 -> 8 (exponentiation)
console.log(x);

// Bitwise assignment (less common)
let y = 5;   // binary: 0101
y &= 3;      // y = y & 3 -> 1 (binary: 0001)
console.log(y);

// Logical assignment (ES12)
let a = null;
a ||= 10;    // a = a || 10 -> 10 (assigns if falsy)
console.log(a);

let b = 5;
b &&= 3;     // b = b && 3 -> 3 (assigns if truthy)
console.log(b);

let c = null;
c ??= 20;    // c = c ?? 20 -> 20 (assigns if null/undefined)
console.log(c);

'this'
The first thing that defines JavaScript is how it uses this.

this doesn't exist in other languages at the same level or in the same way it exists in JS.
JavaScript makes itself unique (and tricky) by this.

When we check the position of this in the browser

console.log(this)

We will receive the window object.

Run in the Node environment

console.log("this ===>", this)

We will receive

this ===> {}

Its use depends on the context.

When we run the below function in Node

node script.js

function ranveerOnGlobalStage() {
  return typeof this;
}
console.log("ranveerOnGlobalStage ==>", ranveerOnGlobalStage());

we will get

ranveerOnGlobalStage ==> undefined

because Node.js wraps every file inside a function internally and global is Node.js-specific.

If a function is not running in the global environment or it is in functional scope, at that time you will get typeof undefined instead of Object.

It means the function is not running in the real global scope or Node has enabled "use strict" mode by default.

Now interestingly you can make it global stage by using the call method.

console.log(ranveerOnGlobalStage.call(global));

Now you will return the global object of Node.

function ranveerOnGlobalStage() {
  return typeof this;
}
console.log("ranveerOnGlobalStage ==>", ranveerOnGlobalStage.call(global));

we will get

ranveerOnGlobalStage ==> object

How global and globalThis work you can check my link below

https://node-js.hashnode.dev/understanding-global-vs-globalthis-in-javascript-and-node-js

function ranveerWithNoScript() {
  return this;
}
console.log(ranveerWithNoScript()); // => return undefined
console.log(ranveerWithNoScript.call(global));

return <ref *1> Object [global] { global: [Circular *1], .....

What will output in the below function?

Guess where this is pointing.

If we run the code below

const bollywoodFilm2 = {
  name: "Dhurandhar",
  lead: "Ranveer",
  
  introduce() {
    return `\({this.lead} performs in \){this.name}`;
  },
};

console.log(bollywoodFilm2.introduce());

we will get

Ranveer performs in Dhurandhar

because here this context is available.

What can we expect this in the below function?

This is an arrow function.

const filmDirector = {
  name: "Sanjay Leela Bhansali",
  cast: ["Ranveer", "Deepika", "Priyanka"],

  announceCast() {
   this.cast
    .forEach((actor) => {
      console.log(`\({this.name} introduces \){actor}`);
    });
  },
};

filmDirector.announceCast()

What we observe is that the arrow function has printed this.

Normally arrow functions don't support this in the global environment, but here:

Arrow functions don't have their own this binding.

They inherit this from the surrounding (lexical) scope.

Sanjay Leela Bhansali introduces Ranveer
Sanjay Leela Bhansali introduces Deepika
Sanjay Leela Bhansali introduces Priyanka

If you want to know about arrow functions, you can check out my blog link on arrow functions

https://js-functions.hashnode.dev/

How can we expect the output in the below function with a nested arrow function?

const filmSet = {
  crew: "Spot boys",
  prepareProps() {
    console.log(`Outer this.crew: ${this.crew}`);

    const arrangeLights = () => {
      console.log(`Arrow this.crew: ${this.crew}`);
    };
    arrangeLights();
  },
};

filmSet.prepareProps();

Outer this.crew: Spot boys
Arrow this.crew: Spot boys

because this context is available, we receive the result.

They inherit this from the surrounding (lexical) scope.

What can we expect the result from the regular nested function?

const filmSet4 = {
  crew: "Spot boys",
  prepareProps() {
    console.log(`Outer this.crew: ${this.crew}`);

    function arrangeChairs() {
      console.log(`Inner this.crew: ${this.crew}`);
    }
    arrangeChairs();
  },
};

filmSet4.prepareProps();

Here we are calling the nested function without this context and defining it as a standalone method.

It's JavaScript behavior that here we lose the this context and get undefined.

arrangeChairs();

How can we fix it?

const filmSet5 = {
  crew: "Spot boys",
  prepareProps() {
    console.log(`Outer this.crew: ${this.crew}`);

    function arrangeChairs() {
      console.log(`Inner this.crew: ${this.crew}`);
    }
    arrangeChairs.bind(this);
  },
};

filmSet5.prepareProps();

The same function behaves differently based on how it's called:

function greet() {
  return console.log(`Hello, I'm ${this.name}`);
}

const person = { name: "Advait", greet };

console.log(person.greet()); 
console.log(greet.call(person1)); 
console.log(greet.apply(person1));

This is why JavaScript is said to have dynamic this binding — the value of this is determined at call-time, not at definition-time.

Now check the regular function without nested

function greet() {
  return console.log(`Hello, I'm ${this.name}`);
}

const person1 = { name: "Advait", greet };

// Hello, I'm Advait
console.log(person1.greet());
console.log(greet.call(person1));

And check the arrow function without nested in the global state

const greet = () => {
  console.log(`Hello, I'm Arrow function ${this.name}`);
};

const person2 = { name: "Alice", greet };
person2.greet();

// Hello, I'm Arrow function undefined

Not receiving the this context, it inherits this from the surrounding (lexical) scope.

Another classic JavaScript this binding pitfall

const actor = {
  name: "Ranveer",
  bow() {
    return `${this.name} takes a bow`;
  },
};

const detachedBow = actor.bow;
console.log(detachedBow());

Functions in JS are first-class citizens.

actor.bow is a reference to the function, not copying the object.

When called as actor.bow(), the object before the dot sets this.

When assigned to a variable and called directly, there's no object before the dot, so this defaults to global/undefined.

Solution

const boundBow = actor.bow.bind(actor);

Conclusion behaviour of JS

Regular function has its own this in the global state.

It depends purely on HOW the function is called.

But they don't have this in nested functions until you set it using the .call method.

It doesn't have variable access there. In detached methods also it doesn't have variable access there.

Arrow functions don't have their own this in the global state.

They don't have variable access there, but in nested functions they capture the outer scope this.

They take the reference of the variable.

Regular function: this is dynamic (call-site based), creates new memory

Arrow function: this is lexical (scope based)

Behind the scene

When JS runs code, it creates:

1. Lexical Environment (Scope / Variables Memory)

2. Execution Context (Includes this)

this is NOT part of the normal variable scope.

It lives in the Execution Context, not inside the lexical variable environment.

The Core Purpose of call, apply, and bind.

call, apply, and bind allow you to explicitly define what this should refer to, regardless of the calling context.

1. call()

The call() method invokes a function immediately.

function cookDish(ingredient, style){
    return `\({this.name} prepares \){ingredient} in ${style} style !`
}

const guptaKitchen = {name : "Gupta jis kitchen"}

console.log(cookDish.call(guptaKitchen,"Panner bhrju", "Novaeg"));

2. apply()

The apply() method is almost identical to call(), but instead of passing arguments individually, you pass them as a single array.

function cookDish(ingredient, style){
    return `\({this.name} prepares \){ingredient} in ${style} style !`
}

const guptaOrder = ["Chole kulche", "Punjabi Dhaba"]

console.log(cookDish.apply(guptaKitchen, guptaOrder));

const bills = [100, 30, 45, 50];
console.log(Math.max.apply(null, bills))

3. bind()

Unlike the other two, bind() does not execute the function immediately. Instead, it returns a new copy of the function with the this value permanently set to the provided object.

function reportDelivery(location, status){
    return `\({this.name} at \){location}: ${status}`;
}
const deliveryBoy = { name: "Ranveer" };

console.log("Call", reportDelivery.call(deliveryBoy, "Mumbai", "Order"))
console.log("apply", reportDelivery.call(deliveryBoy, ["Moon", "Pending"]))
console.log("Bind", reportDelivery.bind(deliveryBoy, ("Haridwar", "What")))

const bindReport = reportDelivery.bind(deliveryBoy)
console.log(bindReport("Haridwar", "What"));

More than The Core Purpose of this binding

1.Function Borrowing

const calculator = {
  value: 0,
  add(num) { this.value += num; return this; },
  subtract(num) { this.value -= num; return this; }
};

const otherCalc = { value: 10 };

// Borrow methods from calculator
calculator.add.call(otherCalc, 5);
calculator.subtract.apply(otherCalc, [3]);
console.log(otherCalc.value); // 12

// Borrow array methods for array-like objects
const arrayLike = { 0: 'a', 1: 'b', length: 2 };
const realArray = Array.prototype.slice.call(arrayLike);
console.log(realArray); // ['a', 'b']

**2.**Partial Application (Currying)

function multiply(x, y, z) {
  return x * y * z;
}

// Create specialized functions
const multiplyByTwo = multiply.bind(null, 2);
const multiplyByTwoAndThree = multiply.bind(null, 2, 3);

console.log(multiplyByTwo(4, 5));     // 2 * 4 * 5 = 40
console.log(multiplyByTwoAndThree(5)); // 2 * 3 * 5 = 30

3. Function Composition

function compose(...functions) {
  return functions.reduce((f, g) => 
    (...args) => f.call(null, g.apply(null, args))
  );
}

const addOne = x => x + 1;
const double = x => x * 2;
const square = x => x * x;

const composed = compose(addOne, double, square);
console.log(composed(3)); // square(3) = 9, double(9) = 18, addOne(18) = 19

In JavaScript, functions are first-class citizens, which means they can be:

• stored in variables

• passed as arguments

• returned from other functions

Function Declaration

When we write a function with a function name, it is called a function declaration.

Function declarations are fully hoisted in memory, so they can be used before their declaration in the code.

Example:

function greet(name) {
    return `Hello, ${name}!`;
}

Anonymous functions cannot be used directly in function declarations.

Example of an anonymous function:

function() {}

This will not work as a function declaration because it has no name.

Function Expression

When we assign a function to a variable, it is called a function expression.

Function expressions are not fully hoisted, so they cannot be used before they are defined.

Example:

const greet = function(name) {
    return `Hello, ${name}!`;
};

A function expression can be an anonymous function.

Example:

const anonymous = function() {};

It can also be a named function expression.

Example:

const named = function func() {};

Hoisting Difference

We can see the difference using the following examples.

Function Declaration (Works)

sayHello("John"); // "Hello, John!"

function sayHello(name) {
    return `Hello, ${name}!`;
}

Function Expression (Error)

sayHi("John"); // ReferenceError: Cannot access before initialization

const sayHi = function(name) {
    return `Hi, ${name}!`;
};

Arrow functions is another very simple and concise syntax for creating functions,
that’s often better than Function Expressions and is written: a
() => {},

where => is called the fat-arrow or just arrow.

In arrow function must be
1.declare after initialize (Call after definition)
2.Arrow functions work great as callbacks:, in setTimeout,forEach, map, filter reduce ...

When we defined using curley brace it explicitly return

const square = x => {
  return x * x;
};
// Two parameters
const add = (a, b) => {
  return a + b;
};
// Three parameters
const calculate = (x, y, z) => {
  return (x + y) * z;
};

when we are not used the curley brace in arrow funtion it implicitly return

const square = x => x * x;
const add = (a, b) => a + b;
const sum = (...args) => args.reduce((a, b) => a + b, 0);
sum(1, 2, 3); // 6

// Trying to use arguments inside arrow throws ReferenceError
const noArgs = () => console.log(arguments); // ReferenceError

what are difference between arrow function and normal function?

Arrow Function
1.Does not have its own this. It inherits this from the surrounding (lexical) scope where it is defined.

2.The value of this inside an arrow function is fixed and cannot be changed by .call(), .apply(), or .bind().

3.Does not have its own arguments object. If you need access to arguments, you must use rest parameters or rely on the enclosing function's arguments.

4.Cannot be used as a constructor. Trying to use new with an arrow function throws an error..