learning-zone/javascript-basics

JavaScript Basics

Click ★ if you like the project. Your contributions are heartily ♡ welcome.

Related Topics

• HTML Basics
• CSS Basics
• JavaScript ES6 Basics
• JavaScript Unit Testing
• JavaScript Coding Practice
• JavaScript Program Writing
• JavaScript Multiple Choice Questions
• JavaScript Design Patterns
• Data Structure in JavaScript

Table of Contents

L1: Fundamental (Entry-Level / Junior)

Focus: Syntax, basic logic, and standard data handling.

• Introduction: ES6 new features
• Variables: var, let, const.
• Data Types: Primitives vs. Objects.
• Operators: Arithmetic, comparison (== vs ===), and logical.
• Numbers: isNaN, isFinite, NEGATIVE_INFINITY
• String: slice, splice, trim, eval, replace
• Arrays: Basic manipulation using push(), pop(), shift, indexOf etc.
• Control Flow: Simple if/else and for loops.
• Functions: Standard declarations and parameters.

L2: Intermediate (Junior-Mid / Developer)

Focus: ES6+ features, DOM, and common "trick" concepts.

• Scope & Closures: Understanding block scope and lexical scoping.
• Hoisting: Variable and function declarations.
• ES6 Features: Arrow functions, template literals, and destructuring.
• DOM & Events: Selecting elements, adding listeners, and event bubbling.
• Regular Expressions: Basic pattern matching using RegExp.
• Error Handling: Using try...catch.
• Web Storage: localStorage and sessionStorage.

L3: Advanced (Mid-Senior / Lead)

Focus: Asynchronous operations, performance, and internal engine mechanics. [4]

• Promises: Promise, PromiseAll, PromiseRace
• Async & Await: Handling complex asynchronous flows.
• Event Loop: Understanding the microtask vs. macrotask queue.
• this Keyword: Binding with .call(), .apply(), and .bind().
• Objects & Prototypes: Prototypal inheritance and the prototype chain.
• Functional Programming: High-order functions like map, filter, and reduce.
• Classes: Inheritance, constructors, and static methods.
• Collections: Map, Set, WeakMap, WeakSet
• Modules: ES Modules (import/export).

L4: Expert (Senior / Architect)

Focus: Scalability, security, and low-level optimization.

• Performance Optimization: Memoization, debouncing/throttling, and avoiding memory leaks.
• Design Patterns: Singleton, Factory, and Pub-Sub patterns.
• Security: Preventing XSS, CSRF, and secure data handling.
• Browser Internals: Rendering behavior, reflows, and repaints.
• Progressive Web Apps (PWA): Service workers and caching strategies.
• Complex Problem Solving: Coding simulators for real-world algorithmic tasks.

L5: Technical Lead

Focus: Code review, team standards, architectural decisions, and engineering best practices for leading a development team.

• Code Review & Standards: Identifying anti-patterns, enforcing conventions, and reviewing PRs.
• Async Strategy & Team Patterns: Choosing and enforcing async patterns across a codebase.
• Module Architecture: Organizing modules, barrel files, and dependency management.
• Error Handling Strategy: Centralized error handling and observability.
• Performance Review: Reviewing code for layout thrashing, memory leaks, and bundle size.

L6: Technical Architect

Focus: System-level design, scalability, security posture, micro-frontend, and cross-team JavaScript architecture.

• Micro-Frontend Architecture: Module federation, iframe isolation, and shared dependencies.
• Bundle & Runtime Optimization: Tree-shaking, code-splitting, and Web Workers.
• Security Architecture: CSP headers, CORS configuration, and supply chain security.
• State Management at Scale: Choosing state patterns for large distributed frontend teams.
• Migration & Evolution: Framework migrations, progressive TypeScript adoption, and API versioning.
• Miscellaneous: Strict Mode, Polyfill, Virtual DOM, Rendering Pipeline, Browser Engine.

L1: Fundamental (Entry-Level / Junior)

# 1. Introduction

Q. List out important features of JavaScript ES6?

1. Template Strings:

Template literals are string literals allowing embedded expressions.

Benefits:

• String interpolation
• Embedded expressions
• Multiline strings without hacks
• String formatting
• String tagging for safe HTML escaping, localization and more

// String Substitution
let name = `Abhinav Sharma`;
console.log(`Hi, ${name}`); // Output: "Hi, Abhinav Sharma"

// Multiline String
let msg = `Hello \n
World`;
console.log(`${msg}`); // Output: "Hello World"

⚝ Try this example on CodeSandbox

2. Spread Operator:

Spread operator allows iterables( arrays / objects / strings ) to be expanded into single arguments/elements.

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [10, 20, 30];

// Using Apply (ES5)
console.log(sum.apply(null, numbers)); // 60

// Using Spread Operator
console.log(sum(...numbers)); // 60

⚝ Try this example on CodeSandbox

2.1. Copying an array:

const fruits = ["Apple", "Orange", "Banana"];
const newFruitArray = [...fruits];

console.log(newFruitArray); 

Output:

['Apple', 'Orange', 'Banana']

⚝ Try this example on CodeSandbox

2.2. Concatenating arrays:

const arr1 = ["A", "B", "C"];
const arr2 = ["X", "Y", "Z"];

const result = [...arr1, ...arr2];

console.log(result); 

Output:

['A', 'B', 'C', 'X', 'Y', 'Z']

⚝ Try this example on CodeSandbox

2.3. Spreading elements together with an individual element:

const fruits = ["Apple", "Orange", "Banana"];
const newFruits = ["Cherry", ...fruits];

console.log(newFruits); 

Output:

['Cherry', 'Apple', 'Orange', 'Banana']

⚝ Try this example on CodeSandbox

2.4. Spreading elements on function calls:

const fruits = ["Apple", "Orange", "Banana"];

const getFruits = (f1, f2, f3) => {
  console.log(`Fruits: ${f1}, ${f2} and ${f3}`);
};

getFruits(...fruits); 

Output:

Fruits: Apple, Orange and Banana

⚝ Try this example on CodeSandbox

2.5. Spread syntax for object literals:

const obj1 = { id: 101, name: 'Rajiv Sandal' }
const obj2 = { age: 35, country: 'INDIA' }

const employee = { ...obj1, ...obj2 }

console.log(employee);

Output:

{
  "id": 101,
  "name": "Rajiv Sandal",
  "age": 35,
  "country": "INDIA"
}

3. Sets:

Sets are a new object type with ES6 (ES2015) that allow to create collections of unique values. The values in a set can be either simple primitives like strings or integers, but more complex object types like object literals or arrays can also be part of a set.

const numbers = new Set([10, 20, 20, 30, 40, 50]);

console.log(numbers); Set(5) { 10, 20, 30, 40, 50 }
console.log(typeof numbers); // Object

⚝ Try this example on CodeSandbox

4. Default Parametrs:

function add(x = 10, y = 20) {
  console.log(x + y);
}

add(10, 30); // Output: 10 + 30 = 40
add(15); // Output: 15 + 20 = 35
add(); // Output: 10 + 20 = 30

⚝ Try this example on CodeSandbox

5. repeat():

The repeat() method constructs and returns a new string which contains the specified number of copies of the string on which it was called, concatenated together.

const msg = "Hello World \n";

console.log(`${msg.repeat(3)}`);

Output:

Hello World
Hello World
Hello World

⚝ Try this example on CodeSandbox

6. Arrow Function (=>):

const add = (x, y) => x + y;

console.log(add(10, 20)); // 30

⚝ Try this example on CodeSandbox

7. Arrow function with this

/**
 * Using Arrow function
 */
const person = {
  name: "Diksha",
  actions: ["bike", "hike", "ski"],
  printActions() {
    this.actions.forEach((action) => {
      console.log(this.name + " likes to " + action);
    });
  },
};

person.printActions();

Output:

Diksha likes to bike 
Diksha likes to hike 
Diksha likes to ski

⚝ Try this example on CodeSandbox

8. Destructing Assignment:

// Destructing Assignment
const { title, price, description } = {
  title: "iPhone",
  price: 999,
  description: "The iPhone is a smartphone developed by Apple"
};

console.log(title); // iPhone
console.log(price); // 999
console.log(description); // The iPhone is a smartphone developed by Apple

⚝ Try this example on CodeSandbox

9. Generators:

A generator is a function that can stop midway and then continue from where it stopped. In short, a generator appears to be a function but it behaves like an iterator.

function* generator(num) {
  yield num + 10;
  yield num + 20;
  yield num + 30;
}
const gen = generator(10);

console.log(gen.next().value); // 20
console.log(gen.next().value); // 30
console.log(gen.next().value); // 40

⚝ Try this example on CodeSandbox

10. Symbols:

They are tokens that serve as unique IDs. We create symbols via the factory function Symbol(). Symbols primary use case is for making private object properties, which can be only of type String or Symbol (Numbers are automatically converted to Strings).

const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol("Hi");

console.log(typeof symbol1); // symbol
console.log(symbol3.toString()); // Symbol(Hi)
console.log(Symbol("Hi") === Symbol("Hi")); // false

⚝ Try this example on CodeSandbox

11. Iterator:

The iterable is a interface that specifies that an object can be accessible if it implements a method who is key is [symbol.iterator].

const title = "ES6";
const iterateIt = title[Symbol.iterator]();

console.log(iterateIt.next().value); //output: E
console.log(iterateIt.next().value); //output: S
console.log(iterateIt.next().value); //output: 6

⚝ Try this example on CodeSandbox

# 2. VARIABLES

Q. What are global variables?

Global variables are declared outside of a function or declared with a window object for accessibility throughout the program (unless shadowed by locals). If you declare a variable without using var, even if it's inside a function, it will still be seen as global.

The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

Example:

var x = 10;

if (x === 10) {
  var x = 20;

  console.log(x); // expected output: 20
}

console.log(x); // expected output: 20

Example: Declaring global variable within function

window.value = 90;

// Declaring global variable by window object
function setValue() {
  window.value = 100;
}

// Accessing global variable from other function
function getValue() {
  setValue();
  return window.value;
}

console.log(getValue()); // 100

Using Undeclared Variables:

• In strict mode, if you attempt to use an undeclared variable, you'll get a reference error when you run your code.
• Outside of strict mode, however, if you assign a value to a name that has not been declared with let, const, or var, you'll end up creating a new global variable. It will be global no matter how deeply nested within functions and blocks your code is, which is almost certainly not what you want, is bug-prone, and is one of the best reasons for using strict mode!
• Global variables created in this accidental way are like global variables declared with var: they define properties of the global object. But unlike the properties defined by proper var declarations, these properties can be deleted with the delete operator.

⚝ Try this example on CodeSandbox

Q. What are template literals in es6?

Template literals help make it simple to do string interpolation, or to include variables in a string.

const person = { name: 'Tyler', age: 28 };

console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
// 'Hi, my name is Tyler and I am 28 years old!'

Template literals, however, preserve whatever spacing you add to them. For example, to create that same multi-line output that we created above, you can simply do:

console.log(`This is line one.
This is line two.`);
// This is line one.
// This is line two.

Another use case of template literals would be to use as a substitute for templating libraries for simple variable interpolations:

const person = { name: 'Tyler', age: 28 };

document.body.innerHTML = `
  <div>
    <p>Name: ${person.name}</p>
    <p>Name: ${person.age}</p>
  </div>
`

Q. What are the differences between variables created using let, var or const?

Variables declared using the var keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. let and const are block scoped, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).

/**
 * All variables are accessible within functions.
 */
function variableScope() {

  var x = 10;
  let y = 20;
  const z = 30;

  console.log(x); // 10
  console.log(y); // 20
  console.log(z); // 30
}

console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined
console.log(z); // ReferenceError: z is not defined

variableScope();

/**
 * var declared variables are accessible anywhere in the function scope.
 */
if (true) {
  var a = 10;
  let b = 20;
  const c = 30;
}

console.log(a); // 10
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined

var allows variables to be hoisted, meaning they can be referenced in code before they are declared. let and const will not allow this, instead throwing an error.

console.log(a); // undefined
var a = 'foo';

console.log(b); // ReferenceError: can\'t access lexical declaration 'b' before initialization
let b = 'baz';

console.log(c); // ReferenceError: can\'t access lexical declaration 'c' before initialization
const c = 'bar';

Redeclaring a variable with var will not throw an error, but 'let' and 'const' will.

var a = 'foo';
var a = 'bar';
console.log(a); // "bar"

let b = 'baz';
let b = 'qux'; // Uncaught SyntaxError: Identifier 'b' has already been declared

let and const differ in that let allows reassigning the variable's value while const does not.

// This is ok.
let a = 'foo';
a = 'bar';
console.log(a); // bar

// This causes an exception.
const b = 'baz';
b = 'qux';
console.log(b) // TypeError: Assignment to constant variable.

⚝ Try this example on CodeSandbox

Q. What is the purpose of double exclamation?

The double exclamation mark (!!) in JavaScript forces any value into its corresponding strict boolean representation (true or false). The !! (double negation) operator converts any value to its boolean equivalent:

• First ! negates the value (converting it to a boolean)
• Second ! negates it again, giving the true boolean representation

Example:

console.log(!!0);         // false
console.log(!!"");        // false
console.log(!!null);      // false
console.log(!!undefined); // false
console.log(!!NaN);       // false

console.log(!!1);         // true
console.log(!!"text");    // true
console.log(!!{});        // true
console.log(!![]);        // true

Note: It's commonly used to explicitly cast a value to boolean without using Boolean(value).

Q. In JavaScript, what is the difference between var x = 1 and x = 1?

The primary difference is that var x = 1 explicitly declares a function-scoped or globally-scoped variable, whereas x = 1 assigns a value to an identifier without declaring it, which can lead to global scope pollution or runtime errors depending on your code's strictness mode

var x = 1:

• Allowed in 'strict mode'.
• The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.
• Variables declared using var inside a { } block can be accessed from outside the block.
• Variables defined using var inside a function are not accessible (visible) from outside the function.
• Duplicate variable declarations using var will not trigger an error, even in strict mode, and the variable will not lose its value unless another assignment is performed.

Example:

var x = 1;

if (x === 1) {
  var x = 2;

  console.log(x); // expected output: 2
}

console.log(x); // expected output: 2

var x = 5; // global
function someThing(y) {
  var x = 3; // local
  var z = x + y;
  console.log(z);
}
someThing(4); // 7
console.log(x); // 5

x = 1:

• Not allowed in 'strict mode'.
• Undeclared Variables like: x = 1 is accessible in: (Block scope - Function scope - Global scope)
• Outside of strict mode, however, if you assign a value to a name that has not been declared with let, const, or var, you'll end up creating a new global variable. It will be global no matter how deeply nested within functions and blocks your code is, which is almost certainly not what you want, is bug-prone, and is one of the best reasons for using strict mode!
• Global variables created in this accidental way are like global variables declared with var they define properties of the global object.
• Unlike the properties defined by proper var declarations, these properties can be deleted with the delete operator.
• Not recommended.

Example:

var x = 5; // global
function someThing(y) {
  x = 1; // still global!
  var z = x + y;
  console.log(z);
}
someThing(4) // 5
console.log(x) // 1

Example:

{
  console.log(x + y); // NaN
  var x = 1;
  var y = 2;
}

{
  console.log(x + y); // Uncaught ReferenceError: x is not defined
   x = 1;
   y = 2;
}

Q. How do you assign default values to variables?

In JavaScript, you can assign default values to variables using several modern and legacy approaches, depending on the exact conditions you want to check.

1. OR operator (||)

let name = userInput || "Default";
// Uses "Default" if userInput is falsy (0, "", null, undefined, false)

2. Nullish coalescing (??) (preferred)

let name = userInput ?? "Default";
// Uses "Default" only if userInput is null or undefined (not 0 or "")

3. Destructuring defaults

const { name = "John", age = 25 } = user;
const [first = 0, second = 0] = arr;

4. Function parameter defaults

function greet(name = "World") {
  return `Hello, ${name}!`;
}
greet();        // "Hello, World!"
greet("Alice"); // "Hello, Alice!"

5. Logical OR assignment (||=)

let x = null;
x ||= "default"; // x = "default"

6. Nullish assignment (??=)

let x = 0;
x ??= "default"; // x stays 0 (not null/undefined)

Key difference between || and ??:

let count = 0;
count || 10;  // 10  — 0 is falsy, so falls back
count ?? 10;  // 0   — 0 is not null/undefined, so keeps it

Note: Use ?? when 0, "", or false are valid values.

Q. What is the precedence order between local and global variables?

Local variables always take precedence over global variables within their scope.

let x = "global";

function example() {
  let x = "local";
  console.log(x); // "local" — local shadows the global
}

example();
console.log(x); // "global" — unchanged

Scope chain — JavaScript looks up variables from innermost to outermost:

let x = "global";

function outer() {
  let x = "outer";

  function inner() {
    let x = "inner";
    console.log(x); // "inner"
  }

  inner();
  console.log(x); // "outer"
}

outer();
console.log(x); // "global"

If no local variable exists, it walks up the chain:

let x = "global";

function example() {
  console.log(x); // "global" — no local x, found in outer scope
}

Shadowing pitfall:

let x = "global";

function example() {
  console.log(x); // ReferenceError (TDZ) — let/const are hoisted but not initialized
  let x = "local";
}

Precedence order (innermost → outermost):

1. Local (block/function) scope
2. Enclosing/closure scopes
3. Module scope
4. Global scope (window / globalThis)

⚝ Try this example on CodeSandbox

Q. What is variable shadowing in javascript?

Variable shadowing occurs when a variable declared within a certain scope (decision block, method, or inner class) has the same name as a variable declared in an outer scope. This outer variable is said to be shadowed.

If there is a variable in the global scope, and you'd like to create a variable with the same name in a function. The variable in the inner scope will temporarily shadow the variable in the outer scope.

Example:

let x = "global";

function example() {
  let x = "local"; // shadows the global x
  console.log(x);  // "local"
}

example();
console.log(x); // "global" — outer x is unaffected

Block-level shadowing (let/const):

let msg = "outside";

if (true) {
  let msg = "inside"; // shadows outer msg
  console.log(msg);   // "inside"
}

console.log(msg); // "outside"

var does NOT shadow at block level (only at function level):

var msg = "outside";

if (true) {
  var msg = "inside"; // overwrites, not shadows!
  console.log(msg);   // "inside"
}

console.log(msg); // "inside" — original was overwritten!

Nested function shadowing:

let value = 1;

function outer() {
  let value = 2;        // shadows global

  function inner() {
    let value = 3;      // shadows outer
    console.log(value); // 3
  }

  inner();
  console.log(value);   // 2
}

outer();
console.log(value);     // 1

Note:

• Shadowing does not modify the outer variable
• let/const shadow at block level; var only at function level
• Can cause bugs when unintentional — use distinct variable names to avoid confusion

Q. What is scope chain in javascript?

The scope chain is the mechanism JavaScript uses to resolve variable references by searching through nested scopes from innermost to outermost until the variable is found (or a ReferenceError is thrown).

Example::

let globalVar = "I'm a global variable";

function outer() {
  let outerVar = "I'm an outer variable";

  function inner() {
    let innerVar = "I'm an inner variable";
    console.log(innerVar); // "I'm an inner variable"
    console.log(outerVar); // "I'm an outer variable"
    console.log(globalVar); // "I'm a global variable"
  }

  inner();
}

outer();

Note:

• The chain is created at function definition time (lexical scoping), not at call time
• It only goes outward — outer scopes cannot access inner variables
• Closures work because inner functions retain a reference to their outer scope chain

# 3. DATA TYPES

Q. What are data types in javascript?

There are eight basic data types in JavaScript.

String:

String is used to store text. In JavaScript, strings are surrounded by quotes:

• Single quotes: 'Hello'
• Double quotes: "Hello"
• Backticks: `Hello`

Example::

// Strings
const firstName = "Mukul";
const lastName = "Mittal";
const result = `Name: ${firstName} ${lastName}`;

console.log(result); // Name: Mukul Mittal

console.log(typeof result); // string

Number:

Number represents integer and floating numbers (decimals and exponentials). A number type can also be +Infinity, -Infinity, and NaN (not a number).

const number1 = 3;
const number2 = 3.433;
const number3 = 3e5; // 3 * 10^5

const number4 = 3 / 0;
console.log(number4); // Infinity
console.log(typeof number4) // number

const number5 = -3 / 0;
console.log(number5); // -Infinity
console.log(typeof number5); // number

// strings can\'t be divided by numbers
const number6 = "abc" / 3;
console.log(number6); // NaN
console.log(typeof number6); // number

BigInt:

In JavaScript, Number type can only represent numbers less than (2⁵³ - 1) and more than -(2⁵³ - 1). However, if you need to use a larger number than that, you can use the BigInt data type.

A BigInt number is created by appending n to the end of an integer.

// BigInt value
const num1 = 100000000000000000n;
const num2 = 1000000000000000000n;
const num3 = 10;

// Adding two big integers
const result1 = num1 + num2;
console.log(result1); // "1100000000000000000n"
console.log(typeof result1); // bigint

// Error! BitInt and number cannot be added
const result2 = num1 + num2 + num3;
console.log(result2); // Uncaught TypeError: Cannot mix BigInt and other types
console.log(typeof result2); // Uncaught TypeError: Cannot mix BigInt and other types

Boolean:

This data type represents logical entities. Boolean represents one of two values: true or false.

const dataChecked = true;
const valueCounted = false;

undefined:

The undefined data type represents value that is not assigned. If a variable is declared but the value is not assigned, then the value of that variable will be undefined.

let name;
console.log(name); // undefined

let name = undefined;
console.log(name); // undefined

null:

In JavaScript, null is a special value that represents empty or unknown value.

const number = null;

Symbol:

A value having the data type Symbol can be referred to as a symbol value. Symbol is an immutable primitive value that is unique.

// Two symbols with the same description

const value1 = Symbol('hello');
const value2 = Symbol('hello');

let result = (value1 === value2) ? true : false;  // false;

// Note: Though value1 and value2 both contain 'hello', they are different as they are of the Symbol type.

Object:

An object is a complex data type that allows us to store collections of data.

const employee = {
    firstName: 'John',
    lastName: 'K',
    email: '[email protected]'
};

Q. What is undefined property?

The undefined property indicates that a variable has not been assigned a value, or not declared at all. The type of undefined value is undefined too.

var user;    // Value is undefined, type is undefined
console.log(typeof(user)) //undefined

Any variable can be emptied by setting the value to undefined.

user = undefined

Q. What is difference between null vs undefined?

Null:

Null means an empty or non-existent value. Null is assigned, and explicitly means nothing.

var test = null;
console.log(test); // null

null is also an object. Interestingly, this was actually an error in the original JavaScript implementation:

console.log(typeof test); // object

Undefined:

Undefined means a variable has been declared, but the value of that variable has not yet been defined. For example:

var test2;
console.log(test2); // undefined

Unlike null, undefined is of the type undefined:

console.log(typeof test2); // undefined

Difference:

Q. What is Coercion in JavaScript?

Type coercion is the automatic or implicit conversion of values from one data type to another (such as strings to numbers). Type conversion is similar to type coercion because they both convert values from one data type to another with one key difference — type coercion is implicit whereas type conversion can be either implicit or explicit.

Example:

const value1 = '10';
const value2 = 20;

let sum = value1 + value2;

console.log(sum);

In the above example, JavaScript has coerced the 10 from a number into a string and then concatenated the two values together, resulting in a string of 1020. JavaScript had a choice between a string or a number and decided to use a string.

// Example of explicit coercion
const value1 = '10';
const value2 = 20;

let sum = Number(value1) + value2;

console.log(sum);

# 4. OPERATORS

Q. What are various operators supported by javascript?

An operator is capable of manipulating (mathematical and logical computations) a certain value or operand. There are various operators supported by JavaScript as below,

Arithmetic Operators:

Arithmetic operators are used to perform mathematical operations between numeric operands.

Comparison Operators:

JavaScript provides comparison operators that compare two operands and return a boolean value true or false.

Logical Operators:

The logical operators are used to combine two or more conditions.

1. && - is known as AND operator. It checks whether two operands are non-zero or not (0, false, undefined, null or "" are considered as zero). It returns 1 if they are non-zero; otherwise, returns 0

2. || - is known as OR operator. It checks whether any one of the two operands is non-zero or not (0, false, undefined, null or "" is considered as zero). It returns 1 if any one of of them is non-zero; otherwise, returns 0.

3. ! - is known as NOT operator. It reverses the boolean result of the operand (or condition). !false returns true, and !true returns false.

Assignment Operators:

The assignment operators to assign values to variables with less key strokes.

Q. What are the bitwise operators available in javascript?

Below are the list of bit-wise logical operators used in JavaScript

Examples:

⚝ Try this example on CodeSandbox

Q. What is the difference between == and === operators?

JavaScript provides both strict (===, !==) and type-converting (==, !=) equality comparison. The strict operators takes type of variable in consideration, while non-strict operators make type correction/conversion based upon values of variables. The strict operators follow the below conditions for different types,

1. Two strings are strictly equal when they have the same sequence of characters, same length, and same characters in corresponding positions.
2. Two numbers are strictly equal when they are numerically equal. i.e, Having the same number value. There are two special cases in this,
   1. NaN is not equal to anything, including NaN.
   2. Positive and negative zeros are equal to one another.
3. Two Boolean operands are strictly equal if both are true or both are false.
4. Two objects are strictly equal if they refer to the same Object.
5. Null and Undefined types are not equal with ===, but equal with ==. i.e, null === undefined --> false but null == undefined --> true

Example:

0 == false // true
0 === false // false
1 == "1" // true
1 === "1" // false
null == undefined // true
null === undefined // false
"0" == false // true
"0" === false // false
[] === [] // false, refer different objects in memory
{} === {} // false, refer different objects in memory

⚝ Try this example on CodeSandbox

Q. What is typeof operator?

In JavaScript, the typeof operator returns the data type of its operand in the form of a string. The operand can be any object, function, or variable.

Example:

console.log(typeof undeclaredVariable); // "undefined"

let a;
console.log(typeof a); // "undefined"

const b = "Hello World";
console.log(typeof b); // "string"

const c = 42;
console.log(typeof c); // "number"

const d = 3.1415;
console.log(typeof d); // "number"

const e = true;
console.log(typeof e); // "boolean"

const f = null;
console.log(typeof f); // "object"

const g = undefined;
console.log(typeof g); // "undefined"

const h = { b: "c" };
console.log(typeof h); // "object"

const i = function () {
  return 10;
};

console.log(typeof i); // "function"

⚝ Try this example on CodeSandbox

Q. What is an Unary operator?

The unary(+) operator is used to convert a variable to a number. If the variable cannot be converted, it will still become a number but with the value NaN.

Example:

var x = "100";
var y = +x;
console.log(typeof x, typeof y); // string, number

var a = "Hello";
var b = +a;
console.log(typeof a, typeof b, b); // string, number, NaN

⚝ Try this example on CodeSandbox

Q. What is the purpose of delete operator?

The delete keyword is used to delete the property as well as its value.

Example:

const user = { name: "Sadhika Chaudhuri", age: 24 };
delete user.age;

console.log(user); // { name: "Sadhika Chaudhuri" }

Q. What is a conditional operator in javascript?

The conditional (ternary) operator is the only JavaScript operator that takes three operands which acts as a shortcut for if statement.

Syntax:

<condition> ? <value1> : <value2>;

Example:

const isAuthenticated = false;

console.log(isAuthenticated ? 'Hello, welcome' : 'Sorry, you are not authenticated');

Q. Can you apply chaining on conditional operator?

Yes, you can apply chaining on conditional operator similar to if … else if … else if … else chain.

Example:

function getValue(someParam) {
  return condition1 ? value1
    : condition2 ? value2
    : condition3 ? value3
    : value4;
}

// The above conditional operator is equivalent to:
function getValue(someParam) {
  if (condition1) {
    return value1;
  } else if (condition2) {
    return value2;
  } else if (condition3) {
    return value3;
  } else {
    return value4;
  }
}

Q. What is the difference between typeof and instanceof operator?

The typeof operator checks if a value has type of primitive type which can be one of boolean, function, object, number, string, undefined, symbol, or bigint.

Example:

const x = "Hello World";
const y = new String("Hello World");

typeof x; // returns 'string'
typeof y; // returns 'object'

The instanceof is a binary operator, accepting an object and a constructor. It returns a boolean indicating whether or not the object has the given constructor in its prototype chain.

const a = "Hello World";
const b = new String("Hello World");

a instanceof String; // returns false
b instanceof String; // returns true

⚝ Try this example on CodeSandbox

Q. What is the output of below spread operator array?

[...'Hello']

Output: ['H', 'e', 'l', 'l', 'o']

Explanation: The string is an iterable type and the spread operator with in an array maps every character of an iterable to one element. Hence, each character of a string becomes an element within an Array.

Q. What is the nullish coalescing operator (??) in JavaScript?

The nullish coalescing operator (??) returns the right-hand side operand when the left-hand side operand is null or undefined. Otherwise, it returns the left-hand side operand. Unlike ||, it does not treat 0, false, or "" as falsy.

Syntax:

leftExpr ?? rightExpr

Example:

console.log(null ?? 'default');      // 'default'
console.log(undefined ?? 'default'); // 'default'
console.log(0 ?? 'default');         // 0  (0 is NOT null/undefined)
console.log('' ?? 'default');        // '' (empty string is NOT null/undefined)
console.log(false ?? 'default');     // false

// Practical use: provide a fallback for a missing config value
const config = { timeout: 0 };
const timeout = config.timeout ?? 3000;
console.log(timeout); // 0 (not 3000, because 0 is a valid value)

Nullish coalescing assignment (??=):

let user = { name: null };
user.name ??= 'Anonymous';
console.log(user.name); // 'Anonymous'

Q. What are logical assignment operators in JavaScript?

Logical assignment operators (ES2021) combine a logical operator with assignment. There are three:

Example:

// &&= (AND assignment)
let a = 1;
a &&= 2;
console.log(a); // 2 (a was truthy, so assigned)

let b = 0;
b &&= 2;
console.log(b); // 0 (b was falsy, not assigned)

// ||= (OR assignment)
let c = null;
c ||= 'default';
console.log(c); // 'default' (c was falsy)

let d = 'existing';
d ||= 'default';
console.log(d); // 'existing' (d was truthy, not reassigned)

// ??= (Nullish assignment)
let e = null;
e ??= 'fallback';
console.log(e); // 'fallback'

let f = 0;
f ??= 'fallback';
console.log(f); // 0 (0 is not null/undefined)

# 5. NUMBERS

Q. How do you generate random integers?

The Math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1). For example, if you want generate random integers between 1 to 100, the multiplication factor should be 100,

// Example 01:
Math.random(); // returns a random integer between 0 to 1

// Example 02:
Math.floor(Math.random() * 100) + 1; // returns a random integer from 1 to 100

// Example 03:
function getRandomNumber(max) {
  return Math.floor(Math.random() * max) + 1;
}

console.log(getRandomNumber(10)); // returns a random integer from 1 to 10

Random integer between min and max (inclusive):

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(randomInt(1, 6));   // simulates a dice roll: 1–6

⚝ Try this example on CodeSandbox

Q. What is isNaN?

The isNaN() function determines whether a value is NaN ( Not a Number ) or not. This function returns true if the value equates to NaN. The isNaN() method converts the value to a number before testing it.

Example:

isNaN('Hello') // true

isNaN('100') // false

typeof NaN // Number

Number.isNaN('Hello'); // false

⚝ Try this example on CodeSandbox

Q. What is the purpose of isFinite function?

The global isFinite() function determines whether the passed value is a finite number. It returns false if the value is +infinity, -infinity, or NaN (Not-a-Number), otherwise it returns true.

isFinite(Infinity);  // false
isFinite(NaN);       // false
isFinite(-Infinity); // false

isFinite(100);  // true
isFinite(1/0); // false

Number.isFinite(0 / 0); // false
Number.isFinite(null); // false
Number.isFinite("123") // false

⚝ Try this example on CodeSandbox

Q. Explain NEGATIVE_INFINITY in JavaScript?

The Number.NEGATIVE_INFINITY property represents the negative Infinity value.

Syntax:

Number.NEGATIVE_INFINITY

• Negative infinity is a number in javascript, which is derived by 'dividing negative number by zero'.
• A number object needs not to be created to access this static property.
• The value of negative infinity is the same as the negative value of the infinity property of the global object.

/**
 * NEGATIVE_INFINITY
 */

console.log(-10/0); // -Infinity
console.log(Number.NEGATIVE_INFINITY); // -Infinity
console.log(Number.MAX_VALUE + Number.MAX_VALUE); // Infinity
console.log(-2 * Number.MAX_VALUE); // -Infinity

console.log("Math.pow(10, 1000): " + Math.pow(10, 1000)); // Infinity 
console.log("Math.log(0): " + Math.log(0)); // -Infinity

console.log(Number.NEGATIVE_INFINITY === -2 * Number.MAX_VALUE); // true

⚝ Try this example on CodeSandbox

# 6. STRING

Q. What is the difference between slice and splice?

1. slice():

The slice() method returns a new array with a copied slice from the original array. The first optional argument is the beginning index and the second optional argument is the ending index (non-inclusive).

Example:

let languages = [ "JavaScript", "Python", "Java", "PHP" ];

languages.slice(1,3); // ["Python", "Java"]
languages.slice(2); // (from index 2 until the end of the array).
// ["Java", "PHP"]

console.log(languages); // the original array is not mutated.
// [ "JavaScript", "Python", "Java", "PHP" ]

2. splice():

The splice() method changes the content of the array in place and can be used to add or remove items from the array. When only one argument is provided, all the items after the provided starting index are removed from the array.

Example:

let numbers = [10, 20, 30];

numbers.splice(2, 1, 40, 50); // returns removed array:[30]

console.log(numbers); // Original array is mutated.
// returns: [10, 20, 40, 50]

Difference:

⚝ Try this example on CodeSandbox

Q. How do you check whether a string contains a substring?

There are 3 fastest ways to check whether a string contains a substring or not,

1. Using RegEx:

The regular expression test() method checks if a match exists in a string. This method returns true if it finds a match, otherwise, it returns false.

let str = "JavaScript, Node.js, Express.js, React.js, MongoDB";
let exp1 = /MongoDB/g;
let exp2 = /Ajax/;

exp1.test(str); // true
exp2.test(str); // false

2. Using indexOf:

The indexOf() method is case-sensitive and accepts two parameters. The first parameter is the substring to search for, and the second optional parameter is the index to start the search from (default index is 0).

let str = "JavaScript, Node.js, Express.js, React.js, MongoDB";

str.indexOf('MongoDB') !== -1 // true
str.indexOf('PHP') !== -1 // false
str.indexOf('Node', 5) !== -1 // true

3. Using includes: (Modern Standard)

The includes() is also case-sensitive and accepts an optional second parameter, an integer which indicates the position where to start searching for.

let str = "JavaScript, Node.js, Express.js, React.js, MongoDB";

str.includes('MongoDB') // true
str.includes('PHP') // false
str.includes('Node', 5) //true

Use Cases:

// 1. Search bar — check if item name contains user query
const query = "react";
const items = ["React.js Tutorial", "Node.js Guide", "React Native Basics"];
const results = items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
// ["React.js Tutorial", "React Native Basics"]

// 2. URL parsing — check if a query param exists
const url = "https://example.com/search?q=javascript&page=2";
const hasQuery = url.indexOf('?q=') !== -1; // true

// 3. Input validation — check if email contains '@' and '.'
const email = "[email protected]";
const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); // true

⚝ Try this example on CodeSandbox

Q. How do you trim a string in javascript?

The trim() method removes whitespace from both sides of a string. JavaScript provides 3 simple functions on how to trim strings.

1. string.trim():

The string.trim() removes sequences of whitespaces and line terminators from both the start and the end of the string.

const name = "  Karan Talwar  ";
console.log(name.trim()); // => 'Karan Talwar'

const phoneNumber = "\t  80-555-123\n ";
console.log(phoneNumber.trim()); // => '80-555-123'

2. string.trimStart():

The string.trimStart() removes sequences of whitespaces and line terminators only from the start of the string.

const name = "   Karan Talwar  ";
console.log(name.trimStart()); // => "Karan Talwar  "

const phoneNumber = "\t  80-555-123\n ";
console.log(phoneNumber.trimStart()); // => "80-555-123 "

3. string.trimEnd():

The string.trimEnd() removes sequences of whitespaces and line terminators only from the end of the string.

const name = "  Karan Talwar ";
console.log(name.trimEnd()); // => " Karan Talwar"

const phoneNumber = "\t  80-555-123\n ";
console.log(phoneNumber.trimEnd()); // => " 80-555-123"

⚝ Try this example on CodeSandbox

Q. What is eval function in javascript?

The eval() function evaluates JavaScript code represented as a string. The string can be a JavaScript expression, variable, statement, or sequence of statements.

console.log(eval('10 + 20')); // 30

let x = 10;
let y = 20;
let z = '50';
eval('x + y + 1'); // returns 31
eval(z);           // returns 50

If the argument of eval() is not a string, eval() returns the argument unchanged. In the following example, the String constructor is specified and eval() returns a String object rather than evaluating the string.

eval(new String('10 + 20')); // returns a String object containing "10 + 20"
eval('10 + 20');             // returns 30


// work around
let expression = new String('10 + 20');
eval(expression.toString()); // returns 30

Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval().

⚝ Try this example on CodeSandbox

Q. How do you check if a string starts with another string?

You can use String.prototype.startsWith() method to check if a string starts with another string or not. It is fully supported in all modern browsers.

let str = "Hello World";

console.log(str.startsWith("Hello")); // true
console.log(str.startsWith("World")); // false

⚝ Try this example on CodeSandbox

Q. What are replaceAll(), padStart() and padEnd() string methods?

1. String.prototype.replaceAll():

The replaceAll() method returns a new string with all matches of a pattern replaced by a replacement. Unlike replace(), it replaces every occurrence without needing a global regex flag.

const text = 'I like cats. Cats are cute cats.';
console.log(text.replace('cats', 'dogs'));    // 'I like dogs. Cats are cute cats.' (only first)
console.log(text.replaceAll('cats', 'dogs')); // 'I like dogs. Cats are cute dogs.'

2. String.prototype.padStart():

The padStart() method pads the current string with another string from the start until it reaches the given length.

console.log('5'.padStart(3, '0'));    // '005'
console.log('hello'.padStart(8));     // '   hello' (default pad is space)
console.log('42'.padStart(5, '*'));   // '***42'

3. String.prototype.padEnd():

The padEnd() method pads the current string with another string from the end until it reaches the given length.

console.log('5'.padEnd(3, '0'));    // '500'
console.log('hello'.padEnd(8));     // 'hello   '
console.log('42'.padEnd(5, '-'));   // '42---'

# 7. ARRAY

Q. Explain arrays in JavaScript?

JavaScript array is an object that represents a collection of similar type of elements. It can holds values (of any type) not particularly in named properties/keys, but rather in numerically indexed positions.

Syntax:

const array_name = [item-1, item-2, item-3, ...];    

Example 01: Creating an array

// array of numbers
const numbers = [10, 20, 30, 40, 50];

// using new keyword
const numbers = new Array(10, 20, 30, 40, 50);

// array of strings
let fruits = ["Apple", "Orange", "Plum", "Mango"];

// array of character
const numbers = Array.from("abc"); // ["a", "b", "c"]

// array of numbers
const numbers = Array.of(10, 20, 30); // [10, 20, 30]

Common Methods

Example 02: Accessing array elements

const numbers = [10, 20, 30, 40, 50];

// Transforming
console.log(numbers.map(n => n * 2)); // [20, 40, 60, 80, 100]

// Filtering
console.log(numbers.filter(n => n % 2 === 0)); // [10, 20, 30, 40, 50]

// Reducing
console.log(numbers.reduce((sum, n) => sum + n, 0)); // 150

// Searching
console.log(numbers.find(n => n > 30));  // 40
console.log(numbers.includes(30));  // true

Example 03: Adding new array elements

let fruits = ["Apple", "Orange", "Plum", "Mango"];

fruits.push("Grapes");  // Adds a new element (Grapes) to fruits

⚝ Try this example on CodeSandbox

Q. What are associative arrays in javascript?

JavaScript does not have built-in associative arrays in the way languages like PHP or literal dictionary structures do. Instead, JavaScript uses regular Objects or Maps to handle key-value pairs (associative behavior).

Associative arrays are basically objects in JavaScript where indexes are replaced by user-defined keys. They do not have a length property like a normal array and cannot be traversed using a normal for loop.

Syntax:

const array_name = { key1: 'value1', key2: 'value2', key3: 'value3' }   

Example: Plain Object (most common)

const employee = {
  id: 12345,
  name: "Sakshi Memon",
  email: "[email protected]"
};

// Accessing employee elements
console.log(employee.id); // 12345
console.log(employee.name); // Sakshi Memon

// Array Length 
console.log(Object.keys(employee).length); // 3

// Retrieve the elements
for (let key in employee) {
  console.log(key + " = " + employee[key]);
}

// Output
id = 12345 
name = Sakshi Memon 
email = [email protected] 

Example: Map (true associative structure)

const map = new Map();
map.set("name", "Alice");
map.set(42, "answer");        // keys can be any type
map.set({ id: 1 }, "object key");

map.get("name");  // "Alice"
map.has(42);      // true
map.size;         // 3

⚝ Try this example on CodeSandbox

Q. How to calculate the length of the associative array?

Method 1: Using Object.keys().length

const employee = {
  id: 12345,
  name: "Sakshi Memon",
  email: "[email protected]"
};

console.log(Object.keys(employee).length); // 3

Method 2: Using Object.hasOwnProperty()

function getLength(object) {
  let count = 0;
  for (let key in object) {
    // hasOwnProperty method check own property of object
    if (object.hasOwnProperty(key)) count++;
  }
  return count;
}

console.log(getLength(employee)); // 3

Method 3: Using Object.getOwnPropertyNames()

const employee = {
  id: 12345,
  name: "Sakshi Memon",
  email: "[email protected]"
};

Object.getOwnPropertyNames(employee).length; // 3

⚝ Try this example on CodeSandbox

Q. What is the difference between Array and Array of Objects in JavaScript?

Objects represent a special data type that is mutable and can be used to store a collection of data (rather than just a single value). Arrays are a special type of variable that is also mutable and can also be used to store a list of values.

Example: Arrays

const numbers = [10, 20, 30];

// Iterating through loop
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// Pop an element from array
numbers.pop();
console.log("after pop(): " + numbers);

Example: Array of Objects

const employees = [
  { id: 101, name: "Sakshi Memon", email: "[email protected]" },
  { id: 102, name: "Subhash Shukla", email: "[email protected]" },
  { id: 103, name: "Mohini Karpe", email: "[email protected]" }
];

// Using DOT notation
console.log(employees[0].name);

// Using delete keyword
delete employees[0];

// Iterating using for..in loop
for (let key in employees) {
  console.log(employees[key]);
}

Difference:

⚝ Try this example on CodeSandbox

Q. Explain array methods [ join(), pop(), push(), shift(), unshift(), concat(), map(), filter(), reduce(), reduceRight(), every(), some(), indexOf(), lastIndexOf(), find(), findIndex(), includes() ]

1. array.join():

The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

var elements = ['Fire', 'Air', 'Water'];

console.log(elements.join()); // Output: "Fire,Air,Water"
console.log(elements.join('')); // Output: "FireAirWater"
console.log(elements.join('-')); // Output: "Fire-Air-Water"

2. array.pop():

The pop() method removes the last element from an array and returns that element. This method changes the length of the array.

var plants = ['broccoli', 'cauliflower', 'kale'];

console.log(plants.pop()); // Output: "kale"
console.log(plants); // Output: Array ["broccoli", "cauliflower"]
console.log(plants.pop()); // Output: "cauliflower"
console.log(plants.pop()); // Output: "broccoli"
console.log(plants.pop()); // Output: "undefined"

3. array.push():

The push() method adds one or more elements to the end of an array and returns the new length of the array.

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count); // Output: 4
console.log(animals); // Output: Array ["pigs", "goats", "sheep", "cows"]

4. array.shift():

The shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
console.log(fruits) // Output: Array ["Orange", "Apple", "Mango"]

5. array.unshift():

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

var fruits = ["Banana", "Orange", "Apple"];
fruits.unshift("Mango","Pineapple");
console.log(fruits); // Output: Array ["Mango", "Pineapple", "Banana", "Orange", "Apple"]

6. array.concat():

The concat() method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2)); // Output: Array ["a", "b", "c", "d", "e", "f"]

7. array.map():

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2); 

console.log(map1); // Output: Array [2, 8, 18, 32]

8. array.filter():

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction'];

const result = words.filter(word => word.length > 6);

console.log(result); // Output: Array ["exuberant", "destruction"]

9. array.reduce():

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

console.log(array1.reduce(reducer)); // Output: 10
console.log(array1.reduce(reducer, 5)); // Output: 15

10. array.reduceRight():

The reduceRight() method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1); // Output: Array [4, 5, 2, 3, 0, 1]

11. array.every():

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold)); // Output: true

12. array.some():

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

var array = [1, 2, 3, 4, 5];

var even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
};

console.log(array.some(even)); // Output: true

13. array.indexOf():

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

var beasts = ['ant', 'bison', 'camel'];

console.log(beasts.indexOf('camel')); // Output: 2
console.log(beasts.indexOf('giraffe')); // Output: -1

14. array.lastIndexOf():

The lastIndexOf() method returns the index within the calling String object of the last occurrence of the specified value, searching backwards from fromIndex. Returns -1 if the value is not found.

var paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

var searchTerm = 'dog';

console.log('The index of the first "' + searchTerm + '" from the end is ' + paragraph.lastIndexOf(searchTerm));
// Output: "The index of the first "dog" from the end is 52"

15. array.find():

The find() method returns the value of the first element in the provided array that satisfies the provided testing function.

var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 100;
});

console.log(found); // Output: 130

16. array.findIndex():

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

var array1 = [5, 12, 8, 130, 44];

function isLargeNumber(element) {
  return element > 20;
}

console.log(array1.findIndex(isLargeNumber)); // Output: 3

17. array.includes():

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

var array1 = [1, 2, 3];
console.log(array1.includes(2)); // Output: true

var pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('at')); // Output: false

18. array.at():

The at() method (ES2022) takes an integer and returns the item at that index. Negative integers count back from the last item.

const fruits = ['Apple', 'Orange', 'Banana', 'Mango'];
console.log(fruits.at(0));  // Output: Apple
console.log(fruits.at(-1)); // Output: Mango (last element)
console.log(fruits.at(-2)); // Output: Banana

19. array.flat():

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat());    // Output: [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2));   // Output: [1, 2, 3, 4, 5, 6]
console.log(nested.flat(Infinity)); // Output: [1, 2, 3, 4, 5, 6]

20. array.flatMap():

The flatMap() method maps each element using a mapping function, then flattens the result into a new array (one level deep).

const sentences = ['Hello World', 'Foo Bar'];
console.log(sentences.flatMap(s => s.split(' '))); // Output: ['Hello', 'World', 'Foo', 'Bar']

21. array.findLast():

The findLast() method (ES2023) iterates the array in reverse and returns the value of the first element that satisfies the provided testing function.

const numbers = [5, 12, 8, 130, 44];
console.log(numbers.findLast(n => n > 10)); // Output: 44

22. array.findLastIndex():

The findLastIndex() method (ES2023) iterates the array in reverse and returns the index of the first element that satisfies the provided testing function.

const numbers = [5, 12, 8, 130, 44];
console.log(numbers.findLastIndex(n => n > 10)); // Output: 4

Q. What are the benefits of using spread syntax and how is it different from rest syntax?

Spread operator or Spread Syntax allow us to expand the arrays and objects into elements in the case of an array and key-value pairs in the case of an object.

Example:

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers));

// ES-5 way
console.log(sum.apply(null, numbers));

Example: Merge arrays

const newBrands = ["Tesla", "Mahindra"];
const brands = ["Ford", "Honda", ...newBrands, "BMW"];

console.log(brands);

Example: Copy array/object

let obj = { a: 10, b: 20, c: 30 };

// spread the object into a list of parameters
let objCopy = { ...obj };

// add new
obj.d = 40;

console.log(JSON.stringify(obj)); // { "a":10, "b":20, "c":30, "d":40 }
console.log(JSON.stringify(objCopy)); // { "a":10, "b":20, "c":30 }

Difference:

The main difference between rest and spread is that the rest operator puts the rest of some specific user-supplied values into a JavaScript array. But the spread syntax expands iterables into individual elements.

⚝ Try this example on CodeSandbox

Q. What is the difference between for..in and for..of?

Both for..of and for..in statements iterate over lists; the values iterated on are different though, for..in returns a list of keys on the object being iterated, whereas for..of returns a list of values of the numeric properties of the object being iterated.

• for in: iterates over all enumerable properties of an object that are keyed by strings.
• for of: iterates over the values of an iterable objects. including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.

Example:

// for..in
const list = [10, 20, 30];

for (let key in list) {
  console.log(key); // "0", "1", "2",
}

// for..of
for (let value of list) {
  console.log(value); // "10", "20", "30"
}

// Works on any iterable: arrays, strings, Map, Set
for (let char of "hello") {
  console.log(char); // "h", "e", "l", "l", "o"
}

⚝ Try this example on CodeSandbox

Q. When to use reduce(), map(), foreach() and filter() in JavaScript?

1. forEach():

It takes a callback function and run that callback function on each element of array one by one. Basically forEach works as a traditional for loop looping over the array and providing array elements to do operations on them.

let numbers = [10, 20, 30];

numbers.forEach(function (number, index) {
  console.log(number + " comes at " + index);
});

// Output
10 comes at 0
20 comes at 1
30 comes at 2

2. filter():

The main difference between forEach() and filter() is that forEach just loop over the array and executes the callback but filter executes the callback and check its return value. If the value is true element remains in the resulting array but if the return value is false the element will be removed for the resulting array.

Note: filter does not update the existing array it will return a new filtered array every time.

let numbers = [10, 20, 30];

let result = numbers.filter(function (number) {
  return number !== 20;
});

console.log(result);

// Output
[10, 30]

3. map():

map() like filter() & forEach() takes a callback and run it against every element on the array but whats makes it unique is it generate a new array based on your existing array.

Like filter(), map() also returns an array. The provided callback to map modifies the array elements and save them into the new array upon completion that array get returned as the mapped array.

let numbers = [10, 20, 30];

let mapped = numbers.map(function (number) {
  return number * 10;
});

console.log(mapped);

// Output
[100, 200, 300]

4. reduce():

reduce() method of the array object is used to reduce the array to one single value.

let numbers = [10, 20, 30];

let sum = numbers.reduce(function (sum, number) {
  return sum + number;
});

console.log(sum); // Output: 60

Key Rules

• Need a new transformed array? → map()
• Need a subset? → filter()
• Need a single output (sum, object, string)? → reduce()
• Need no return value (side effects)? → forEach()
• Avoid forEach() when you need a result — use map()/filter()/reduce() instead

⚝ Try this example on CodeSandbox

Q. How do you define JSON arrays?

JSON is an acronym for JavaScript Object Notation, and is "an open standard data interchange format".

JSON array represents ordered list of values. JSON array can store multiple values. It can store string, number, boolean or object in JSON array.

// Empty JSON array
const empty = [ ];


// JSON Array of Numbers
const numbers = [12, 34, 56, 43, 95];


// JSON Array of Objects
{
 "employees": [
   { "name": "Kabir Dixit", "email": "[email protected]", "age": 23 },
   { "name": "Mukta Bhagat", "email": "[email protected]", "age": 28 },
   { "name": "Sakshi Ramakrishnan", "email": "[email protected]", "age": 33 }
  ]
}

// access array values
console.log(employees[0].name) // Kabir Dixit

Q. How to validate JSON Object in javascript?

JSON.parse() function will use string and converts to JSON object and if it parses invalidate JSON data, it throws an exception ( Uncaught SyntaxError: Unexpected string in JSON ).

function isValidJson(json) {
  try {
    JSON.parse(json);
    return true;
  } catch (e) {
    return false;
  }
}

console.log(isValidJson("{}")); // true
console.log(isValidJson("abc")); // false

⚝ Try this example on CodeSandbox

Q. What is the purpose JSON stringify?

When sending data to a web server, the data has to be in a string format. The JSON.stringify() method converts a JavaScript object or value to a JSON string format.

const user = {'name': 'Shashi Meda', 'email': '[email protected]', 'age': 28}

console.log(JSON.stringify(user)); // {"name":"Shashi Meda","email":"[email protected]","age":28}

Q. How do you parse JSON string?

When receiving the data from a web server, the data is always in a string format. But you can convert this string value to javascript object using JSON.parse() method.

const user = '{"name": "Shashi Meda", "email": "[email protected]", "age": 28}'

console.log(JSON.parse(user));// {'name': 'Shashi Meda', 'email': '[email protected]', 'age': 28}

Q. What is the purpose of compare function while sorting arrays?

The purpose of the compare function is to define an alternative sort order. When the sort() function compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.

If omitted, the array elements are converted to strings, then sorted according to each character's Unicode code point value.

const numbers = [1, 2, 5, 3, 4];

numbers.sort((a, b) => b - a);
console.log(numbers); // [5, 4, 3, 2, 1]

⚝ Try this example on CodeSandbox

Q. Can you describe the main difference between a .forEach loop and a .map() loop and why you would pick one versus the other?

To understand the differences between the two, Let us look at what each function does.

1. Array.forEach():

• Iterates through the elements in an array.
• Executes a callback for each element.
• Does not return a value.

const numbers = [10, 20, 30];
const doubled = numbers.forEach((num, index) => {
  return num * 2;
});

console.log(doubled) // undefined

2. Array.map():

• Iterates through the elements in an array.
• "Maps" each element to a new element by calling the function on each element, creating a new array as a result.

const numbers = [10, 20, 30];
const doubled = numbers.map(num => {
  return num * 2;
});

console.log(doubled) // [20, 40, 60]

The main difference between .forEach and .map() is that .map() returns a new array. If you need the result, but do not wish to mutate the original array, .map() is the clear choice. If you simply need to iterate over an array, forEach is a fine choice.

⚝ Try this example on CodeSandbox

Q. What is unshift() method in JavaScript?

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

Example:

const numbers = [10, 20, 30];

console.log(numbers.unshift(40, 50)); // 5
console.log(numbers); // [40, 50, 10, 20, 30]

⚝ Try this example on CodeSandbox

Q. What is a rest parameter?

The rest parameter is used to represent an indefinite number of arguments as an array. The important point here is only the function's last parameter can be a "rest parameter".

This feature has been introduced to reduce the boilerplate code that was induced by the arguments.

Example:

function sum(...args) {
  return args.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(10)); // 10
console.log(sum(10, 20)); // 30
console.log(sum(10, 20, 30)); // 60

⚝ Try this example on CodeSandbox

Q. What happens if you do not use rest parameter as a last argument?

The rest parameter should be the last argument, as its job is to collect all the remaining arguments into an array.

Example: If you define a function like below it does not make any sense and will throw an SyntaxError.

function display(a, ...args, b) {
  console.log(a);
  for (let i = 0; i < args.length; i++) {
    console.log(args[i]);
  }
  console.log(b);
}

display(10, 20, 30, 40, 50);

// Output
SyntaxError: Rest element must be last element

⚝ Try this example on CodeSandbox

Q. What is difference between [] and new Array()?

[] and new Array() are two different ways of creating an array, but they are functionally equivalent.

The primary difference between them is in how they are created and in their behavior when used with certain methods.

[] is a shorthand for creating a new array. It is the preferred way to create an array in most cases, because it's more concise and easier to read. For example:

const myArray = []; // create a new empty array

On the other hand, new Array() is a constructor function that creates a new array object. It can be used to create an array of a specific length or with specific elements. For example:

const myArray = new Array(); // create a new empty array
const myOtherArray = new Array(3); // create a new array with a length of 3
const myThirdArray = new Array("a", "b", "c"); // create a new array with three elements

One potential pitfall of using new Array() is that it can be ambiguous when you pass a single argument to the constructor. For example, new Array(3) creates an array with a length of 3, but new Array("3") creates an array with a single element, the string "3". This is because the argument is treated as the value of the first element when it's a non-negative integer, but as the length of the array when it's a string or a negative integer.

In summary, [] is the preferred way to create a new array in JavaScript, while new Array() is an alternative way that can be used when you need more control over the array's length or contents.

Q. What are Array.from(), Array.of() and Array.isArray() methods?

1. Array.from():

Array.from() creates a new, shallow-copied array from an array-like or iterable object such as a Set, Map, NodeList, or string.

// From a string
console.log(Array.from('hello')); // ['h', 'e', 'l', 'l', 'o']

// From a Set
const set = new Set([1, 2, 3, 2, 1]);
console.log(Array.from(set)); // [1, 2, 3]

// With a map function
console.log(Array.from([1, 2, 3], x => x * 2)); // [2, 4, 6]

// From array-like object
console.log(Array.from({ length: 3 }, (_, i) => i + 1)); // [1, 2, 3]

2. Array.of():

Array.of() creates a new array from a variable number of arguments, regardless of number or type. It fixes the ambiguity of new Array() with a single numeric argument.

console.log(Array.of(7));       // [7]         (one element)
console.log(new Array(7));      // [ , , , , , , ] (empty array of length 7!)

console.log(Array.of(1, 2, 3)); // [1, 2, 3]

3. Array.isArray():

Array.isArray() returns true if the passed value is an array, false otherwise. It is more reliable than instanceof when working across different frames or windows.

console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray('hello'));     // false
console.log(Array.isArray({ length: 3 })); // false
console.log(Array.isArray(new Array())); // true

# 8. CONTROL FLOW

Q. What are the different types of control flow statements available in JavaScript?

Control flow determines the order in which statements are executed. JavaScript provides three main categories:

By default, JavaScript executes code top-to-bottom (sequential flow). Control flow statements allow branching and repetition, enabling complex logic.

Example:

// Conditional branching
const score = 78;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 75) {
  console.log("Grade: B"); // ← executed
} else {
  console.log("Grade: C");
}

// Looping
const students = ["Alice", "Bob", "Carol"];
for (let i = 0; i < students.length; i++) {
  console.log(students[i]);
}

// Jump: exit loop early
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i); // 0, 1, 2, 3, 4
}

Q. How does the if...else if...else ladder work, and what are its performance considerations?

The if...else if...else ladder evaluates conditions sequentially from top to bottom and executes the first block whose condition is true. Once a matching branch executes, all remaining else if and else blocks are skipped — making it short-circuit by design.

Performance consideration: JavaScript evaluates each condition until one is truthy. Placing the most frequently matched condition first reduces the number of comparisons at runtime.

Example:

function classify(temperature) {
  if (temperature < 0) {
    return "Freezing";
  } else if (temperature < 10) {
    return "Cold";
  } else if (temperature < 20) {
    return "Mild";
  } else if (temperature < 30) {
    return "Warm";
  } else {
    return "Hot";
  }
}

console.log(classify(-5));  // Freezing
console.log(classify(15));  // Mild
console.log(classify(35));  // Hot

Falsy vs. Truthy awareness:

// These values are falsy in JavaScript:
// false, 0, "", null, undefined, NaN

const value = 0;

if (value) {
  console.log("Truthy");
} else {
  console.log("Falsy"); // ← executed because 0 is falsy
}

Q. When should you use a switch statement instead of if...else if, and what are its pitfalls?

A switch statement compares a single expression against multiple discrete values using strict equality (===). It is preferable over if...else if when:

• You are comparing one variable against many possible literal values.
• Readability is a priority (avoids repetitive condition checks against the same variable).

Pitfall — Fall-through: Without a break statement, execution "falls through" to the next case, which is a common source of bugs.

Example:

const day = "Monday";

switch (day) {
  case "Monday":
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
  case "Friday":
    console.log("Weekday");
    break;
  case "Saturday":
  case "Sunday":
    console.log("Weekend");
    break;
  default:
    console.log("Unknown day");
}
// Output: Weekday

Intentional fall-through example:

// Grouping cases that share behavior — intentional fall-through
const statusCode = 404;

switch (statusCode) {
  case 400:
  case 401:
  case 403:
  case 404:
    console.log("Client error");
    break;
  case 500:
  case 502:
  case 503:
    console.log("Server error");
    break;
  default:
    console.log("Unknown status");
}
// Output: Client error

Pitfall — switch uses ===, not ==:

const x = "1";
switch (x) {
  case 1:
    console.log("Number 1"); // NOT matched
    break;
  case "1":
    console.log("String '1'"); // ← matched
    break;
}

Q. Explain the difference between for, for...in, and for...of loops with practical examples.

Example:

// --- for loop: classic index-based ---
const arr = [10, 20, 30];

for (let i = 0; i < arr.length; i++) {
  console.log(`Index ${i}: ${arr[i]}`);
}
// Index 0: 10 | Index 1: 20 | Index 2: 30

// --- for...in: object property keys ---
const user = { name: "Alice", age: 30, role: "admin" };

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
// name: Alice | age: 30 | role: admin

// --- for...of: iterable values ---
const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
  console.log(fruit);
}
// apple | banana | cherry

// for...of also works on strings
for (const char of "hello") {
  process.stdout.write(char + " ");
}
// h e l l o

// for...of with Map
const scores = new Map([["Alice", 95], ["Bob", 87]]);
for (const [name, score] of scores) {
  console.log(`${name}: ${score}`);
}

Why avoid for...in on arrays?

const arr = [1, 2, 3];
arr.custom = "oops"; // accidentally adding a property

for (const key in arr) {
  console.log(key); // "0", "1", "2", "custom" ← includes inherited/custom keys!
}

for (const val of arr) {
  console.log(val); // 1, 2, 3 ← only values, safe
}

Real-World Use Case:

In a Node.js data-processing pipeline, for...of with await (inside an async function) iterates over a paginated API result set sequentially — something forEach cannot do since it ignores returned Promises. for...in is used to dynamically enumerate config object keys when serializing environment-specific settings.

Q. How do while and do...while loops differ, and when should each be used?

Example:

// --- while loop ---
let stock = 5;

while (stock > 0) {
  console.log(`Items remaining: ${stock}`);
  stock--;
}
// Runs 5 times. If stock were 0 initially, it would never run.

// --- do...while loop ---
let attempts = 0;
let pin;

do {
  pin = prompt("Enter 4-digit PIN:"); // Must show prompt at least once
  attempts++;
} while (pin !== "1234" && attempts < 3);

console.log(attempts === 3 ? "Locked out" : "Access granted");

Infinite loop guard — always ensure the condition can become false:

// DANGER: this never terminates
// while (true) { }

// SAFE: controlled exit with break
let counter = 0;
while (true) {
  counter++;
  if (counter >= 5) break;
}
console.log(counter); // 5

Q. What is the purpose of break and continue statements, and how do they interact with nested loops?

• break: Immediately terminates the innermost loop or switch statement and transfers control to the statement following it.
• continue: Skips the current iteration of the innermost loop and jumps to the next iteration's condition check.

Example:

// --- break: stop on first match ---
const inventory = [
  { id: 1, name: "Widget A", inStock: false },
  { id: 2, name: "Widget B", inStock: true },
  { id: 3, name: "Widget C", inStock: true },
];

let firstAvailable = null;
for (const item of inventory) {
  if (item.inStock) {
    firstAvailable = item;
    break; // stop searching once found
  }
}
console.log(firstAvailable); // { id: 2, name: "Widget B", inStock: true }

// --- continue: skip unwanted items ---
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = [];

for (const n of numbers) {
  if (n % 2 !== 0) continue; // skip odd numbers
  evens.push(n);
}
console.log(evens); // [2, 4, 6, 8, 10]

Labeled statements — breaking outer loops:

// Without labels, break only exits the inner loop
outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop; // exits BOTH loops
    }
    console.log(`i=${i}, j=${j}`);
  }
}
// i=0,j=0 | i=0,j=1 | i=0,j=2 | i=1,j=0  ← stops here

Real-World Use Case:

In a search autocomplete engine, break short-circuits a loop over a large dataset once the desired number of suggestions is collected, preventing unnecessary iterations. continue is used in data-cleaning pipelines to skip null or malformed records without nesting the entire logic in an extra if block — keeping cyclomatic complexity low and the code easier to review.

Q. What is the ternary operator and how does it compare to if...else for conditional expressions?

The ternary operator (condition ? expressionIfTrue : expressionIfFalse) is JavaScript's only three-operand operator. It evaluates a condition and returns one of two expressions. Unlike if...else (a statement), the ternary is an expression — it produces a value and can be used inline.

Example:

// if...else statement — cannot be used inline
let label;
const isLoggedIn = true;

if (isLoggedIn) {
  label = "Logout";
} else {
  label = "Login";
}

// Ternary expression — equivalent, concise, assignable
const label2 = isLoggedIn ? "Logout" : "Login";

console.log(label2); // "Logout"

// Inline in JSX (React)
// <button>{isLoggedIn ? "Logout" : "Login"}</button>

// Nested ternary — use sparingly, prefer if...else for readability
const score = 72;
const grade = score >= 90 ? "A"
            : score >= 75 ? "B"
            : score >= 60 ? "C"
            : "F";

console.log(grade); // "C"

When NOT to use ternary:

// Bad: using ternary for side effects reduces readability
isLoggedIn ? doLogout() : doLogin();

// Better: use if...else for side effects
if (isLoggedIn) {
  doLogout();
} else {
  doLogin();
}

Real-World Use Case:

In React, the ternary operator is the standard pattern for conditional rendering within JSX since JSX is an expression context — if statements cannot appear inside {} interpolation. For example, rendering a loading spinner vs. a data table based on isLoading state is universally handled with a ternary.

Q. What are the nullish coalescing (??) and optional chaining (?.) operators, and how do they relate to control flow?

Both operators introduced in ES2020 reduce verbose defensive if checks for null/undefined values:

• Nullish coalescing (??): Returns the right-hand operand when the left is null or undefined (not other falsy values like 0 or "").
• Optional chaining (?.): Short-circuits and returns undefined instead of throwing a TypeError when accessing a property on null or undefined.

Example:

// --- Nullish Coalescing ?? ---
const userAge = 0; // falsy but valid!

// Old approach (bug: treats 0 as falsy)
const age1 = userAge || 18; // 18  ← WRONG: overwrites valid 0
// Correct approach
const age2 = userAge ?? 18; // 0   ← CORRECT: 0 is not null/undefined

console.log(age1, age2); // 18, 0

// --- Optional Chaining ?. ---
const user = {
  profile: {
    address: null
  }
};

// Without optional chaining — throws TypeError
// console.log(user.profile.address.city); // TypeError!

// With optional chaining — safe
console.log(user.profile?.address?.city); // undefined (no error)

// Works on methods too
const result = user.getPermissions?.(); // undefined if method doesn\'t exist

// Works on arrays
const first = user.tags?.[0]; // undefined if tags is null/undefined

// --- Combined usage ---
const city = user.profile?.address?.city ?? "Unknown City";
console.log(city); // "Unknown City"

Real-World Use Case:

When consuming third-party REST APIs or GraphQL responses, deeply nested fields may be absent depending on the query. Optional chaining eliminates dozens of guard clauses like if (response && response.data && response.data.user). Nullish coalescing is critical when a user-configurable setting has 0 or "" as a valid value — falling back with || would incorrectly override those legitimate settings.

Q. What are labeled statements in JavaScript and when are they appropriate?

A labeled statement is an identifier followed by a colon (:) placed before a loop or block. Labels can be referenced by break and continue to control the flow of outer loops from within a nested loop. They are rarely used — but in specific nested-iteration scenarios they can be clearer than managing manual flags.

Example:

// --- Using label with break to exit a matrix search ---
function findValue(matrix, target) {
  let found = false;

  search: for (let row = 0; row < matrix.length; row++) {
    for (let col = 0; col < matrix[row].length; col++) {
      if (matrix[row][col] === target) {
        console.log(`Found at [${row}][${col}]`);
        found = true;
        break search; // exit both loops immediately
      }
    }
  }

  return found;
}

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

findValue(matrix, 5); // Found at [1][1]

// --- Using label with continue ---
outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (j === 1) continue outer; // skip rest of inner loop, go to next outer iteration
    console.log(`i=${i}, j=${j}`);
  }
}
// i=0,j=0 | i=1,j=0 | i=2,j=0

Alternative to a flag variable:

// Without labels — requires a flag
let found = false;
for (let i = 0; i < rows && !found; i++) {
  for (let j = 0; j < cols; j++) {
    if (grid[i][j] === target) { found = true; break; }
  }
}

// With labels — no flag needed, intent is clearer
searchGrid: for (let i = 0; i < rows; i++) {
  for (let j = 0; j < cols; j++) {
    if (grid[i][j] === target) break searchGrid;
  }
}

Real-World Use Case:

In a pathfinding algorithm (e.g., BFS/DFS on a 2D game map) or a seat-selection engine scanning rows and seats in a stadium booking system, a labeled break exits all nested loops the moment a valid seat is located — avoiding a boolean flag variable that would otherwise pollute the outer scope and add an extra condition to every loop header.

Q. What is short-circuit evaluation in JavaScript and how does it control execution flow?

JavaScript's logical operators (&&, ||, ??) use short-circuit evaluation: the right-hand operand is only evaluated if necessary. This is not just a performance optimization — it is a widely used control flow mechanism.

Example:

// --- && short-circuit: right side only runs if left is truthy ---
const user = { isAdmin: true };

user.isAdmin && console.log("Admin panel loaded"); // ← runs
null && console.log("This never runs");             // ← skipped

// --- || short-circuit: right side only runs if left is falsy ---
const config = null;
const settings = config || { theme: "dark", lang: "en" }; // default fallback
console.log(settings); // { theme: "dark", lang: "en" }

// --- Practical: guard before calling a function ---
function logError(err) {
  err && err.message && console.error(err.message);
}

logError(null);            // nothing happens (safe)
logError({ message: "Failed" }); // "Failed"

// --- Chaining for conditional execution (React pattern) ---
const isLoading = false;
const data = [1, 2, 3];

// Equivalent to: if (!isLoading && data.length > 0) render()
const output = !isLoading && data.length > 0 && "Render data";
console.log(output); // "Render data"

Gotcha — using && for side effects:

// This is valid but can be confusing:
isAuthenticated && fetchDashboard();

// Prefer explicit if for clarity in complex flows:
if (isAuthenticated) {
  fetchDashboard();
}

Real-World Use Case:

In React, && short-circuit is the idiomatic pattern for conditional rendering: {isLoggedIn && <UserMenu />} renders the component only when isLoggedIn is truthy, with no JSX if block needed. The || operator is universally used for default parameter fallbacks before optional chaining became standard. In Node.js middleware chains, && guards ensure a dependency (e.g., a database connection) is available before proceeding to query logic.

# 9. FUNCTIONS

Q. What are the benefits of using arrow function over es5 function?

Arrows is a new syntax for functions, which brings several benefits:

• Arrow syntax automatically binds this to the surrounding code's context
• The syntax allows an implicit return when there is no body block, resulting in shorter and simpler code in some cases
• Last but not least, => is shorter and simpler than function, although stylistic issues are often subjective

Example 01: Arrow Function with No Argument

If a function doesn't take any argument, then you should use empty parentheses.

let greet = () => console.log('Hello');
greet(); // Hello

Example 02: Arrow Function with One Argument

If a function has only one argument, you can omit the parentheses.

let greet = x => console.log(x);
greet('Hello'); // Hello 

Example 03: Arrow Function as an Expression

You can also dynamically create a function and use it as an expression.

let age = 25;

let welcome = (age < 18) ?
  () => console.log('Baby') :
  () => console.log('Adult');

welcome(); // Adult

Example 04: Multiline Arrow Functions

If a function body has multiple statements, you need to put them inside curly brackets {}.

let area = (r) => {
  const pi = 3.14;
  return pi * r * r;
}

let result = area(10);
console.log(result); // 314

Note: Unlike regular functions, arrow functions do not have their own this. The value of this inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this in the closest non-arrow parent function.

⚝ Try this example on CodeSandbox

Q. What is the benefit of using the arrow syntax for a method in a constructor?

The main advantage of using an arrow function as a method inside a constructor is that the value of this gets set at the time of the function creation and can't change after that. So, when the constructor is used to create a new object, this will always refer to that object.

Example:

const Person = function(firstName) {
  this.firstName = firstName;
  this.sayName1 = function() { console.log(this.firstName); }; // regular function
  this.sayName2 = () => { console.log(this.firstName); };      // arrow function
};

const john = new Person('John');
const dave = new Person('Dave');

john.sayName1(); // John
john.sayName2(); // John

// Regular function: 'this' can be changed with call/apply/bind
john.sayName1.call(dave); // Dave
john.sayName2.call(dave); // John — arrow function ignores call/apply/bind

// Detached from object: regular function loses 'this'
const fn1 = john.sayName1;
fn1(); // undefined

const fn2 = john.sayName2;
fn2(); // John — arrow function retains original 'this'

Q. Difference between Function, Method and Constructor calls in JavaScript?

1. Functions: The simplest usages of function call:

function display(name) {
  return "Hello " + name;
}

display("World"); // "Hello World"

2. Methods: in JavaScript are nothing more than object properties that are functions.

var obj = {
  display : function() {
    return "Hello " + this.name;
  },
  name: 'Minali Peri'
}
obj.display();  // "Hello Minali Peri"

3. Constructors: Like function and method, constructors are defined with function.

function Employee(name, age) {
  this.name = name;
  this.age = age;
}

var emp1 = new Employee('Drishya Sama', 28);
emp1.name; // "Drishya Sama"
emp1.age; // 28

Unlike function calls and method calls, a constructor call new Employee('Drishya Sama', 28) creates a new object and passes it as the value of this, and implicitly returns the new object as its result. The primary role of the constructor function is to initialize the object.

Q. When you should not use arrow functions in ES6?

An arrow function is a shorter syntax for a function expression and does not have its own this, arguments, super, or new.target. These function are best suited for non-method functions, and they cannot be used as constructors.

Arrow functions in ES6 has two limitations:

• Do not work with new
• Fixed this bound to scope at initialisation

When should not use Arrow Functions:

1. Object methods:

The counter object has two methods: current() and next(). The current() method returns the current counter value and the next() method returns the next counter value.

// Usin arrow function
const counter = {
  count: 0,
  next: () => ++this.count,
  current: () => this.count
};

console.log(counter.next()); // NaN

2. Event handlers:

If we click the button, we would get a TypeError. It is because this is not bound to the button, but instead bound to its parent scope.

let button = document.getElementById('press');

button.addEventListener('click', () => {
  this.classList.toggle('on');
});

3. Prototype methods:

The this value in these next() and current() methods reference the global object. Since the this value inside the methods to reference the Counter object, it needs to use the regular functions instead

function Counter() {
    this.count = 0;
}

Counter.prototype.next = () => {
    return this.count;
};

Counter.prototype.current = () => {
    return ++this.next;
}

4. Functions that use the arguments object:

Arrow functions don't have the arguments object. Therefore, if a function that uses arguments object, you cannot use the arrow function.

const concat = (separator) => {
    let args = Array.prototype.slice.call(arguments, 1);
    return args.join(separator);
}

⚝ Try this example on CodeSandbox

Q. What are the properties of function objects in javascript?

JavaScript function objects are used to define a piece of JavaScript code. This code can be called within a JavaScript code as and when required.

Javascript Function Objects Property:

Q. What is a first class function?

In javaScript, functions can be stored as a variable inside an object or an array as well as it can be passed as an argument or be returned by another function. That makes function first-class function in JavaScript.

A first-class function means functions are treated as values — they can be:

• Assigned to variables: const greet = function() { return "Hello"; }
• Passed as arguments: arr.map(fn)
• Returned from other functions: function outer() { return function inner() {} }
• Stored in data structures: const obj = { fn: () => {} }

JavaScript fully supports first-class functions, which enables patterns like callbacks, higher-order functions, and closures.

Example 01: Assign a function to a variable

const message = function() {
   console.log("Hello World!");
}

message(); // Invoke it using the variable

Example 02: Pass a function as an Argument

function sayHello() {
   return "Hello, ";
}
function greeting(helloMessage, name) {
  console.log(helloMessage() + name);
}
// Pass `sayHello` as an argument to `greeting` function
greeting(sayHello, "JavaScript!");

Example 03: Return a function

function sayHello() {
   return function() {
      console.log("Hello!");
   }
}

Example 04: Using a variable

const sayHello = function() {
   return function() {
      console.log("Hello!");
   }
}
const myFunc = sayHello();
myFunc();

Example 05: Using double parentheses

function sayHello() {
   return function() {
      console.log("Hello!");
   }
}
sayHello()();

We are using double parentheses ()() to invoke the returned function as well.

⚝ Try this example on CodeSandbox

Q. What is a higher order function?

A Higher-Order function is a function that receives a function as an argument or returns the function as output.

For example, Array.prototype.map(), Array.prototype.filter() , Array.prototype.forEach() and Array.prototype.reduce() are some of the Higher-Order functions in javascript.

Example 01: .map()

const array = [10, 20, 30];

const result = array.map(function (item) {
  return item * 2;
});
console.log(result); // [20, 40, 60]

Example 02: .filter()

const randomNumbers = [4, 11, 42, 14, 39];

const filteredArray = randomNumbers.filter((number) => {
  return number > 15;
});
console.log(filteredArray); // [42, 39]

Example 03: .forEach()

const numbers = [28, 77, 45];

numbers.forEach((number) => {
  console.log(number);
});

Example 04: .reduce()

const arrayOfNumbers = [10, 20, 30];

const sum = arrayOfNumbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
});
console.log("Sum: " + sum); // 60

⚝ Try this example on CodeSandbox

Q. What is a unary function?

Unary function (i.e. monadic) is a function that accepts exactly one argument. It stands for single argument accepted by a function.

// Unary function
const unaryFunction = (number) => number + 10;

console.log(unaryFunction(10)); // 20

⚝ Try this example on CodeSandbox

Q. What is currying function?

Currying is the process of taking a function with multiple arguments and turning it into a sequence of functions each with only a single argument.

In other words, when a function, instead of taking all arguments at one time, takes the first one and return a new function that takes the second one and returns a new function which takes the third one, and so forth, until all arguments have been fulfilled.

// Normal function
const add = (a, b, c) => {
  return a + b + c;
};
console.log(add(10, 10, 10)); // 30

// Currying function
const addCurry = (a) => {
  return (b) => {
    return (c) => {
      return a + b + c;
    };
  };
};
console.log(addCurry(20)(20)(20)); // 60

Note: Curried functions are great to improve code re-usability and functional composition.

⚝ Try this example on CodeSandbox

Q. What is a pure function?

Pure functions are functions that accept an input and returns a value without modifying any data outside its scope(Side Effects). Its output or return value must depend on the input/arguments and pure functions must return a value.

Example: Pure Function

It is a pure function because you always get a Hello <name> as output for the <name> pass as an input.

// Pure Function

function sayGreeting(name) {
  return `Hello ${name}`;
}

console.log(sayGreeting("World"));

Example: Not Pure Function

The function's output now depends on an outer state called greeting. What if someone changes the value of the greeting variable to Hola? It will change the output of the sayGreeting() function even when you pass the same input.

let greeting = "Hello";

function sayGreeting(name) {
  return `${greeting} ${name}`;
}

A function must pass two tests to be considered pure:

• Same inputs always return same outputs
• No side-effects

Benefits:

• Predictable: It produces a predictable output for the same inputs.
• Readable: Anyone reading the function as a standalone unit can understand its purpose completely.
• Reusable: Can reuse the function at multiple places of the source code without altering its and the caller's behavior.
• Testable: We can test it as an independent unit.

Q. What is memoization in JavaScript?

Memoization is a programming technique which attempts to increase a function's performance by caching its previously computed results.

Each time a memoized function is called, its parameters are used to index the cache. If the data is present, then it can be returned, without executing the entire function. Otherwise the function is executed and then the result is added to the cache.

// Memoized function to Add Number

const memoizedAdd = () => {
  let cache = {};
  return (number) => {
    if (number in cache) {
      console.log('Fetching from cache: ');
      return cache[number];
    }
    else {
      console.log('Calculating result: ');
      let result = number + 10;
      cache[number] = result;
      return result;
    }
  }
}
// returned function from memoizedAdd
const sum = memoizedAdd();

console.log(sum(10)); // Calculating result: 20
console.log(sum(10)); // Fetching from cache: 20

⚝ Try this example on CodeSandbox

Q. What is an arguments object?

The arguments object is an Array-like object ( arguments ) accessible inside functions that contains the values of the arguments passed to that function.

Example:

/**
 * Arguments Object
 */

function sum() {
  let total = 0;
  for (let i = 0, len = arguments.length; i < len; ++i) {
    total += arguments[i];
  }
  return total;
}

sum(10, 20, 30); // returns 60

⚝ Try this example on CodeSandbox

Q. What is the way to find the number of parameters expected by a function?

The length property indicates the number of parameters expected by the function.

// function.length

function fun1() {}
console.log(fun1.length); // 0

function fun2(arg1, arg2) {}
console.log(fun2.length); // 2

⚝ Try this example on CodeSandbox

Q. What is bind method in javascript?

The bind() method creates a new function, when invoked, has the this sets to a provided value. The bind() method allows an object to borrow a method from another object without making a copy of that method. This is known as function borrowing in JavaScript.

Example:

/**
 * bind() function
 */
const person = {
  firstName: "Chhavi",
  lastName: "Goswami",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
};

const member = {
  firstName: "Vasuda",
  lastName: "Sahota"
};

let fullName = person.fullName.bind(member);
console.log(fullName()); // Vasuda Sahota

⚝ Try this example on CodeSandbox

Q. What is an anonymous function?

An anonymous function is a function without a name. Anonymous functions are commonly assigned to a variable name or used as a callback function.

Example 01: Anonymous function

let show = function () {
  console.log("Anonymous function");
};
show();

Example 02: anonymous functions as arguments

setTimeout(function () {
  console.log("Execute later after 1 second");
}, 1000);

Example 03: Immediately invoked function execution

const person = {
  firstName: "Ayaan",
  lastName: "Memon"
};

(function () {
  console.log(person.firstName + " " + person.lastName); // Ayaan Memon
})(person);

Example 04: Arrow functions

let add = (a, b) => a + b;

add(10, 20); // 30

⚝ Try this example on CodeSandbox

Q. Explain the difference between function foo() {} and var foo = function() {}?

1. Function Declaration:

Function declarations are evaluated upon entry into the enclosing scope, before any step-by-step code is executed. The function's name (foo) is added to the enclosing scope.

foo(); // Function Declaration Example!

function foo() {
  console.log("Function Declaration Example!");
}

2. Function Expression:

Function expressions are evaluated as part of the step-by-step code, at the point where they appear. That one creates a function with no name, which it assigns to the foo variable.

foo(); // TypeError: foo is not a function

var foo = function() {
  console.log(typeof foo); // function
};
console.log(typeof foo);     // undefined

⚝ Try this example on CodeSandbox

Q. When to use function declarations and expressions in JavaScript?

Function Declarations:

A declared function is "saved for later use", and will be executed later, when it is invoked (called).

// Function declaration
function add(num1, num2) {
	return num1 + num2;
}

function is only declared here. For using it, it must be invoked using function name. e.g add(10, 20);

Function Expression:

A function expression can be stored in a variable:

// Function expression
var add = function (num1, num2) {
	return num1 + num2;
};

After a function expression has been stored in a variable, the variable can be used as a function. Functions stored in variables do not need function names. They are always invoked (called) using the variable name.

Difference:

• Function declarations load before any code is executed while Function expressions load only when the interpreter reaches that line of code.
• Similar to the var statement, function declarations are hoisted to the top of other code. Function expressions aren't hoisted, which allows them to retain a copy of the local variables from the scope where they were defined.

Benefits of Function Expressions:

There are several different ways that function expressions become more useful than function declarations.

• As closures
• As arguments to other functions
• As Immediately Invoked Function Expressions (IIFE)

Q. What is the difference between a method and a function in javascript?

1. Function:

A function is a piece of code that is called by name and function itself not associated with any object and not defined inside any object. It can be passed data to operate on (i.e. parameter) and can optionally return value.

Example:

// Function 
function message(msg) {
  return msg;
}

// Call the function
message("Welcome to JavaScript");

Here, message() function call is not associated with object hence not invoked through any object.

2. Method:

A JavaScript method is a property of an object that contains a function definition. Methods are functions stored as object properties.

Example:

// Method
let employee = {
  firstName: "Ajay",
  lastName: "Nagi",
  getName: function () {
    return "Employe Name: " + this.firstName + " " + this.lastName;
  }
};

// Call the method
console.log(employee.getName());

Here employee is an object and getName is a method which is associated with employee.

⚝ Try this example on CodeSandbox

Q. What is Function binding?

Function binding ( .bind() ) is a method on the prototype of all functions in JavaScript. It allows to create a new function from an existing function, change the new function's this context, and provide any arguments you want the new function to be called with. The arguments provided to bind will precede any arguments that are passed to the new function when it is called.

Example:

// Function Binding
const person = {
  firstName: "Nirupama",
  lastName: "Randhawa",
  getName: function () {
    return this.firstName + " " + this.lastName;
  }
};

const member = {
  firstName: "Alisha",
  lastName: "Chhabra"
};

let getName = person.getName.bind(member);
console.log(getName()); // Alisha Chhabra

⚝ Try this example on CodeSandbox

Q. Explain how this works in JavaScript?

The this keyword refers to an object. Which object depends on how this is being invoked (used or called). The this keyword refers to different objects depending on how it is used.

• In an object method, this refers to the object.
• Alone, this refers to the global object.
• In a function, this refers to the global object.
• In a function, in strict mode, this is undefined.
• In an event, this refers to the element that received the event.
• Methods like call(), apply(), and bind() can refer this to any object.

Example:

// this keyword in object method

const person = {
  firstName: "Nirupama",
  lastName: "Randhawa",
  getName: function () {
    return this.firstName + " " + this.lastName;
  }
};

Q. What is generator in JS?

Generator-Function:

A generator-function is defined like a normal function, but whenever it needs to generate a value, it does so with the yield keyword rather than return. The yield statement suspends function's execution and sends a value back to caller, but retains enough state to enable function to resume where it is left off. When resumed, the function continues execution immediately after the last yield run.

Syntax:

function* gen() {
     yield 1;
     yield 2;
     yield 3;
     ...
}

Generator-Object:

Generator functions return a generator object. Generator objects are used either by calling the next method on the generator object or using the generator object in a "for in" loop.

Example:

// Generate Function

function* fun() {
  yield 10;
  yield 20;
  yield 30;
}

// Calling the Generate Function
var gen = fun(); // returns a Generator object (doesn\'t run yet)
gen.next(); // { value: 10, done: false }
gen.next(); // { value: 20, done: false }
gen.next(); // { value: 30, done: false }
gen.next(); // { value: undefined, done: true }

⚝ Try this example on CodeSandbox

Q. Compare Async-Await and Generators usage to achive same functionality?

1. Generators/Yield:

Generators are objects created by generator functions — functions with an * (asterisk) next to their name. The yield keyword pauses generator function execution and the value of the expression following the yield keyword is returned to the generator's caller. It can be thought of as a generator-based version of the return keyword.

Example:

// Generator function

const generator = (function* () {
  // waiting for .next()
  const number = yield 5;
  // waiting for .next()
  console.log(number); // => 15
})();

console.log(generator.next()); // => { done: false, value: 5 }
console.log(generator.next(15)); // => { done: true, value: undefined }

2. Async/Await:

Async keyword is used to define an asynchronous function, which returns a AsyncFunction object.

Await keyword is used to pause async function execution until a Promise is fulfilled, that is resolved or rejected, and to resume execution of the async function after fulfillments. When resumed, the value of the await expression is that of the fulfilled Promise.

Key points:

1. Await can only be used inside an async function.
2. Functions with the async keyword will always return a promise.
3. Multiple awaits will always run in sequential order under a same function.
4. If a promise resolves normally, then await promisereturns the result. But in case of a rejection it throws the error, just if there were a throw statement at that line.
5. Async function cannot wait for multiple promises at the same time.
6. Performance issues can occur if using await after await as many times one statement doesn't depend on the previous one.

Example:

// Async/Await

async function asyncFunction() {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("resolved!"), 1000);
  });

  const result = await promise;
  // wait till the promise resolves (*)

  console.log(result); // "resolved!"
}

asyncFunction();

Generator and Async-await — Comparison:

1. Generator functions/yield and Async functions/await can both be used to write asynchronous code that "waits", which means code that looks as if it was synchronous, even though it really is asynchronous.
2. Generator function are executed yield by yield i.e one yield-expression at a time by its iterator (the next method) where as Async-await, they are executed sequential await by await.
3. Async/await makes it easier to implement a particular use case of Generators.
4. The return value of Generator is always {value: X, done: Boolean} where as for Async function it will always be a promise that will either resolve to the value X or throw an error.
5. Async function can be decomposed into Generator and promise implementation which are good to know stuff.

⚝ Try this example on CodeSandbox

Q. How do you compare two date objects?

Two dates can be compared by converting them into numeric values using date.getTime() method to correspond to their time. Also, the relational operators <, <=, >, >= can be used to compare JavaScript dates.

However, the equality operators ==, !=, ===, !== cannot be used to compare (the value of) dates because:

• Two distinct objects are never equal for either strict or abstract comparisons.
• An expression comparing Objects is only true if the operands reference the same Object.

Example:

const date1 = new Date('2026-05-16T12:00:00');
const date2 = new Date('2026-05-16T12:00:00');

// Checking for equality
if (date1.getTime() === date2.getTime()) {
    console.log("Both dates are exactly equal");
}

// Checking before or after
if (date1.getTime() < date2.getTime()) {
    console.log("date1 is before date2");
}

⚝ Try this example on CodeSandbox

Q. What are closures?

A closure is the combination of a function and the lexical environment within which that function was declared. i.e, it is an inner function that has access to the outer or enclosing function's variables.

Closure is useful in hiding implementation detail in JavaScript. In other words, it can be useful to create private variables or functions.

Lexical Scope:

In lexical scoping, free variables must belong to a parent scope. JavaScript uses lexical scoping — a function's scope is determined by where it is declared, not where it is called.

Example 01:

/**
 * Lexical Scope
 **/

function init() {
  let name = "JavaScript closures"; // name is a local variable created by init
  function displayName() {
    // displayName() is the inner function, a closure
    console.log(name); // use variable declared in the parent function
  }
  return displayName;
}

var closure = init();
closure(); // Output: "JavaScript closures"

As per the above code, the inner function displayName() has access to the variable name from the outer function init(), even after init() has returned. This is a closure.

⚝ Try this example on CodeSandbox

Example 02: Private Counter

A common use of closures is to create private state that cannot be accessed or modified directly from outside.

/**
 * Closure - Private Counter
 **/

function makeCounter() {
  let count = 0; // private variable

  return {
    increment() { count++; },
    decrement() { count--; },
    getCount()  { return count; }
  };
}

const counter = makeCounter();
counter.increment();
counter.increment();
counter.increment();
counter.decrement();
console.log(counter.getCount()); // Output: 2

// count is not directly accessible
console.log(typeof count); // Output: "undefined"

The variable count is encapsulated inside makeCounter and can only be modified through the returned methods.

Q. What is callback() function in javascript?

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Example:

/**
 * Callback function
 */
function greet(name, callback) {
  console.log('Hello, ' + name);
  callback();
}

function sayBye() {
  console.log('Goodbye!');
}

greet('Alice', sayBye);
// Hello, Alice
// Goodbye!

Key points:

• Callbacks can be named or anonymous functions
• They enable asynchronous and non-blocking code
• Overusing nested callbacks leads to "callback hell" — solved by Promises or async/await

Note: callbacks are often used to continue code execution after an asynchronous operation has completed — these are called asynchronous callbacks..

⚝ Try this example on CodeSandbox

Q. How to avoid callback hell in javascript?

Callback hell occurs when asynchronous operations are deeply nested inside one another, creating an unreadable "Pyramid of Doom"

Example:

// Callback hell
getUser(id, function(user) {
  getOrders(user, function(orders) {
    getDetails(orders[0], function(details) {
      process(details, function(result) {
        console.log(result); // deeply nested
      });
    });
  });
});

Techniques for avoiding callback hell:

1. Promises — chain .then() instead of nesting:

getUser(id)
  .then(user => getOrders(user))
  .then(orders => getDetails(orders[0]))
  .then(details => process(details))
  .then(result => console.log(result))
  .catch(err => console.error(err));

2. async/await — most readable, looks synchronous:

async function run() {
  try {
    const user    = await getUser(id);
    const orders  = await getOrders(user);
    const details = await getDetails(orders[0]);
    const result  = await process(details);
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

3. Named functions — extract callbacks into separate named functions:

function onDetails(details) { process(details).then(console.log); }
function onOrders(orders)   { getDetails(orders[0]).then(onDetails); }
function onUser(user)       { getOrders(user).then(onOrders); }

getUser(id).then(onUser);

4. Promise.all — run independent async operations in parallel:

const [users, orders] = await Promise.all([getUsers(), getOrders()]);

Note: Recommended approach: Use async/await for sequential logic and Promise.all for parallel operations.

Q. How do you encode an URL?

JavaScript provides two built-in functions for URL encoding:

1. encodeURIComponent() — encodes a single URI component (query param value, path segment):

const param = 'hello world & name=John';
encodeURIComponent(param); // 'hello%20world%20%26%20name%3DJohn'

2. encodeURI() — encodes a full URL, preserving special URL characters (:, /, ?, #, &, =):

const url = 'https://example.com/search?q=hello world&lang=en';
encodeURI(url); // 'https://example.com/search?q=hello%20world&lang=en'

Key difference:

When to use which:

const base  = 'https://example.com/search';
const query = 'hello world & more';

// Correct: encode only the param value
const url = `${base}?q=${encodeURIComponent(query)}`;
// https://example.com/search?q=hello%20world%20%26%20more

// Wrong: encodeURI won't encode & in query values
encodeURI(`${base}?q=${query}`);
// https://example.com/search?q=hello%20world%20&%20more  ← & breaks the query

Rule of thumb: Use encodeURIComponent for query parameter values; use encodeURI for a complete URL.

Q. How do you decode an URL?

The decodeURI() function is used to decode a Uniform Resource Identifier (URI) previously created by encodeURI().

1. decodeURIComponent() — decodes a single encoded URI component:

decodeURIComponent('hello%20world%20%26%20name%3DJohn');
// 'hello world & name=John'

2. decodeURI() — decodes a fully encoded URL, leaving valid URL structure characters intact:

decodeURI('https://example.com/search?q=hello%20world&lang=en');
// 'https://example.com/search?q=hello world&lang=en'

Example — reading query params:

const url = 'https://example.com/search?q=hello%20world%20%26%20more';
const raw = url.split('?q=')[1];

decodeURIComponent(raw); // 'hello world & more'

Modern alternative — use URLSearchParams which handles encoding/decoding automatically:

const params = new URLSearchParams('q=hello%20world&lang=en');
params.get('q'); // 'hello world'

Q. How function overloading works in JavaScript?

JavaScript does not support traditional function overloading (unlike Java or C#) where multiple functions can have the exact same name but different parameters. If you define two functions with the same name, the second definition will completely overwrite the first one.

Example:

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

greet('Alex'); // 'Hello, undefined Alex' — second definition always wins

Ways to simulate overloading:

1. Overloading by Argument Count (arguments.length):

function calculateArea(...args) {
  if (args.length === 1) {
    return Math.PI * args[0] * args[0]; // Circle area: 1 argument (radius)
  }
  if (args.length === 2) {
    return args[0] * args[1];           // Rectangle area: 2 arguments (width, height)
  }
}

console.log(calculateArea(5));     // 78.54 (Circle)
console.log(calculateArea(4, 5));  // 20 (Rectangle)

2. Overloading by Data Type (typeof / instanceof)

function add(a, b) {
  if (typeof a === 'string') return a + b;       // string concat
  if (typeof a === 'number') return a + b;       // numeric add
}

add(1, 2);       // 3
add('foo', 'bar'); // 'foobar'

3. Overloading using an Options Object

function createUser({ name, age = 18, role = 'user' } = {}) {
  return { name, age, role };
}

createUser({ name: 'Alice', age: 20 });
createUser({ name: 'Bob', age: 30, role: 'Admin' });

4. Rest parameters for variable argument count:

function sum(...nums) {
  return nums.reduce((acc, n) => acc + n, 0);
}

sum(1, 2);       // 3
sum(1, 2, 3, 4); // 10

Recommended approach: Use the options object pattern for complex cases — it's readable, flexible, and self-documenting.

Q. What is an IIFE (Immediately Invoked Function Expression)?

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that is defined and executed immediately after its creation. It is a design pattern used to execute code immediately and isolate variables from the global scope.

Syntax:

(function () {
  console.log('Runs immediately');
})();

// Arrow function version
(() => {
  console.log('Also runs immediately');
})();

Example 01:

const result = (function () {
  const message = 'Hello from IIFE';
  return message;
})();

console.log(result); // 'Hello from IIFE'
console.log(typeof message); // 'undefined' — private to the IIFE

Example 02: Create a private scope

// Counter using IIFE
const counter = (function () {
  let count = 0; // private
  return {
    increment() { return count++; },
    value()     { return count; }
  };
})();

console.log(counter.increment()); // 0
console.log(counter.value());     // 1
//console.log(count);               // ReferenceError: count is not defined

Use cases:

• Data Privacy: Variables declared inside an IIFE cannot be accessed from the outside world. This protects your code from polluting the global scope.

• Avoiding Naming Collisions: It prevents variables from accidentally overwriting other variables in third-party libraries or scripts.

• State Preservation: Historically, it was used inside loops to lock in the current value of a variable during asynchronous operations.

Note:

With ES6 let/const and modules, IIFEs are less common today — block scoping and module scope solve the same problems. However, IIFEs are still useful for one-time initialization logic and encapsulating setup code.

Q. What is recursion in JavaScript?

Recursion is a technique in which a function calls itself until it reaches a base case (a condition that stops further calls). Every recursive function must have a base case to avoid infinite loops and stack overflow errors.

Example 01: Factorial

function factorial(n) {
  if (n <= 1) return 1;        // base case
  return n * factorial(n - 1); // recursive call
}

console.log(factorial(5)); // 120 (5 × 4 × 3 × 2 × 1)
console.log(factorial(0)); // 1

Example 02: Fibonacci

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(6)); // 8 (0, 1, 1, 2, 3, 5, 8)

Example 03: Flatten a nested array

function flattenArray(arr) {
  return arr.reduce((acc, val) =>
    Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val),
  []);
}

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

Recursion vs Iteration:

• Recursion is more readable for tree/graph traversal, nested structures, and divide-and-conquer problems
• Iteration is more performant for simple loops — use it when recursion depth could be large

Note: For deeply nested structures, iterative solutions with an explicit stack are preferred over recursion to avoid stack-overflow errors.

Q. What are nested functions in JavaScript?

A nested function is a function defined inside another function. The inner function has access to the outer function's variables and parameters through closure, but the outer function cannot access the inner function's variables.

Example:

function outerFunction(outerValue) {
  const outerVar = 'I am outer';

  function innerFunction(innerValue) {
    // inner can access outer\'s scope
    console.log(outerVar);       // 'I am outer'
    console.log(outerValue);     // passed argument
    console.log(innerValue);     // inner argument
  }

  innerFunction('I am inner');
}

outerFunction('hello');

Use case — private helper functions:

function processOrder(order) {
  function validate(o) {
    return o.quantity > 0 && o.price > 0;
  }

  function calculateTotal(o) {
    return o.quantity * o.price;
  }

  if (!validate(order)) throw new Error('Invalid order');
  return calculateTotal(order);
}

console.log(processOrder({ quantity: 3, price: 15 })); // 45

The inner helpers validate and calculateTotal are private to processOrder and not accessible from outside.

Q. What are side effects in JavaScript functions?

A side effect is any observable change that a function makes to the state outside its own scope — such as modifying a global variable, mutating an argument, writing to the DOM, or making a network request.

Functions with side effects:

let count = 0;

function increment() {
  count++; // modifies external state — side effect
}

increment();
console.log(count); // 1

Pure function (no side effects):

function add(a, b) {
  return a + b; // no external mutation, same input always gives same output
}

Common sources of side effects:

Why it matters: Functions with side effects are harder to test, reason about, and reuse. Functional programming favors isolating side effects to the edges of a system while keeping the core logic pure.

Q. What is point-free style in JavaScript?

Point-free style (also called tacit programming) is a way of defining functions without explicitly mentioning the arguments they operate on. Instead, functions are composed of other functions using combinators like map, filter, reduce, or a compose/pipe utility.

Without point-free:

const numbers = [1, 2, 3, 4, 5];

// explicitly names the argument n
const doubled = numbers.map(n => n * 2);

With point-free:

const double = x => x * 2;

// double is passed directly — no explicit argument mentioned
const doubled = numbers.map(double);

More complex example:

const trim = str => str.trim();
const toUpperCase = str => str.toUpperCase();
const words = str => str.split(' ');

// Point-free pipeline using a pipe utility
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

const process = pipe(trim, toUpperCase, words);

console.log(process('  hello world  ')); // ['HELLO', 'WORLD']

Point-free style leads to cleaner, more declarative code but can reduce readability when overused.

Q. What is function composition in JavaScript?

Function composition is the process of combining two or more functions where the output of one function becomes the input of the next. It is a core concept in functional programming.

compose applies functions right-to-left; pipe applies them left-to-right.

compose:

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

const add10  = x => x + 10;
const double = x => x * 2;
const square = x => x * x;

// square( double( add10(5) ) ) => square(double(15)) => square(30) => 900
const transform = compose(square, double, add10);
console.log(transform(5)); // 900

pipe (left-to-right):

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

// add10(5) => double(15) => square(30) => 900
const transform = pipe(add10, double, square);
console.log(transform(5)); // 900

Real-world example:

const trim       = str => str.trim();
const toLower    = str => str.toLowerCase();
const removeSpaces = str => str.replace(/\s+/g, '-');

const slugify = pipe(trim, toLower, removeSpaces);

console.log(slugify('  Hello World  ')); // 'hello-world'

L2: Intermediate (Junior-Mid / Developer)

# 10. Scope & Closures

Q. What is lexical scope in JavaScript, and how does it differ from dynamic scope?

Lexical scope (also called static scope) means that the scope of a variable is determined at author time — by where the function is written in the source code, not where it is called from. JavaScript uses lexical scoping exclusively. When the JavaScript engine (V8) parses the source, it builds a scope chain based on the physical nesting of functions and blocks; this chain never changes at runtime.

Dynamic scope, by contrast, resolves variable references based on the call stack at runtime. Languages like Bash and early Lisp dialects use dynamic scope. JavaScript has no dynamic scope (though this is sometimes confused for it because it is determined by the call site — this binding is separate from scope).

Key rules of lexical scope:

• Inner functions can access variables declared in outer functions (scope chain lookup).
• Outer functions cannot access variables declared in inner functions.
• The lookup travels outward until the global scope is reached; if not found, ReferenceError is thrown (in strict mode) or an implicit global is created (sloppy mode).

// Lexical scope example
const greeting = 'Hello';          // global scope

function outer() {
  const name = 'Alice';            // outer function scope

  function inner() {
    const punctuation = '!';       // inner function scope
    // inner can see: punctuation, name, greeting (chain lookup)
    console.log(`${greeting}, ${name}${punctuation}`);
  }

  inner(); // 'Hello, Alice!'
  // console.log(punctuation); // ReferenceError — outer cannot see inner\'s variables
}

outer();

Real-World Use Case:

React's hook system relies on lexical scope. When you write a custom hook like useCounter, the state variables declared inside it are lexically scoped to that hook invocation — they cannot bleed into unrelated components, making stateful logic safely composable and predictable in a large codebase.

Q. Explain the difference between var, let, and const with respect to scope.

Block scope means the variable only exists within the nearest enclosing {} — an if, for, while, or plain block. var ignores block boundaries and is scoped to the enclosing function (or the global object if outside any function).

function demonstrateScope() {
  if (true) {
    var  funcScoped  = 'var';   // hoisted to function top
    let  blockScoped = 'let';   // lives only inside this if-block
    const immutable  = 'const'; // same block scope as let
  }

  console.log(funcScoped);   // 'var'    
  // console.log(blockScoped); // ReferenceError 
  // console.log(immutable);   // ReferenceError 
}

// Classic var-in-loop bug
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log('var:', i), 0); // prints 3, 3, 3
}

// Fixed with let (each iteration gets its own binding)
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log('let:', j), 0); // prints 0, 1, 2
}

Real-World Use Case:

In large React/Node.js codebases, var inside for loops iterating over async operations (e.g., firing multiple API calls) was a notorious source of race-condition bugs because all callbacks shared the same i. Migrating to let (or closure-capturing patterns) eliminated entire categories of production bugs. ESLint's no-var rule enforces this at scale.

Q. What is the Temporal Dead Zone (TDZ)?

In ES6, let bindings are not subject to "variable hoisting", which means that let declarations do not move to the top of the current execution context.

Referencing the variable in the block before the initialization results in a ReferenceError (contrary to a variable declared with var, which will just have the undefined value). The variable is in a "temporal dead zone" from the start of the block until the initialization is processed.

console.log(x); //  undefined  — var is hoisted and initialised to undefined
var x = 5;

console.log(y); //  ReferenceError: Cannot access 'y' before initialization
let y = 10;

// TDZ also applies inside blocks
{
  // TDZ for 'z' starts here ↓
  // console.log(z); // ReferenceError
  let z = 42;       // TDZ ends here, z is now initialised
  console.log(z);   // 42
}

Real-World Use Case:

TDZ prevents a subtle bug in module initialisation cycles. If module A imports from module B and module B imports from module A, const exports are protected by TDZ, causing a clear ReferenceError at the problematic access point rather than silently producing undefined computations that corrupt data — making circular-dependency bugs far easier to diagnose in large monorepo setups.

Q. What is a closure and how does JavaScript implement it internally?

A closure is a function that retains a reference to its lexical environment (the scope in which it was defined) even after that outer scope has finished executing. In V8, when a function is created, the engine attaches a hidden [[Environment]] slot pointing to the current scope's environment record. As long as the inner function is reachable, the garbage collector keeps the outer environment record alive.

Practically: closures "close over" variables — not values. They hold a live reference to the variable binding, so mutations to that variable are visible inside the closure.

function makeCounter(initialValue = 0) {
  let count = initialValue; // this variable is closed over

  return {
    increment() { return ++count; },
    decrement() { return --count; },
    reset()     { count = initialValue; return count; },
    value()     { return count; },
  };
}

const counter = makeCounter(10);
console.log(counter.increment()); // 11
console.log(counter.increment()); // 12
console.log(counter.decrement()); // 11
console.log(counter.value());     // 11

// count is NOT accessible from outside
// console.log(count); // ReferenceError

Real-World Use Case:

The Redux store implementation (createStore) uses closures to encapsulate currentState, currentReducer, and listeners. External code can only interact with state through the returned dispatch, getState, and subscribe functions — a closure-based module pattern that enforces immutable, predictable state management at scale.

Q. How do closures enable the Module Pattern and data encapsulation?

The Module Pattern (and its IIFE variant) uses closures to create private state — something JavaScript classes did not natively support before ES2022 private fields (#). An IIFE runs once, defines private variables, and returns a public API. Only the returned methods can access the private variables via closure.

Example:

// Classic Module Pattern (IIFE-based)
const BankAccount = (() => {
  // Private state — not accessible from outside
  let _balance   = 0;
  const _history = [];

  function _log(action, amount) {
    _history.push({ action, amount, balance: _balance, ts: Date.now() });
  }

  // Public API
  return {
    deposit(amount) {
      if (amount <= 0) throw new RangeError('Amount must be positive');
      _balance += amount;
      _log('deposit', amount);
      return this;
    },
    withdraw(amount) {
      if (amount > _balance) throw new Error('Insufficient funds');
      _balance -= amount;
      _log('withdrawal', amount);
      return this;
    },
    getBalance()  { return _balance; },
    getHistory()  { return [..._history]; }, // defensive copy
  };
})();

BankAccount.deposit(500).deposit(200).withdraw(100);
console.log(BankAccount.getBalance()); // 600
console.log(BankAccount._balance);     // undefined — truly private

Real-World Use Case:

Before ES modules became ubiquitous, large libraries like jQuery, Lodash, and early Angular 1.x used the Module Pattern (IIFE + closure) to avoid polluting the global namespace and to encapsulate internal state. Today, ES modules provide file-level encapsulation, but the closure-based pattern is still used inside modules for class-alternative encapsulation and for factories returned from hooks or composables.

Q. What is a closure memory leak and how do you prevent it?

A closure memory leak occurs when a closure unintentionally keeps a large object (such as a DOM node, a large dataset, or a complete HTTP response) in memory by holding a reference in its closed-over scope long after the object is needed. The V8 garbage collector cannot reclaim the memory because the closure is still reachable.

Common patterns that cause leaks:

1. Event listeners not removed — the listener closes over component state, keeping the entire component tree alive.
2. Timers not cleared — setInterval callbacks closing over large objects run indefinitely.
3. Detached DOM nodes — a closure holds a reference to a DOM node that has been removed from the document.

//  Leak: interval callback closes over largeData forever
function startPolling() {
  const largeData = new Array(100_000).fill('payload');

  const id = setInterval(() => {
    console.log(largeData.length); // largeData is never freed
  }, 1000);

  // Missing: return id so the caller can clearInterval(id)
}

//  Fix: return cleanup, or null out the reference
function startPollingFixed() {
  const largeData = new Array(100_000).fill('payload');

  const id = setInterval(() => {
    process(largeData);
  }, 1000);

  return () => clearInterval(id); // caller must invoke this to free memory
}

const stopPolling = startPollingFixed();
// Later, when no longer needed:
stopPolling(); // interval cleared, largeData eligible for GC

React-specific pattern:

useEffect(() => {
  const controller = new AbortController();

  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(setData);

  return () => controller.abort(); // cleanup prevents stale closure + memory leak
}, []);

Real-World Use Case:

In Single Page Applications (SPAs), route navigation causes component unmounting. Event listeners or WebSocket message handlers registered on mount but not removed on unmount keep the entire component closure alive for the application's lifetime, causing memory growth that crashes long-running sessions (e.g., trading dashboards, kiosk apps). React's useEffect cleanup function pattern was designed specifically to address this.

Q. Explain the IIFE pattern and when you would use it over ES modules.

An Immediately Invoked Function Expression (IIFE) is a function that is defined and called in a single expression. Its primary purpose is to create an isolated scope, preventing variable declarations from leaking into the surrounding (often global) scope.

(function() { /* body */ })();
// or with arrow functions:
(() => { /* body */ })();

When to still use IIFEs over ES modules:

• Browser script tags without a bundler — when you cannot use type="module" and need scope isolation.
• Polyfill / library UMD bundles — output format used by tools like Rollup/Webpack to expose libraries as window.MyLib while avoiding global pollution.
• Initialisation code that must run exactly once and should not be importable.
• Micro-optimisation in hot paths — in rare engine-specific scenarios, an IIFE can help the optimiser treat a block as a separate compilation unit.

Example:

// UMD wrapper (simplified) — the output of many bundlers
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined'
    ? module.exports = factory()                    // CommonJS (Node.js)
    : typeof define === 'function' && define.amd
      ? define(factory)                             // AMD (RequireJS)
      : (global.MyLib = factory());                 // Browser global
}(typeof globalThis !== 'undefined' ? globalThis : this, function () {
  'use strict';

  const VERSION = '1.0.0';        // private
  return { VERSION, greet: (name) => `Hello, ${name}` }; // public API
}));

Real-World Use Case:

Webpack wraps each module in an IIFE in its legacy output mode to simulate module scope in environments lacking native ES module support (Internet Explorer, older Node.js). When targeting modern environments, Webpack and Rollup emit native ES modules instead, removing the IIFE overhead. Understanding this is essential when configuring output.libraryTarget in webpack configs for distributing npm packages.

Q. How does the scope chain work during variable lookup, and what is the performance implication?

When a variable is referenced, the JavaScript engine performs a scope chain lookup: it starts at the current scope's environment record and walks up through enclosing records until the variable is found or the global scope is exhausted.

V8 optimises this through:

1. Hidden classes / shapes — objects have stable layouts; property access is compiled to a direct memory offset.
2. Inline caching (IC) — after the first lookup, V8 caches the resolved location. Repeated access to the same variable from the same call site is O(1).
3. Closure context allocation — V8's Turbofan compiler performs context allocation analysis. Variables that are only used locally stay on the stack (fast). Variables that are closed over are promoted to a heap-allocated context object — slightly slower due to heap allocation and GC pressure.

Performance implication: deeply nested closures that close over many large variables create long-lived heap contexts. Flattening the closure chain or copying only the needed values can improve GC throughput.

Example:

//  Unnecessarily deep scope chain — engine must walk up 3 levels on each access
function level1() {
  const config = loadHeavyConfig(); // heap-allocated context (closed over)

  function level2() {
    function level3() {
      return config.timeout; // 3-level chain lookup
    }
    return level3;
  }
  return level2;
}

//  Flatten: extract only needed value to the immediate scope
function level1Optimised() {
  const { timeout } = loadHeavyConfig(); // only close over what is needed

  function level2() {
    function level3() {
      return timeout; // 1 var, still 3-level chain but smaller context object
    }
    return level3;
  }
  return level2;
}

Real-World Use Case:

In Node.js request handlers that process millions of requests per minute (e.g., an Express.js API gateway), middleware functions close over the app config object. Profiling with --prof (V8 tick profiler) or Chrome DevTools' flame graph reveals when heap contexts from closures apply GC pressure. The optimisation is to destructure only required config fields at the module level — keeping the closure context objects small and promoting faster minor GC cycles.

Q. What is the difference between scope and context (this) in JavaScript?

These two concepts are frequently confused but are entirely independent mechanisms:

Arrow functions are the intersection: they do not create their own this binding — they inherit this lexically from the enclosing scope at definition time. This makes them behave like closures for this.

Example:

const timer = {
  label: 'Countdown',
  seconds: 3,

  //  Regular function: `this` is determined by caller (lost in setTimeout callback)
  startBroken() {
    setTimeout(function () {
      console.log(this.label); // undefined — `this` is global/undefined (strict mode)
    }, 1000);
  },

  //  Arrow function: `this` inherited lexically from startFixed\'s scope
  startFixed() {
    setTimeout(() => {
      console.log(this.label); // 'Countdown' 
    }, 1000);
  },

  //  Explicit bind alternative
  startWithBind() {
    setTimeout(function () {
      console.log(this.label); // 'Countdown' 
    }.bind(this), 1000);
  },
};

timer.startFixed();

Real-World Use Case:

React class components historically required .bind(this) in the constructor for event handlers because a regular function passed as a JSX prop loses its this binding. The shift to arrow function class fields (handleClick = () => { ... }) and then to functional components with hooks eliminated this entire category of this-related bugs — demonstrating that understanding the scope vs. context distinction is foundational to making informed decisions about component architecture.

# 11. Hoisting

Q. What is hoisting in JavaScript, and what gets hoisted?

Hoisting is a JavaScript mechanism where variable, function, class, and import declarations are conceptually moved to the top of their containing scope during the compilation phase, before the code executes. Hoisting allows functions to be safely used in code before they are declared.

Example 01: Variable Hoisting

console.log(message); // output: undefined
var message = "The variable Has been hoisted";

The above code looks like as below to the interpreter,

var message;
console.log(message);
message = "The variable Has been hoisted";

Example 02: let and const hoisting

All declarations (function, var, let, const and class) are hoisted in JavaScript, while the var declarations are initialized with undefined, but let and const declarations remain uninitialized.

console.log(x);
let x = 10;

// Output: ReferenceError: x is not defined

Example 03: Function Hoisting

One of the advantages of hoisting is that it lets you use a function before you declare it in your code.

getName("Sadhika Sandal");

function getName(name) {
  console.log("Hello " + name);
}

Output:

Hello Sadhika Sandal

They will only get initialized when their lexical binding (assignment) is evaluated during runtime by the JavaScript engine. This means we can't access the variable before the engine evaluates its value at the place it was declared in the source code. This is what we call Temporal Dead Zone (TDZ), A time span between variable creation and its initialization where they can't be accessed.

What gets hoisted and how:

Real-World Use Case:

Node.js module systems and build tools like Webpack rely on function-declaration hoisting to allow modules to call utility functions defined later in the same file — enabling a readable "public API at the top, implementation details below" code style. However, misunderstanding var hoisting is responsible for a large class of production bugs in legacy jQuery/Angular 1 codebases, which is why the Airbnb ESLint config bans var and mandates let/const.

Q. In which case the function definition is not hoisted in JavaScript?

Let us take the following function expression

var foo = function foo() {
  return 12;
}

In JavaScript var-declared variables and functions are hoisted. Let us take function hoisting first. Basically, the JavaScript interpreter looks ahead to find all the variable declaration and hoists them to the top of the function where It is declared. For example:

foo(); // Here foo is still undefined
var foo = function foo() {
  return 12;
};

The code above behind the scene look something like this:

var foo = undefined;
foo(); // Here foo is undefined
foo = function foo() {
  // Some code stuff
}

var foo = undefined;
foo = function foo() {
  // Some code stuff
}
foo(); // Now foo is defined here

Q. How does hoisting behave differently for function declarations versus function expressions and arrow functions?

• Function declaration (function foo() {}): The entire function — name and body — is hoisted. The function is callable anywhere in its scope, even before the line it appears on.
• Function expression (const foo = function() {}): Only the variable declaration is hoisted (if var); the assignment — the function value itself — is not. Calling it before the line throws TypeError (not ReferenceError) because the variable exists but holds undefined.
• Arrow function (const foo = () => {}): Same as function expression — it is always assigned to a variable, so the same rules apply.

Example:

// 1. Function Declaration — fully hoisted 
console.log(add(2, 3)); // 5

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

// 2. Function Expression with var — var hoisted as undefined 
console.log(multiply); // undefined
// console.log(multiply(2, 3)); // TypeError: multiply is not a function

var multiply = function (a, b) {
  return a * b;
};

// 3. Function Expression with let — TDZ 
// console.log(divide(10, 2)); // ReferenceError
const divide = (a, b) => a / b;

// 4. Practical gotcha: conditional function declaration (avoid — browser-dependent)
if (true) {
  function conditionalFn() { return 'inside if'; }
}
// Behaviour in strict mode: conditionalFn is block-scoped to the if-block
// Behaviour in sloppy mode: varies by browser — avoid this pattern entirely

Real-World Use Case:

In large React component files, developers often define helper arrow functions (const formatDate = (d) => ...) after the component function that uses them. Because the component is a const arrow function itself, calling formatDate inside it only works if formatDate is defined above — otherwise a ReferenceError occurs at module load time. Understanding hoisting rules guides file organisation: place utility declarations before their consumers, or use function declarations when ordering flexibility matters.

Q. How does hoisting interact with the class declaration?

Class declarations are hoisted to the top of their block scope — like let and const — but they are not initialised until the declaration is evaluated. This means they sit in the Temporal Dead Zone (TDZ) and accessing a class before its declaration throws a ReferenceError, not a TypeError. This is a deliberate choice to prevent confusing inheritance hierarchies from being constructed before base classes are fully defined.

Example:

//  Class in TDZ — accessing before declaration throws ReferenceError
// const p = new Person('Alice'); // ReferenceError: Cannot access 'Person' before initialization

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hi, I am ${this.name}`;
  }
}

const p = new Person('Alice'); // 
console.log(p.greet());        // 'Hi, I am Alice'

// Class expression — same as function expression: name is in TDZ if const/let
const Animal = class {
  constructor(species) {
    this.species = species;
  }
};

const dog = new Animal('Canis lupus'); // 

Practical implication — class vs. function constructor:

// Function constructor: hoisted entirely — can be used before declaration
const f = new Foo(); // 
function Foo() { this.x = 1; }

// Class: TDZ — cannot be used before declaration
// const b = new Bar(); //  ReferenceError
class Bar { constructor() { this.x = 1; } }

Real-World Use Case:

When splitting large Node.js services into files with circular require() references, class-based modules that are accessed during the require() cycle before the class declaration evaluates throw ReferenceError. Understanding the TDZ for classes helps engineers design module load order carefully — or avoid circular dependencies by refactoring to dependency injection patterns (e.g., passing the class as a parameter rather than importing it at the module level).

Q. What is the hoisting behaviour inside let/const blocks, and how does it affect switch statements?

let and const are block-scoped and hoisted within their block to the TDZ. A switch statement's {} is a single block — all case clauses share the same block scope. This causes a subtle bug: a let declared in one case is technically in scope (hoisted) for all other cases in the same switch block, causing a SyntaxError if another case attempts to declare the same name.

Example:

//  SyntaxError: Identifier 'result' has already been declared
function getLabel(status) {
  switch (status) {
    case 'active':
      let result = 'User is active';   // hoisted to top of switch block
      return result;
    case 'inactive':
      let result = 'User is inactive'; // SyntaxError — same block, same name
      return result;
  }
}

//  Fix 1: wrap each case in its own block
function getLabelFixed(status) {
  switch (status) {
    case 'active': {
      let result = 'User is active';
      return result;
    }
    case 'inactive': {
      let result = 'User is inactive'; // own block — no conflict
      return result;
    }
    default:
      return 'Unknown';
  }
}

//  Fix 2: prefer object lookup over switch for simple mappings
const STATUS_LABELS = {
  active:   'User is active',
  inactive: 'User is inactive',
};
const getLabel2 = (status) => STATUS_LABELS[status] ?? 'Unknown';

Real-World Use Case:

This exact bug has appeared in production Redux reducers where developers switched from var to let during a linting migration. All case branches in a reducer's switch share one block, so re-declaring let draft in multiple cases causes a SyntaxError caught only at parse time — blocking the entire app from loading. The standard Redux Toolkit solution is to use Immer-based createSlice instead, which replaces the switch reducer pattern entirely.

Q. How does hoisting affect the execution order of multiple var declarations and function declarations with the same name?

When multiple var declarations or function declarations share the same identifier in the same scope, the engine applies specific precedence rules during the compilation phase:

1. var declarations are merged into one — only one undefined slot is allocated; whichever assignment executes last wins at runtime.
2. Function declarations override var declarations of the same name during hoisting — the function body wins over var's undefined.
3. Multiple function declarations with the same name: the last one in source order wins (it overwrites the earlier one during hoisting).

Example:

// What does the programmer see:
var x = 1;
function x() { return 'fn'; }
var x = 2;

// What the engine processes during compilation:
// 1. var x → undefined (registered)
// 2. function x → x = function() { return 'fn'; } (overwrites var)
// 3. (execution phase) x = 1
// 4. (execution phase) x = 2
console.log(x); // 2 — last assignment wins

// Multiple function declarations — last one wins
function greet() { return 'Hello'; }
function greet() { return 'Hi'; }   // overwrites the first
console.log(greet()); // 'Hi'

// var + function same name — function hoisted OVER var during compilation
console.log(typeof answer); // 'function' (not 'undefined')
var answer = 42;
function answer() { return 'forty-two'; }
console.log(answer); // 42 — runtime assignment overrides the function

Why this matters architecturally:

In large legacy codebases (pre-modules), concatenating multiple script files together frequently caused silent name collisions of this kind. Two files each declaring var config = ... or function init() {} would silently overwrite each other. The last file in the bundle always won, causing intermittent and environment-specific bugs that only appeared in production where file concatenation order differed from the development setup.

Real-World Use Case:

This collision class of bugs was a primary driver for the adoption of the Module Pattern (IIFE-based), then AMD/CommonJS, and ultimately ES modules — each solution adding a layer of scope isolation to prevent hoisting-based name collisions. Modern bundlers (Webpack, Rollup) assign each module its own scope by wrapping it, making cross-module var collision impossible. Understanding this history explains why "use strict" and ES modules are defaults in all modern toolchains.

# 12. ES6 Features

Q. How do arrow functions differ from regular functions, and when should you not use them?

Arrow functions (=>) introduced in ES2015 are a concise syntax for writing functions, but they are not simply shorthand for function. They have fundamental semantic differences:

When NOT to use arrow functions:

1. Object methods that need dynamic this (obj.method() — arrow's this is the enclosing scope, not obj).
2. Constructor functions — arrow functions cannot be called with new.
3. Event handlers that need this to refer to the DOM element (element.addEventListener('click', () => {}) — this is the outer context, not the element).
4. Generator functions — arrow syntax does not support function*.
5. Functions that need their own arguments object.

// --- Concise bodies ---
const double  = x => x * 2;              // single param, expression body
const add     = (a, b) => a + b;         // multiple params
const toUpper = str => ({ upper: str.toUpperCase() }); // returning an object literal — wrap in ()

// --- `this` lexical binding ---
class Timer {
  constructor() {
    this.ticks = 0;
  }

  start() {
    // Arrow function: `this` is the Timer instance (lexical)
    this.interval = setInterval(() => {
      this.ticks++;
      console.log(this.ticks);
    }, 1000);
  }

  stop() {
    clearInterval(this.interval);
  }
}

// --- When NOT to use arrow ---
const counter = {
  count: 0,
  //  Arrow: `this` is the module/global scope, not counter
  incrementBad: () => { counter.count++; },
  //  Method shorthand: `this` is counter
  incrementGood() { this.count++; },
};

//  Arrow as constructor
// const p = new (() => {}); // TypeError: (intermediate value) is not a constructor

//  No own `arguments`
const fn = () => {
  // console.log(arguments); // ReferenceError in strict mode / module scope
};
const fn2 = (...args) => args; //  Use rest params instead

Real-World Use Case:

React's functional components and hooks use arrow functions almost exclusively for event handlers passed as JSX props (onClick={() => dispatch(action)}). Because these arrow functions inherit this from the component scope (which in a functional component is irrelevant — there is no this), the lexical binding is harmless and the concise syntax reduces boilerplate. Conversely, in Express.js route handlers or Mongoose middleware that rely on this referring to the document/request, using arrow functions is a common production bug — the official Mongoose docs explicitly warn against it.

Q. What are template literals, and what are their advanced capabilities beyond string interpolation?

Template literals (backtick strings) introduced in ES2015 offer four key capabilities over traditional string literals:

1. String interpolation — embed any expression with ${expr}.
2. Multi-line strings — newlines are literal; no \n needed.
3. Expression evaluation — any valid JavaScript expression inside ${} including ternaries, function calls, and arithmetic.
4. Tagged templates — a function (tag) is called with the string parts and interpolated values, enabling domain-specific languages (DSLs), sanitisation, and localisation.

// 1. Interpolation
const user = { name: 'Alice', score: 42 };
console.log(`Player: ${user.name}, Score: ${user.score * 2}`); // Player: Alice, Score: 84

// 2. Multi-line
const html = `
  <article>
    <h1>${user.name}</h1>
    <p>Score: ${user.score}</p>
  </article>
`.trim();

// 3. Expressions inside ${}
const items = ['apple', 'banana', 'cherry'];
console.log(`You have ${items.length} item${items.length !== 1 ? 's' : ''}.`);
// 'You have 3 items.'

// 4. Tagged template literals
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) =>
    result + str + (values[i] !== undefined ? `<mark>${values[i]}</mark>` : ''),
    ''
  );
}

const product = 'JavaScript';
const year = 2015;
console.log(highlight`${product} was standardised in ${year}.`);
// '<mark>JavaScript</mark> was standardised in <mark>2015</mark>.'

// SQL injection prevention with tagged templates (concept)
function sql(strings, ...values) {
  const sanitised = values.map(v => sanitiseInput(v)); // escape each interpolated value
  return strings.reduce((q, str, i) => q + str + (sanitised[i] ?? ''), '');
}
function sanitiseInput(v) { return String(v).replace(/'/g, "''"); }

const userId = "1' OR '1'='1"; // SQL injection attempt
const query = sql`SELECT * FROM users WHERE id = '${userId}'`;
// SELECT * FROM users WHERE id = '1'' OR ''1''=''1'  — safely escaped

Real-World Use Case:

The styled-components and emotion CSS-in-JS libraries are built entirely on tagged template literals. When you write styled.div`color: ${props => props.primary ? 'blue' : 'grey'};`, the library's tag function receives the static CSS parts and the dynamic value functions, generates a unique class name, injects a <style> rule, and tracks theme changes — all without any custom parser. This demonstrates that tagged templates can implement fully featured DSLs (CSS, GraphQL, SQL, i18n) natively in JavaScript with zero dependencies.

Q. Explain destructuring assignment — object, array, nested, and with defaults.

Destructuring is a syntax for unpacking values from arrays or properties from objects into distinct variables in a single statement. It is purely syntactic sugar — the engine converts it to a series of property accesses and assignments.

// ── Object destructuring ──────────────────────────────────────────────────────

const user = { id: 1, name: 'Alice', role: 'admin', address: { city: 'NYC', zip: '10001' } };

// Basic
const { id, name } = user;

// Rename (alias)
const { name: username, role: userRole } = user;
console.log(username, userRole); // 'Alice', 'admin'

// Default values (used when property is undefined)
const { theme = 'light', lang = 'en' } = user;
console.log(theme, lang); // 'light', 'en'

// Nested destructuring
const { address: { city, zip } } = user;
console.log(city, zip); // 'NYC', '10001'

// Rest in object destructuring
const { id: userId, ...rest } = user;
console.log(userId); // 1
console.log(rest);   // { name: 'Alice', role: 'admin', address: {...} }

// ── Array destructuring ───────────────────────────────────────────────────────

const rgb = [255, 128, 0];

const [red, green, blue] = rgb;
const [r, , b] = rgb;    // skip elements with empty commas
const [first, ...others] = rgb; // rest in array

// Swap variables without temp
let a = 1, bVal = 2;
[a, bVal] = [bVal, a];
console.log(a, bVal); // 2, 1

// Default values
const [x = 0, y = 0, z = 0] = [10, 20];
console.log(x, y, z); // 10, 20, 0

// ── Function parameter destructuring ─────────────────────────────────────────

function renderCard({ title, subtitle = 'No subtitle', tags = [] } = {}) {
  return `<h1>${title}</h1><h2>${subtitle}</h2><ul>${tags.map(t => `<li>${t}</li>`).join('')}</ul>`;
}

renderCard({ title: 'Hello', tags: ['js', 'es6'] });
renderCard(); //  uses defaults — the `= {}` prevents TypeError when called with no args

// ── Mixed / deeply nested ─────────────────────────────────────────────────────

const apiResponse = {
  data: {
    users: [
      { id: 1, profile: { avatar: 'alice.png' } },
      { id: 2, profile: { avatar: 'bob.png' } },
    ],
  },
};

const { data: { users: [{ id: firstId, profile: { avatar: firstAvatar } }] } } = apiResponse;
console.log(firstId, firstAvatar); // 1, 'alice.png'

Real-World Use Case:

React's useState hook returns a two-element array precisely to enable array destructuring with custom naming: const [count, setCount] = useState(0). This pattern lets each call site choose its own variable names without the library needing to know them. Similarly, React component props are universally destructured in the function signature (function Button({ label, onClick, disabled = false }) {}), reducing prop-drilling verbosity and making prop contracts immediately visible — a pattern enforced by most team style guides and ESLint configs.

Q. What is the difference between the rest parameter and the spread operator?

Both use the ... syntax but serve opposite purposes:

// ── Rest parameter ───────────────────────────────────────────────────────────

function sum(...numbers) {           // collects all args into an array
  return numbers.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

function log(level, ...messages) {   // first arg fixed, rest collected
  console[level](messages.join(' '));
}
log('warn', 'Disk', 'usage', 'high'); // console.warn('Disk usage high')

// ── Spread operator ──────────────────────────────────────────────────────────

// 1. Expanding arrays
const nums = [1, 2, 3];
const more = [...nums, 4, 5];        // [1, 2, 3, 4, 5]
const copy = [...nums];              // shallow copy

// 2. Spreading into a function call
console.log(Math.max(...nums));      // 3

// 3. Merging / cloning objects (shallow)
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', fontSize: 14 };
const config = { ...defaults, ...userPrefs }; // right side wins on key collision
// { theme: 'dark', lang: 'en', debug: false, fontSize: 14 }

// 4. Spreading a string into characters
const chars = [..."hello"]; // ['h', 'e', 'l', 'l', 'o']

// 5. Converting NodeList / Set to Array
const unique = [...new Set([1, 1, 2, 3, 3])]; // [1, 2, 3]

Real-World Use Case:

Redux reducers use object spread to produce new state immutably without mutating the existing state object — a requirement of Redux's change-detection mechanism: return { ...state, isLoading: false, data: action.payload }. This replaces Object.assign({}, state, { isLoading: false }) with far more readable syntax. The V8 engine optimises spread-based object cloning with the same hidden-class mechanisms as Object.assign, so there is no meaningful performance difference in most application code.

Q. Explain ES6 Map and Set — how do they differ from plain objects and arrays, and when should you use them?

Set is a collection of unique values of any type. It maintains insertion order and provides O(1) has() lookup (hash-based internally in V8).

Map is a collection of key-value pairs where keys can be any type (including objects, functions, and NaN). Plain objects only allow string/Symbol keys.

// ── Set ──────────────────────────────────────────────────────────────────────

const visited = new Set();
visited.add('/home');
visited.add('/about');
visited.add('/home');   // duplicate — silently ignored

console.log(visited.size);        // 2
console.log(visited.has('/about')); // true (O(1))

// Deduplicate an array
const tags = ['js', 'css', 'js', 'html', 'css'];
const uniqueTags = [...new Set(tags)]; // ['js', 'css', 'html']

// ── Map ──────────────────────────────────────────────────────────────────────

const cache = new Map();

// Object as key (impossible with plain objects as keys)
const req1 = { url: '/api/users' };
const req2 = { url: '/api/posts' };

cache.set(req1, { data: [1, 2, 3], ts: Date.now() });
cache.set(req2, { data: ['a', 'b'], ts: Date.now() });

console.log(cache.get(req1).data); // [1, 2, 3]
console.log(cache.size);           // 2

// Iteration
for (const [key, value] of cache) {
  console.log(key.url, value.data);
}

// Convert to / from plain object
const mapFromObj = new Map(Object.entries({ a: 1, b: 2 }));
const objFromMap = Object.fromEntries(mapFromObj);

Real-World Use Case:

WeakMap (a variant of Map with weak references and object-only keys) is used by React's Concurrent Mode internals to associate component fiber metadata with DOM nodes without preventing garbage collection of unmounted components. Set is used in many state management libraries (Zustand, Jotai) to track subscriber callbacks: O(1) add/delete/has operations make subscription management significantly faster than array-based alternatives at scale (thousands of subscribers in large dashboards).

Q. What are default parameters in ES6, and how do they interact with undefined vs. null?

ES6 default parameters allow function parameters to have a fallback value used when the argument is undefined or when no argument is provided. Crucially, passing null does not trigger the default — null is an explicit value meaning "no object here", while undefined means "value not provided".

Default expressions are evaluated lazily — they run each time the function is called with a missing argument, not once at function definition time. This allows defaults that reference other parameters or call functions.

// Basic defaults
function createUser(name, role = 'viewer', createdAt = new Date()) {
  return { name, role, createdAt };
}

createUser('Alice');                     // role: 'viewer', createdAt: <now>
createUser('Bob', 'admin');             // role: 'admin'
createUser('Carol', undefined, new Date('2024-01-01')); // role: 'viewer' (undefined triggers default)
createUser('Dave', null);              // role: null — null does NOT trigger default 

// Default referencing earlier parameter
function range(start, end = start + 10) {
  return Array.from({ length: end - start }, (_, i) => start + i);
}
console.log(range(5));    // [5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
console.log(range(1, 4)); // [1, 2, 3]

// Default calling a function (evaluated per call)
let callCount = 0;
function getDefault() { return ++callCount; }

function track(id = getDefault()) { return id; }
console.log(track());  // 1
console.log(track());  // 2  — getDefault() called again
console.log(track(99)); // 99 — getDefault() NOT called

// Combining with destructuring
function connect({ host = 'localhost', port = 5432, ssl = false } = {}) {
  return `${ssl ? 'https' : 'http'}://${host}:${port}`;
}
connect();                          // 'http://localhost:5432'
connect({ host: 'db.prod.io', ssl: true }); // 'https://db.prod.io:5432'

Real-World Use Case:

Express.js middleware factories and database client factory functions (e.g., createPool({ max = 10, idleTimeout = 30_000, ssl = false } = {})) use default parameters combined with destructuring to define safe, self-documenting APIs. When a downstream service calls the factory without all options, sensible defaults keep the service running. The = {} on the destructured parameter is critical — without it, calling connect() (no argument at all) throws TypeError: Cannot destructure property 'host' of undefined.

Q. What are Symbol and Symbol.iterator, and how do you make a custom object iterable?

Symbol is a primitive type introduced in ES6 that produces a guaranteed-unique value each time it is called, even with the same description string. Symbols are primarily used as:

1. Unique property keys — prevent accidental property name collisions, especially in library/framework code that augments user objects.
2. Well-known Symbols — Symbol.iterator, Symbol.toPrimitive, Symbol.hasInstance, etc. — hooks into JavaScript's built-in protocols.

Symbol.iterator is the well-known Symbol that makes any object iterable — compatible with for...of, spread (...), destructuring, Array.from(), and other iteration consumers.

// ── Unique keys ──────────────────────────────────────────────────────────────

const ID = Symbol('id');        // description is only for debugging
const user = { name: 'Alice', [ID]: 42 };

console.log(user[ID]);          // 42
console.log(user['id']);        // undefined — Symbol key ≠ string key
console.log(Object.keys(user)); // ['name'] — Symbol keys hidden from Object.keys
console.log(Object.getOwnPropertySymbols(user)); // [Symbol(id)]

// ── Custom iterable with Symbol.iterator ─────────────────────────────────────

class Range {
  constructor(start, end, step = 1) {
    this.start = start;
    this.end   = end;
    this.step  = step;
  }

  [Symbol.iterator]() {
    let current = this.start;
    const { end, step } = this;

    return {
      next() {
        if (current <= end) {
          const value = current;
          current += step;
          return { value, done: false };
        }
        return { value: undefined, done: true };
      },
      [Symbol.iterator]() { return this; }, // make the iterator itself iterable
    };
  }
}

const evens = new Range(2, 10, 2);

for (const n of evens)     console.log(n);    // 2 4 6 8 10
console.log([...evens]);                       // [2, 4, 6, 8, 10]
const [first, second] = evens;                 // destructuring 
console.log(first, second);                    // 2, 4

// ── Symbol.toPrimitive — custom type coercion ────────────────────────────────

const money = {
  amount: 100,
  currency: 'USD',
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') return this.amount;
    if (hint === 'string') return `${this.amount} ${this.currency}`;
    return this.amount; // default hint
  },
};

console.log(`${money}`);      // '100 USD'
console.log(+money);          // 100
console.log(money + 50);      // 150

Real-World Use Case:

Node.js stream.Readable implements Symbol.asyncIterator, making streams consumable with for await...of. This is how modern file processing pipelines are built: for await (const chunk of fs.createReadStream('data.csv')) — no event listeners, no manual pipe management. Similarly, MongoDB's cursor implements Symbol.asyncIterator, enabling for await (const doc of collection.find(query)) — clean, memory-efficient document streaming without loading the entire result set into memory.

# 13. DOM & Events

Q. What is event handling in javascript?

The change in the state of an object is known as an Event. In html, there are various events which represents that some activity is performed by the user or by the browser.

When javascript code is included in HTML, js react over these events and allow the execution. This process of reacting over the events is called Event Handling. Thus, js handles the HTML events via Event Handlers.

Some of the HTML event handlers are:

Mouse events:

Form events:

Window/Document events:

Example: Click Event

<!DOCTYPE html>
<html>
  <head>
    <script>
      function greeting() {
        alert("Hello! Good morning");
      }
    </script>
  </head>
  <body>
    <h2>Click Event Example</h2>
    <button type="button" onclick="greeting()">Click me</button>
  </body>
</html>

⚝ Try this example on CodeSandbox

Q. How to create and trigger events in javascript?

Events can be handled either through addEventListener() method or we can trigger events on individual components by defining specific JavaScript functions.

Syntax:

document.addEventListener(event, function, phase)

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Click Event</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h3>Click on the page to trigger click event</h3>
    <script type="text/javascript">
      document.addEventListener("click", function () {
        console.log("You clicked inside the document");
      });
    </script>
  </body>
</html>

⚝ Try this example on CodeSandbox

Q. What is an event delegation?

Event Delegation is basically a pattern to handle events efficiently. Instead of adding an event listener to each and every similar element, we can add an event listener to a parent element and call an event on a particular target using the event.target property of the event object.

Example:

<div id="buttons"> 
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
</div>

<script>
  document.getElementById('buttons')
    .addEventListener('click', event => { 
      if (event.target.className === 'buttonClass') { 
        console.log('Click!');
      }
    });
</script>

⚝ Try this example on CodeSandbox

Q. What is an event flow?

Event flow is the order in which event is received on the web page. When you click an element that is nested in various other elements, before your click actually reaches its destination, or target element, it must trigger the click event each of its parent elements first, starting at the top with the global window object.

There are two ways of event flow

• Top to Bottom (Event Capturing)
• Bottom to Top (Event Bubbling)

Q. What is event bubbling?

Event bubbling is a type of event propagation where the event first triggers on the innermost target element, and then successively triggers on the ancestors (parents) of the target element in the same nesting hierarchy till it reaches the outermost DOM element.

Example: If you click on EM, the handler on DIV runs.

<div onclick="alert('The handler!')">
  <em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs.</em>
</div>

Stopping bubbling:

<body onclick="alert(`the bubbling doesn\'t reach here`)">
  <button onclick="event.stopPropagation()">Click me</button>
</body>

⚝ Try this example on CodeSandbox

Q. What is event capturing?

Event capturing is a type of event propagation where the event is first captured by the outermost element and then successively triggers on the descendants (children) of the target element in the same nesting hierarchy till it reaches the inner DOM element.

Example:

<article id="ancestor">
    Article Element
    <div id="parent">
      DIV Element
      <p id="child">
        P Element
      </p>
    </div>
</article>

<script>
  // Script to click event handler to capture on each element
  for (let elem of document.querySelectorAll("*")) {
    elem.addEventListener(
      "click",
      (e) => console.log("Capturing:", elem.tagName),
      true
    );
  }
</script>

⚝ Try this example on CodeSandbox

Q. How do you submit a form using JavaScript?

Generally, a form is submitted when the user presses a submit button. JavaScript provides the form object that contains the submit() method. Use the "id" of the form to get the form object.

Example:

<form id="myForm" action="/action_page.php">
  Search: <input type='text' name='query' />
  <input type="button" onclick="handleSubmit()" value="Submit form">
</form>

<script>
function handleSubmit() {
  document.getElementById("myForm").submit();
}
</script>

Q. What is the purpose of void(0)?

The void(0) is used to prevent the page from refreshing. This will be helpful to eliminate the unwanted side-effect, because it will return the undefined primitive value.

It is commonly used for HTML document that uses href="JavaScript:void(0);" within an <a> element. i.e, when you click a link, the browser loads a new page or refreshes the same page. But this behavior will be prevented using this expression.

Example: the below link notify the message without reloading the page

<a href="JavaScript:void(0);" onclick="alert('Prevent the page from refreshing!')">Click Me!</a>

⚝ Try this example on CodeSandbox

Q. What is the use of preventDefault method?

The preventDefault() method is used to prevent the browser from executing the default action of the selected element. It can prevent the user from processing the request by clicking the link.

For example, prevent form submission when clicking on submit button and prevent opening the page URL when clicking on hyper link are some common usecases.

document.getElementById("link").addEventListener("click", function(event) {
   event.preventDefault();
});

Note: Remember that not all events are cancelable.

Q. What is the use of stopPropagation method?

The stopPropagation method is used to stop the event from bubbling up the event chain.

For example, the below nested divs with stopPropagation method prevents default event propagation when clicking on nested div(Div1)

<p>Click DIV1 Element</p>
<div onclick="secondFunc()">DIV 2
  <div onclick="firstFunc(event)">DIV 1</div>
</div>

<script>
function firstFunc(event) {
  alert("DIV 1");
  event.stopPropagation();
}

function secondFunc() {
  alert("DIV 2");
}
</script>

Q. What is difference between stoppropagation, stopimmediatepropagation and preventdefault in javascript?

1. event.preventDefault():

This method is used to stop the browser's default behavior when performing an action.

Example:

<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>

<script>
  document.querySelector("#id-checkbox").addEventListener("click", function(event) {
  document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won\'t let you check this!<br>";
  event.preventDefault();
}, false);
</script>

2. event.stopPropagation():

This method is used to prevent the propagation of an event as defined in the capturing/bubbling phase of the flow of an event in the browser.

Example:

<div class="parent" (onClick)="console.log('parent')">
    <button class="child" (onClick)="buttonClick(event)"></button>
</div>
<script>
    function buttonClick(event) {
        event.stopPropagation();
        console.log('child');
    }
</script>

3. event.stopImmediatePropagation():

With stopImmediatePropagation(), along with the event propagation, other event handlers will also be prevented from execution.

As a result, clicking on the div element will:

• Prevent event bubbling to the parent elements
• Prevent the execution of any other event listener attached to the element

Q. What is the use of setTimeout?

The setTimeout() method is used to call a function or evaluates an expression after a specified number of milliseconds.

Syntax:

setTimeout(callback function, delay in milliseconds)

Example:

setTimeout(() => {
  console.log("Delayed for 1 second.");
}, "1000")

Q. What is the use of setInterval?

The setInterval() method is used to call a function or evaluates an expression at specified intervals (in milliseconds). The setInterval() method continues calling the function until clearInterval() is called, or the window is closed.

Example:

<p id="timer"></p>

<script>
setInterval(myTimer, 1000);

function myTimer() {
  const date = new Date();
  document.getElementById("timer").innerHTML = date.toLocaleTimeString();
}
</script>

⚝ Try this example on CodeSandbox

Q. What is the purpose of clearTimeout method?

The clearTimeout() function is used in javascript to clear the timeout which has been set by setTimeout() function before that. i.e, The return value of setTimeout() function is stored in a variable and it's passed into the clearTimeout() function to clear the timer.

For example, the below setTimeout method is used to display the message after 3 seconds. This timeout can be cleared by clearTimeout() method.

// clearTimeout()

var msg;
function greeting() {
  console.log("Hello World!");
  stop();
}
function start() {
  console.log("start");
  msg = setTimeout(greeting, 3000);
}
function stop() {
  console.log("stop");
  clearTimeout(msg);
}

start();

// Output
Start
Hello World!
Stop

⚝ Try this example on CodeSandbox

Q. What is the purpose of clearInterval method?

The clearInterval() function is used in javascript to clear the interval which has been set by setInterval() function. i.e, The return value returned by setInterval() function is stored in a variable and it's passed into the clearInterval() function to clear the interval.

For example, the below setInterval method is used to display the message for every 3 seconds. This interval can be cleared by clearInterval() method.

// clearInterval()

var msg;
function greeting() {
  console.log("Hello World!");
  stop();
}
function start() {
  console.log("start");
  msg = setInterval(greeting, 3000);
}
function stop() {
  console.log("stop");
  clearInterval(msg);
}

start();

// Output
Start
Hello World!
Stop

⚝ Try this example on CodeSandbox

Q. What is the difference between document load and DOMContentLoaded events?

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for assets(stylesheets, images, and subframes) to finish loading. Whereas The load event is fired when the whole page has loaded, including all dependent resources(stylesheets, images).

Q. What is requestAnimationFrame() in JavaScript?

requestAnimationFrame() is a browser API that tells the browser to call a specified function before the next repaint. It is the recommended way to create smooth animations and visual updates because it synchronizes with the browser's refresh rate (typically 60 fps), avoids unnecessary renders when the tab is hidden, and does not block the main thread.

Syntax:

const id = requestAnimationFrame(callback);
cancelAnimationFrame(id); // cancel if needed

Example — Smooth animation loop:

let start = null;
const box = document.getElementById('box');

function animate(timestamp) {
  if (!start) start = timestamp;

  const elapsed = timestamp - start;
  const position = Math.min(elapsed / 10, 500); // move up to 500px over time

  box.style.transform = `translateX(${position}px)`;

  if (position < 500) {
    requestAnimationFrame(animate); // schedule next frame
  }
}

requestAnimationFrame(animate);

Comparison — requestAnimationFrame vs setTimeout:

Use cases:

• Smooth CSS/canvas animations
• Game loops
• Scroll-driven effects
• Any DOM update that should stay in sync with the browser's paint cycle

# 14. Regular Expression

Q. What is a RegExp object?

A regular expression is an object that describes a pattern of characters.

The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that use regular expressions to perform powerful pattern-matching and search-and-replace functions on text.

Syntax:

// Literal notation 
let pattern = /pattern/attributes;

// RegExp constructor
let pattern = new RegExp(pattern, attributes);

• pattern − A string that specifies the pattern of the regular expression or another regular expression.
• attributes − An optional string containing any of the "g", "i", and "m" attributes that specify global, case-insensitive, and multi-line matches, respectively.

Example:

let pattern = /ab+c/i; // literal notation

let pattern = new RegExp(/ab+c/, 'i') // constructor with regular expression literal as first argument

Q. What are the string method available in regular expression?

Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the exec() and test() methods of RegExp, and with the match(), matchAll(), replace(), replaceAll(), search(), and split() methods of String.

Example 01: test()

Tests for a match in a string. It returns true or false

let exp = /Hello/;
let res1 = exp.test("Hello World");
let res2 = exp.test("Hi");

console.log(res1); // true
console.log(res2); // false

Example 02: exec()

Executes a search for a match in a string. It returns an array of information or null on a mismatch.

let res1 = exp.exec("Hello World");
let res2 = exp.exec("Hi");

console.log(res1); // ['Hello', index: 0, input: 'Hello World', groups: undefined]
console.log(res2); // null

⚝ Try this example on CodeSandbox

Q. What are modifiers in regular expression?

Modifiers can be used to perform case-insensitive and global searches.

Example 01: Global Search

let text = "Hello World! Hello World!";
let pattern = /Hello/g;

console.log(text.match(pattern)); // ['Hello', 'Hello']

Example 02: Case-insensitive match

let string = "Hello World!";
let pattern = /WORLD/i;

console.log(string.match(pattern2)); // ['World', index: 6, input: 'Hello World!', groups: undefined]

Example 03: Multiline match

The "m" modifier specifies a multiline match. It only affects the behavior of start ^ and end $. ^ specifies a match at the start of a string. $ specifies a match at the end of a string.

let paragraph = `Lorem Ipsum is simply dummy text of the printing and typesetting industry.`;

let pattern = /Lorem/m;

console.log(paragraph.match(pattern3)); // ["Lorem"]

⚝ Try this example on CodeSandbox

Q. What are regular expression patterns?

Regular Expressions provided group of patterns in order to match characters. Basically they are categorized into 3 types,

Brackets:

These are used to find a range of characters.

• [...]: Any one character between the brackets.
• [^...]: Any one character not between the brackets.
• [0-9]: It matches any decimal digit from 0 through 9.
• [a-z]: It matches any character from lowercase a through lowercase z.
• [A-Z]: It matches any character from uppercase A through uppercase Z.
• [a-Z]: It matches any character from lowercase a through uppercase Z.

Metacharacters:

These are characters with a special meaning

• .: a single character
• \s: a whitespace character (space, tab, newline)
• \S: non-whitespace character
• \d: a digit (0-9)
• \D: a non-digit
• \w: a word character (a-z, A-Z, 0-9, _)
• \W: a non-word character
• [\b]: a literal backspace (special case).
• [aeiou]: matches a single character in the given set
• [^aeiou]: matches a single character outside the given set
• (foo|bar|baz): matches any of the alternatives specified

Quantifiers:

These are useful to define quantities

• p+: It matches any string containing one or more p's.
• **p: It matches any string containing zero or more p's.
• p?: It matches any string containing at most one p.
• p{N}: It matches any string containing a sequence of N p's
• p{2,3}: It matches any string containing a sequence of two or three p's.
• p{2, }: It matches any string containing a sequence of at least two p's.
• p$: It matches any string with p at the end of it.
• ^p: It matches any string with p at the beginning of it.

Example:

// Brackets
"Hello World".match(/[a-d]/); // -> matches 'a'
"Hello World".match(/[A-D]/); // -> no match
"Hello World".match(/[A-D]/i); // -> matches 'a'

// Metacharacters
"Hello World".match(/[A-Za-z]\s[A-Za-z]/); // -> matches
"Hello World".match(/[0-9]\s[A-Za-z]/); // -> no match

// Quantifiers
"Hello".match(/l+/); // -> matches
"Hello".match(/A*/); // -> no match

⚝ Try this example on CodeSandbox

Q. How do you search a string for a pattern?

1. Using test() It searches a string for a pattern, and returns true or false, depending on the result.

let re1 = /Hi/;
let re2 = /you/;

re1.test("How are you?"); // false
re2.test("How are you?"); // true

2. Using exec() It searches a string for a specified pattern, and returns the found text as an object. If no match is found, it returns an empty (null) object.

let re1 = /Hi/;
let re2 = /you/;

re1.exec("How are you?"); // null
re2.exec("How are you?"); // ["you"]

⚝ Try this example on CodeSandbox

Q. What is the purpose of exec method?

The purpose of exec method is similar to test method but it returns a founded text as an object instead of returning true/false.

Example:

// Using test() method
var pattern = /you/;
console.log(pattern.test("How are you?")); // true


// Using exec() method
var pattern = /you/;
console.log(pattern.exec("How are you?")); // ["you", index: 8, input: "How are you?", groups: undefined]

Q. How do you validate an email in javascript?

The test() method returns true if there is a match in the string with the regex pattern. The regular expression (regex) describes a sequence of characters used for defining a search pattern

Example:

// Program to validate the email address

function validateEmail(email) {
  // regex pattern for email
  const re = /\S+@\S+\.\S+/g;

  // check if the email is valid
  let result = re.test(email);
  if (result) {
    console.log("Valid");
  } else {
    console.log("Not valid.");
  }
}

let email = "[email protected]";
let email2 = "pradeep.kumar.com";

validateEmail(email); // Valid
validateEmail(email2); // Not Valid

⚝ Try this example on CodeSandbox

Q. How do you detect a mobile browser using regexp?

You can detect mobile browser by simply running through a list of devices and checking if the navigator.userAgent matches anything. This is an alternative solution for RegExp usage,

Example:

function detectMobile() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Windows Phone/i.test(
    navigator.userAgent
  );
}

console.log(detectMobile()); // true on mobile, false on desktop

The /i flag makes the match case-insensitive. The | operator checks for any of the device strings in the user agent string.

Note:

User agent detection is considered unreliable for feature detection. Prefer feature detection APIs (e.g., navigator.maxTouchPoints, CSS media query hover: none) for deciding UI behavior, and reserve UA sniffing for analytics or logging.

# 15. ERROR HANDLING

Q. What is an error object?

An error object is a built in error object that provides error information when an error occurs. It has two properties: name and message.

Example:

try {
  greeting("Welcome");
}
catch(err) {
  console.log(err.name + ": " + err.message);
}

// Output
ReferenceError: greeting is not defined

⚝ Try this example on CodeSandbox

Q. Define the various types of errors which occur in JavaScript?

There are three main types of errors that can occur while compiling a JavaScript program: syntax errors, runtime errors ( also called exceptions ), and logical errors. When an exception occurs, an object representing the error is created and thrown. The JavaScript language defines seven types of built-in error objects.

1. Error:

The "Error" type is used to represent generic exceptions. This type of exception is most often used for implementing user defined exceptions.

const error = new Error("error message");

2. RangeError:

"RangeError" exceptions are generated by numbers that fall outside of a specified range.

const pi = 3.14159;

pi.toFixed(100000);  // RangeError: toFixed() digits argument must be between 0 and 100

3. ReferenceError:

A "ReferenceError" exception is thrown when a non-existent variable is accessed. These exceptions commonly occur when an existing variable name is misspelled.

function sum() {
  val++;  // ReferenceError: val is not defined
}

4. SyntaxError:

A "SyntaxError" is thrown when the rules of the JavaScript language are broken.

if (foo) {  // SyntaxError
  // the closing curly brace is missing

5. TypeError:

A "TypeError" exception occurs when a value is not of the expected type. Attempting to call a non-existent object method is a common cause of this type of exception.

const foo = {};

foo.bar(); // TypeError

6. URIError:

A "URIError" exception is thrown by methods such as encodeURI() and decodeURI() when they encounter a malformed URI. The following example generates a "URIError" while attempting to decode the string "%".

decodeURIComponent("%"); // URIError

7. EvalError:

"EvalError" exceptions are thrown when the eval() function is used improperly. These exceptions are not used in the most recent version of the EcmaScript standard. However, they are still supported in order to maintain backwards compatibility with older versions of the standard.

Q. What are the various statements in error handling?

Below are the list of statements used in an error handling,

1. try: This statement is used to test a block of code for errors
2. catch: This statement is used to handle the error
3. throw: This statement is used to create custom errors.
4. finally: This statement is used to execute code after try and catch regardless of the result.

Example:

function errorHandling() {

  const message = document.getElementById("app");
  message.innerHTML = "";
  let x = document.getElementById("app").value;
  
  try {
    if (x === "") throw "is empty";
    if (isNaN(x)) throw "is not a number";
    x = Number(x);
    if (x > 10) throw "is too high";
    if (x < 5) throw "is too low";
  } catch (err) {
    message.innerHTML = "Error: " + err + ".";
  } finally {
    document.getElementById("app").value = "";
  }
}

errorHandling(); // Error: is not a number.

⚝ Try this example on CodeSandbox

Q. How do you create a custom error class in JavaScript?

You can create a custom error class by extending the built-in Error class. This lets you define domain-specific errors with custom names and additional properties.

Example:

class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
  }
}

class NetworkError extends Error {
  constructor(message, statusCode) {
    super(message);
    this.name = 'NetworkError';
    this.statusCode = statusCode;
  }
}

// Usage
function validateAge(age) {
  if (typeof age !== 'number') {
    throw new ValidationError('Age must be a number', 'age');
  }
  if (age < 0 || age > 150) {
    throw new ValidationError('Age must be between 0 and 150', 'age');
  }
}

try {
  validateAge('twenty');
} catch (err) {
  if (err instanceof ValidationError) {
    console.log(`Validation failed on field "${err.field}": ${err.message}`);
    // Validation failed on field "age": Age must be a number
  } else {
    throw err; // rethrow unexpected errors
  }
}

Q. What are general error handling strategies in JavaScript?

Robust JavaScript applications use several strategies to handle errors gracefully:

1. try / catch / finally

The most fundamental mechanism. finally always runs, making it useful for cleanup.

function fetchData(url) {
  try {
    // risky operation
    const data = JSON.parse(url);
    return data;
  } catch (err) {
    console.error('Parsing error:', err.message);
    return null;
  } finally {
    console.log('fetchData completed');
  }
}

2. Fail fast — validate inputs early

Throw errors as soon as invalid state is detected rather than propagating bad data deep into the system.

function divide(a, b) {
  if (b === 0) throw new RangeError('Cannot divide by zero');
  return a / b;
}

3. Typed / custom errors for precise catching

Use instanceof to handle different error types differently instead of a single generic catch.

try {
  processRequest(data);
} catch (err) {
  if (err instanceof ValidationError) {
    respond(400, err.message);
  } else if (err instanceof NetworkError) {
    respond(503, 'Service unavailable');
  } else {
    respond(500, 'Internal error');
    throw err; // rethrow unknown errors
  }
}

4. Global error handlers

Catch unhandled errors and promise rejections at the top level.

// Unhandled synchronous errors
window.onerror = function(message, source, line, col, error) {
  logToServer({ message, source, line, col, stack: error?.stack });
};

// Unhandled promise rejections
window.addEventListener('unhandledrejection', (event) => {
  logToServer({ reason: event.reason });
  event.preventDefault();
});

5. Async error handling with async/await

Always wrap await calls in try/catch or use a helper that converts rejections to [error, result] tuples.

async function loadUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new NetworkError(`HTTP ${res.status}`, res.status);
    return await res.json();
  } catch (err) {
    console.error('loadUser failed:', err);
    throw err;
  }
}

# 16. Web Storage

Q. What is Web Storage, and how does localStorage differ from sessionStorage?

The Web Storage API provides two browser-side key-value stores that let web applications persist data client-side without round-tripping to a server. Both are part of the window object and share an identical synchronous API, but differ in lifetime and scope:

Both storages are origin-scoped (protocol + hostname + port) — a page on https://app.example.com cannot access storage set by https://api.example.com.

Example:

// ── localStorage ─────────────────────────────────────────────────────────────
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');  // 'dark'
localStorage.removeItem('theme');
localStorage.clear();                          // removes all items for this origin

// ── sessionStorage ────────────────────────────────────────────────────────────
sessionStorage.setItem('draft', JSON.stringify({ title: 'Untitled' }));
const draft = JSON.parse(sessionStorage.getItem('draft'));
sessionStorage.removeItem('draft');

// ── Iterating all entries ─────────────────────────────────────────────────────
for (let i = 0; i < localStorage.length; i++) {
  const key   = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(key, value);
}

Real-World Use Case:

E-commerce platforms use localStorage to persist the shopping cart so items survive browser restarts. Multi-step checkout wizards use sessionStorage for in-progress form data — it is automatically discarded when the user closes the tab, preventing stale checkout state from appearing in future sessions. This distinction eliminates the need for complex server-side session cleanup logic.

Q. Why does Web Storage only support strings, and how do you safely store and retrieve complex data?

The Web Storage API stores all values as plain strings. Passing a non-string value calls .toString() on it implicitly — which for objects produces "[object Object]" and for arrays produces a comma-joined string — silently corrupting the data. The correct solution is to serialise with JSON.stringify before writing and deserialise with JSON.parse after reading.

JSON.stringify has limitations: it drops undefined values, converts Date objects to ISO strings (losing the Date type), cannot serialise functions, and throws on circular references. A robust storage utility must handle these edge cases.

Example:

//  Data corruption — objects are coerced to strings
localStorage.setItem('user', { name: 'Alice' });
localStorage.getItem('user'); // '[object Object]'

//  Use JSON.stringify / JSON.parse
localStorage.setItem('user', JSON.stringify({ name: 'Alice', age: 30 }));
const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // 'Alice'

//  Safe helper with fallback
function storageGet(key, fallback = null) {
  try {
    const raw = localStorage.getItem(key);
    return raw === null ? fallback : JSON.parse(raw);
  } catch {
    return fallback;
  }
}

function storageSet(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch {
    console.warn('localStorage write failed');
  }
}

storageSet('config', { lang: 'en', debug: true });
storageGet('config');         // { lang: 'en', debug: true }
storageGet('missing', 42);    // 42 — fallback returned

Real-World Use Case:

Redux Persist (the standard library for persisting Redux state) uses JSON.stringify/JSON.parse under the hood with configurable transforms to handle non-serialisable types. It also wraps every localStorage call in try/catch to gracefully degrade in private browsing modes (Safari throws QuotaExceededError immediately with a quota of 0 in private mode) and in environments where storage is disabled by browser policy — preventing a storage error from crashing the entire React application.

Q. What is the storage event and how can you use Web Storage for cross-tab communication?

The browser fires a storage event on the window object of all other tabs/windows at the same origin whenever localStorage is modified. The tab that made the change does not receive the event itself. This makes localStorage a lightweight broadcast channel for cross-tab state synchronisation without a server.

The StorageEvent object provides:

• key — the changed key (null on clear())
• oldValue — previous value (or null)
• newValue — new value (or null on removeItem)
• url — the origin URL that triggered the change
• storageArea — reference to the affected storage object

Example:

// ── Tab A: writer ─────────────────────────────────────────────────────────────
function broadcastAuthState(isLoggedIn) {
  localStorage.setItem(
    'auth:update',
    JSON.stringify({ isLoggedIn, ts: Date.now() })
  );
  // Remove immediately to allow the same event to fire again next time
  localStorage.removeItem('auth:update');
}

broadcastAuthState(false); // triggers logout across all other open tabs

// ── Tab B (and C, D…): listener ───────────────────────────────────────────────
window.addEventListener('storage', (event) => {
  if (event.key !== 'auth:update' || event.newValue === null) return;

  const { isLoggedIn } = JSON.parse(event.newValue);

  if (!isLoggedIn) {
    // Redirect all other tabs to login page on logout
    window.location.replace('/login?reason=session_expired');
  }
});

Real-World Use Case:

Banking and enterprise SaaS applications implement global logout using the storage event: when a user logs out in one tab, a flag is written to localStorage, all other open tabs detect the storage event and immediately redirect to the login page. This prevents the security risk of stale authenticated sessions remaining active in background tabs. The same pattern is used by Google's suite — logging out of Gmail in one tab logs you out of Google Docs in another.

Q. What are the security risks of Web Storage, and how do you mitigate them?

Web Storage's biggest security limitation is that it is fully accessible to any JavaScript running on the same origin — including injected scripts from Cross-Site Scripting (XSS) attacks. Unlike HttpOnly cookies (which the browser never exposes to JavaScript), a single XSS vulnerability gives an attacker complete read/write access to everything in localStorage.

Key risks:

Mitigations:

//  NEVER store sensitive auth tokens in localStorage
localStorage.setItem('authToken', jwtToken); // compromised by any XSS

//  Prefer HttpOnly cookies for auth tokens (set by server, never readable by JS)
// Set-Cookie: token=<jwt>; HttpOnly; Secure; SameSite=Strict

//  If you MUST use storage (e.g., SPAs without cookie-based auth):
// 1. Store only short-lived access tokens (refresh via HttpOnly cookie)
// 2. Implement strict Content Security Policy to minimise XSS surface
// 3. Validate and sanitise ALL values read from storage before use

function safeReadConfig(key) {
  const raw = localStorage.getItem(key);
  if (!raw) return null;

  let parsed;
  try {
    parsed = JSON.parse(raw);
  } catch {
    localStorage.removeItem(key); // corrupt data — remove it
    return null;
  }

  // Validate shape — never trust storage blindly
  if (typeof parsed !== 'object' || parsed === null || typeof parsed.theme !== 'string') {
    localStorage.removeItem(key);
    return null;
  }

  return parsed;
}

//  Content Security Policy header (set server-side, limits XSS attack surface)
// Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none'

What is safe to store in localStorage:

• Non-sensitive UI preferences (theme, language, layout)
• Non-sensitive feature flags
• Anonymous analytics identifiers
• Draft content (non-confidential)

What should never go in localStorage:

• Authentication tokens (JWTs, session tokens, OAuth tokens)
• Passwords or PINs
• PII (personally identifiable information)
• Encryption keys

Real-World Use Case:

The OWASP Web Security Testing Guide explicitly recommends against storing JWTs in localStorage and instead advocates the "silent refresh" pattern: a short-lived access token is kept in memory (JavaScript variable), and a long-lived refresh token is stored in an HttpOnly Secure cookie. When the access token expires, the app makes a background request using the cookie to get a new one. Auth0, Okta, and AWS Cognito all offer this pattern in their SDKs — storing nothing sensitive in localStorage while still supporting SPA-style authentication.

Q. How does localStorage perform under load, and what are the architectural alternatives for large-scale client-side storage?

localStorage is synchronous — every getItem, setItem, and removeItem call blocks the main thread. In V8, these are cross-process IPC calls to the browser's storage process, and while they are typically fast (sub-millisecond for small payloads), they become a measurable bottleneck when:

• Storing large JSON blobs (>100 KB per entry)
• Iterating all keys to find entries
• Calling storage APIs inside animation loops or scroll handlers
• Operating on low-end Android devices where I/O is slower

Comparison of client-side storage options:

// ── localStorage: fine for small data ────────────────────────────────────────
localStorage.setItem('lang', 'en'); //  sub-millisecond, tiny payload

// ── IndexedDB via idb library (async, large data) ─────────────────────────────
import { openDB } from 'idb'; // lightweight IDB wrapper

const db = await openDB('app-db', 1, {
  upgrade(db) {
    const store = db.createObjectStore('articles', { keyPath: 'id' });
    store.createIndex('by-author', 'authorId');
  },
});

// Write
await db.put('articles', { id: 1, title: 'Hello IDB', authorId: 42, body: '...' });

// Query by index — impossible with localStorage
const byAuthor = await db.getAllFromIndex('articles', 'by-author', 42);
console.log(byAuthor); // all articles by author 42

// ── Avoid localStorage in hot paths ───────────────────────────────────────────
//  Do not call localStorage inside a resize/scroll handler
window.addEventListener('scroll', () => {
  localStorage.setItem('scrollPos', window.scrollY); // blocks main thread every scroll event
});

//  Debounce or use in-memory state + persist on pause
let scrollPos = 0;
const saveScroll = debounce(() => localStorage.setItem('scrollPos', scrollPos), 300);
window.addEventListener('scroll', () => { scrollPos = window.scrollY; saveScroll(); });

function debounce(fn, ms) {
  let timer;
  return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), ms); };
}

Real-World Use Case:

Progressive Web Apps (PWAs) like Starbucks' ordering PWA and Twitter Lite use IndexedDB (via the idb library or Workbox) to store thousands of cached API responses, product catalogues, and offline-readable article bodies — data far exceeding localStorage's capacity. The Cache API handles network response caching in Service Workers. localStorage is reserved only for lightweight user preferences (theme, language). This tiered storage architecture is why Twitter Lite loads in under 5 seconds on 2G networks — IndexedDB serves stale-while-revalidate content instantly while the network catches up.

L3: Advanced (Mid-Senior / Lead)

# 17. PROMISES

Q. What is a promise?

A promise is an object that may produce a single value some time in the future with either a resolved value or a reason that it's not resolved (for example, network error). It will be in one of the 3 possible states: fulfilled, rejected, or pending.

Syntax:

const promise = new Promise(function (resolve, reject) {
  // promise description
})

Example:

let promise = new Promise(function(resolve, reject) {
  // the function is executed automatically when the promise is constructed

  // after 1 second signal that the job is done with the result "done"
  setTimeout(() => resolve("done"), 1000);
});

Promises are used to handle asynchronous operations. They provide an alternative approach for callbacks by reducing the callback hell and writing the cleaner code.

Promises have three states:

1. pending: initial state, neither fulfilled nor rejected.
2. fulfilled: meaning that the operation was completed successfully.
3. rejected: meaning that the operation failed.

Q. What is promise chaining?

The process of executing a sequence of asynchronous tasks one after another using promises is known as Promise chaining. It allows you to chain on another then call which will run when the second promise is fulfilled. The .catch() can still be called to handle any errors that might occur along the way.

Example:

// Promise Chain
new Promise(function (resolve, reject) {
  setTimeout(() => resolve(10), 1000);
})
  .then(function (result) {
    console.log(result); // 10
    return result + 20;
  })
  .then(function (result) {
    console.log(result); // 30
    return result + 30;
  });

In the above handlers, the result is passed to the chain of .then() handlers with the below work flow,

• The initial promise resolves in one second,
• After that .then() handler is called by logging the result(10) and then return a promise with the value of result + 20.
• After that the value passed to the next .then() handler by logging the result(20) and return a promise with result + 30.

⚝ Try this example on CodeSandbox

Q. What is promise.all()?

Promise.all is a promise that takes an array of promises as an input (an iterable), and it gets resolved when all the promises get resolved or any one of them gets rejected.

Example:

// promise.all()
const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 10, "First");
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 20, "Second");
});

Promise.all([promise1, promise2])
  .then((values) => {
    console.log(values);
  })
  .catch((error) => console.log(`Error in promises ${error}`));
// expected output: Array ["First", "Second"]

Note: Remember that the order of the promises (output the result) is maintained as per input order.

⚝ Try this example on CodeSandbox

Q. What is the purpose of race method in promise?

Promise.race() method will return the promise instance which is firstly resolved or rejected.

Example: Let us take an example of race() method where promise2 is resolved first

const promise1 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 500, "First");
});

const promise2 = new Promise(function (resolve, reject) {
  setTimeout(resolve, 100, "Second");
});

Promise.race([promise1, promise2]).then(function (value) {
  console.log(value); // "Second" // Both promises will resolve, but promise2 is faster
});

⚝ Try this example on CodeSandbox

Practical use — implementing a request timeout:

A common interview pattern (asked at Amazon/Google) is to add a timeout to any async operation using Promise.race():

function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error(`Timed out after ${ms}ms`)), ms)
  );
  return Promise.race([promise, timeout]);
}

// Usage
withTimeout(fetch('/api/data'), 5000)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err.message)); // "Timed out after 5000ms" if slow

Q. What are the pros and cons of promises over callbacks?

Below are the list of pros and cons of promises over callbacks,

Pros:

• It avoids callback hell which is unreadable
• Easy to write sequential asynchronous code with .then()
• Easy to write parallel asynchronous code with Promise.all()
• Solves some of the common problems of callbacks(call the callback too late, too early, many times and swallow errors/exceptions)
• Integrated error handling.
• Additional static methods: Promise.allSettled(), Promise.any(), Promise.race()

Cons:

• It makes little complex code
• It cannot return multiple arguments.

Q. How does await and async works in es6?

The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

Async keyword is used along with the function declaration which specifies that this function is now able to accept all types of asynchronous events on itself. Await basically waits for the results which are particularly to be fetched from the source from which that async function is about to fetch the data.

Example:

// async() and await()
async function fetchMethod() {
  try {
    let response = await fetch("https://api.github.com/users/1");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchMethod();

⚝ Try this example on CodeSandbox

Q. What is difference between fetch() and XMLHttpRequest() in JavaScript?

1. XMLHttpRequest:

XMLHttpRequest() is a built-in browser object that allows to make HTTP requests in JavaScript. XMLHttpRequest has two modes of operation: synchronous and asynchronous.

Example:

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (this.readyState === 4 && this.status === 200) {
    console.log(this.responseText);
  }
};

xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true); // this makes asynchronous true or false
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();

⚝ Try this example on CodeSandbox

2. Fetch():

Fetch allows to make network requests similar to XMLHttpRequest. Fetch makes it easier to make asynchronous requests and handle responses better than with the older XMLHttpRequest. It is an improvement over the XMLHttpRequest API. The main difference between Fetch() and XMLHttpRequest() is that the Fetch API uses Promises, hence avoiding callback hell.

Example:

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (err) {
    console.log("Something went wrong!", err);
  });

⚝ Try this example on CodeSandbox

Q. Explain fetch() properties in JavaScript?

A fetch() function is available in the global window object. The fetch() function takes one mandatory argument, the path to the resource you want to fetch. It returns a Promise, whether it is successful or not. If request is successful .then() function will receive Response object, if request fails then .catch() function will receive an error object

Example:

fetch("https://api.github.com/users/learning-zone")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (err) {
    console.log("Something went wrong!", err);
  });

⚝ Try this example on CodeSandbox

Headers Object

The Headers interface allows to create own headers object via the Headers() constructor. A headers object is a collection of name-value pairs.

Example:

let reqHeader = new Headers();
reqHeader.append("Content-Type", "text/json");
let initObject = {
  method: "GET",
  headers: reqHeader
};

fetch("https://api.github.com/users/learning-zone", initObject)
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (err) {
    console.log("Something went wrong!", err);
  });

⚝ Try this example on CodeSandbox

Request Object

The Request Object represents a resource request. Instead of passing an URL of the resource into the fetch() call, you can create a request object using the Request() constructor, and pass that as an argument to fetch(). By passing Request object to the fetch(), you can make customised requests.

Example:

let reqHeader = new Headers();
reqHeader.append("Content-Type", "text/json");

let initObject = {
  method: "GET",
  headers: reqHeader
};

const userRequest = new Request(
  "https://api.github.com/users/learning-zone",
  initObject
);

fetch(userRequest)
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (err) {
    console.log("Something went wrong!", err);
  });

⚝ Try this example on CodeSandbox

Q. What is the difference between Promise and AJAX?

A Promise is an interface for asynchronous operations. They keep track of when asynchronous operations complete and what their results are and let you coordinate that completion and those results (including error conditions) with other code or other asynchronous operations. They aren't actually asynchronous operations in themselves.

An Ajax (Asynchronous JavaScript and XML) call is a specific asynchronous operation that can be used with with a traditional callback interface or wrapped in a promise interface. We can make an Ajax call either with a traditional callback using the XMLHttpRequest() interface or we can make an Ajax call (in modern browsers), using a promise with the fetch() interface.

Example:

// AJAX with callbacks (XMLHttpRequest)
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (this.readyState === 4 && this.status === 200) {
    console.log(JSON.parse(this.responseText));
  }
};
xhr.open('GET', '/api/data');
xhr.send();

// AJAX with Promises (fetch)
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

In short: a Promise is a tool for handling async results; AJAX is a use case that can be implemented using that tool.

Q. What is AbortController and how do you cancel a fetch request?

AbortController is a browser API that allows you to cancel one or more fetch requests (or any operation that accepts a signal).

Example 01: Setting an Automatic Request Timeout

// 1. Create the controller instance
const controller = new AbortController();
const { signal } = controller; // Extract the signal object

async function downloadLargeFile() {
  try {
    // 2. Pass the signal into the fetch options
    const response = await fetch("https://example.com", { signal });
    const data = await response.json();
    console.log("Download complete!", data);
  } catch (error) {
    // When a request is aborted, fetch immediately throws a DOMException named 'AbortError'
    if (error.name === "AbortError") {
      console.log("Success: Fetch request was successfully canceled!");
    } else {
      console.error("A real network error occurred:", error);
    }
  }
}

// Start the request
downloadLargeFile();

// 3. Cancel the request exactly 3 seconds later
setTimeout(() => {
  controller.abort(); 
}, 3000);

Example 02: Cleaning Up in React (useEffect)

useEffect(() => {
  const controller = new AbortController();

  async function loadData() {
    try {
      const res = await fetch("/api/user", { signal: controller.signal });
      const data = await res.json();
      setUser(data);
    } catch (err) {
      if (err.name !== "AbortError") handleErrors(err);
    }
  }

  loadData();

  // Cleanup function: Triggers if the user navigates away mid-request
  return () => controller.abort();
}, []);

Note: AbortController also works with addEventListener, streams, and any custom async operation that accepts AbortSignal.

Q. What is difference between async or defer keyword in JavaScript?

1. async Attribute

The async attribute is used to indicate to the browser that the script file can be executed asynchronously. The HTML parser does not need to pause at the point it reaches the script tag to fetch and execute, the execution can happen whenever the script becomes ready after being fetched in parallel with the document parsing.

<script src="script.js" async></script>

• Script downloads in parallel with HTML parsing
• Executes immediately when download completes (pauses HTML parsing)
• No guaranteed order between multiple async scripts
• Best for independent scripts (e.g., analytics, ads)

2. defer Attribute

The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script loads "in the background", and then runs when the DOM is fully built.

<script src="script.js" defer></script>

• Script downloads in parallel with HTML parsing
• Executes after the HTML is fully parsed (before DOMContentLoaded)
• Maintains execution order if multiple deferred scripts exist
• Best for scripts that depend on the DOM or each other

Q. What is CORS (Cross-Origin Resource Sharing) in JavaScript?

CORS is a browser security mechanism that controls how web pages can request resources from a different origin (domain, protocol, or port) than the one that served the page. It uses HTTP headers to tell browsers whether a given web page is allowed to access resources from a different origin.

Why CORS exists:

The browser enforces the Same-Origin Policy by default, which blocks JavaScript from making cross-origin requests. CORS provides a controlled way to relax this restriction.

How CORS works:

1. Simple requests (GET, POST with plain-text content types) — the browser automatically sends an Origin header; the server responds with Access-Control-Allow-Origin.
2. Preflight requests — for complex methods (PUT, DELETE) or custom headers, the browser first sends an OPTIONS request to check permissions.

Server-side response headers:

Example — Fetch with CORS:

// Client-side request to a different origin
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
  credentials: 'include', // send cookies cross-origin (requires server to set Allow-Credentials: true)
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('CORS error:', err));

Example — Preflight request flow:

// Browser sends preflight:
OPTIONS /api/data HTTP/1.1
Origin: https://myapp.com
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: Authorization

// Server responds:
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://myapp.com
Access-Control-Allow-Methods: GET, POST, DELETE
Access-Control-Allow-Headers: Authorization
Access-Control-Max-Age: 86400

Common CORS errors:

• No 'Access-Control-Allow-Origin' header is present — server does not permit the request origin.
• CORS policy: credential flag is 'true' but the 'Access-Control-Allow-Origin' is '*' — wildcard origin cannot be used with credentials: 'include'.

Note: CORS is enforced by the browser. Server-to-server calls (Node.js, curl) are not subject to CORS.

Q. What is request header in javascript?

The headers read-only property of the Request interface contains the Headers object associated with the request.
Syntax

const myHeaders = request.headers;

Example:

const myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { 
  method: 'GET',
  headers: myHeaders,
  mode: 'cors',
  cache: 'default' 
};

const myRequest = new Request('flowers.jpg', myInit);
myContentType = myRequest.headers.get('Content-Type'); // returns 'image/jpeg'

Q. What is the event loop in JavaScript?

JavaScript is single-threaded — it can execute only one task at a time. The event loop is the mechanism that allows JavaScript to perform non-blocking I/O operations (like network requests and timers) despite this single-thread constraint.

How it works:

Call Stack       Web APIs / Node APIs       Callback Queue / Microtask Queue
   │                      │                           │
   ▼                      ▼                           ▼
Executes sync     setTimeout, fetch,         Queued callbacks waiting
code (LIFO)       DOM events, etc.           to enter the call stack

1. Synchronous code runs on the call stack first.
2. Async operations (e.g. setTimeout, fetch) are handed off to Web APIs.
3. When complete, their callbacks are pushed to a queue.
4. The event loop continuously checks: "Is the call stack empty?" — if yes, it dequeues the next callback and pushes it onto the stack.

Microtask queue vs. macro-task queue:

• Microtasks (Promises .then/.catch, queueMicrotask, MutationObserver) are processed before the next macro-task.
• Macro-tasks (setTimeout, setInterval, I/O) are processed one per event-loop tick.

Example:

console.log('1');

setTimeout(() => console.log('2'), 0); // macro-task

Promise.resolve().then(() => console.log('3')); // microtask

console.log('4');

// Output order: 1, 4, 3, 2

Explanation: 1 and 4 run synchronously. Then the microtask queue drains (3). Then the macro-task fires (2).

Q. What is garbage collection in JavaScript?

Garbage collection (GC) is the automatic process by which JavaScript frees up memory occupied by objects that are no longer reachable (i.e., no references point to them).

1. Reference Counting algorithm (legacy)

Tracks how many references point to an object. When the count drops to zero, the memory is freed.

let a = { name: 'Alice' }; // ref count: 1
let b = a;                  // ref count: 2
a = null;                   // ref count: 1
b = null;                   // ref count: 0 → eligible for GC

Problem — circular references:

function createCycle() {
  let obj1 = {};
  let obj2 = {};
  obj1.ref = obj2; // obj1 → obj2
  obj2.ref = obj1; // obj2 → obj1 (cycle)
  // ref count never reaches 0 — memory leak with pure reference counting
}

2. Mark-and-Sweep algorithm (modern)

The modern approach used by all major engines (V8, SpiderMonkey):

1. Mark phase — starting from GC roots (window, global scope, call-stack variables), traverse all reachable objects and mark them.
2. Sweep phase — free all unmarked (unreachable) objects.

Circular references are handled correctly because the cycle is unreachable from the root after both obj1 and obj2 go out of scope.

Common causes of memory leaks in JavaScript:

Example:

// Memory leak — timer retains reference to element
const btn = document.getElementById('myBtn');
const timer = setInterval(() => {
  btn.textContent = new Date().toLocaleTimeString();
}, 1000);

// Fix — clear the timer when done
clearInterval(timer);

Q. How to get responses of multiple api calls, when some API fails?

Promise.allSettled():

To handle failures in multiple API calls, Promise.allSettled() method can be used. The method returns a Promise that resolves after all of the given promises have either resolved or rejected. It returns an array of objects with two properties: status and value.

The status property is either "fulfilled" or "rejected", depending on whether the promise was resolved or rejected. The value property is the value of the promise if it was resolved or the reason for rejection if it was rejected.

Example:

const promises = [fetch('api1'), fetch('api2'), fetch('api3')];

Promise.allSettled(promises)
  .then(results => {
    const successfulResults = [];
    const failedResults = [];

    results.forEach(result => {
      if (result.status === 'fulfilled') {
        successfulResults.push(result.value);
      } else {
        failedResults.push(result.reason);
      }
    });
    
    console.log('Successful API calls:', successfulResults);
    console.log('Failed API calls:', failedResults);
  })
  .catch(error => console.log('Error:', error));

Q. Explain the use of Promise.any()?

The Promise.any() method is used to handle multiple promises simultaneously, and it resolves with the value of the first fulfilled promise.regardless of whether any of the other promises reject. If all of the promises reject, then Promise.any() rejects with an AggregateError object that contains an array of rejection reasons.

The Promise.any() method takes an iterable of Promises as an input, and returns a new Promise. Here's an example:

Example:

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 1000, 'Promise 1 rejected'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'Promise 2 resolved'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 1500, 'Promise 3 resolved'));

Promise.any([promise1, promise2, promise3])
  .then((value) => console.log(value)) // 'Promise 2 resolved'
  .catch((error) => console.error(error)); // AggregateError: All promises were rejected

Note: Promise.any() is supported in all modern browsers since 2021.

# 18. Async & Await

Q. What is async/await and how does it relate to Promises under the hood?

async/await is syntactic sugar over the Promise API introduced in ES2017 (ES8). An async function always returns a Promise — if you return a plain value, the runtime wraps it in Promise.resolve(value); if you throw, it wraps the error in Promise.reject(error). The await keyword can only be used inside an async function (or at the top level of an ES module). When the engine encounters await expr, it:

1. Evaluates expr — converting it to a Promise if it isn't one already.
2. Suspends the current async function, saving its execution context (local variables, instruction pointer) to the heap as a microtask continuation.
3. Returns control to the caller immediately (non-blocking).
4. When the awaited Promise settles, the microtask queue schedules resumption of the suspended function.

This means async/await does not block the JavaScript thread — it is purely a more readable way to write .then() chains, implemented via generator-like coroutines by V8's Ignition interpreter.

Example:

/**
 *  Promise chain vs async/await 
 */

// Promise chain
function fetchUserChain(id) {
  return fetch(`/api/users/${id}`)
    .then(res => {
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.json();
    })
    .then(user => fetch(`/api/posts?userId=${user.id}`))
    .then(res => res.json());
}

// async/await — identical semantics, far more readable
async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const user = await res.json();

  const postsRes = await fetch(`/api/posts?userId=${user.id}`);
  return postsRes.json();
}

// async function always returns a Promise
const result = fetchUser(1);   // Promise<...>
console.log(result instanceof Promise); // true

// Return value wrapping
async function getValue() { return 42; }
getValue().then(console.log); // 42

// Thrown errors become rejections
async function fail() { throw new Error('oops'); }
fail().catch(err => console.error(err.message)); // 'oops'

Real-World Use Case:

Next.js 13+ Server Components are async functions that await database queries and API calls directly in JSX — e.g., const data = await db.query(...) at the top of a React component. This is only possible because async/await makes asynchronous code look synchronous, allowing framework authors to compose async rendering without callbacks or observable streams. The underlying Promise machinery handles scheduling transparently.

Q. How do you handle errors in async/await, and what are the pitfalls of unhandled rejections?

Errors in async functions are handled with standard try/catch/finally blocks. An awaited Promise that rejects throws at the await expression, which catch intercepts exactly like a synchronous throw.

Key pitfalls:

1. Forgetting await — the Promise is created but not awaited; errors are silently swallowed.
2. Missing catch — an unhandled rejection in Node.js (since v15) causes the process to exit with a non-zero code; in browsers it fires window.unhandledrejection.
3. try/catch around non-awaited Promises — try only catches synchronous throws and awaited rejections, not fire-and-forget Promises inside the block.
4. Partial failure in loops — await inside a for loop is sequential; one failure aborts all subsequent iterations unless each is individually caught.

Example:

/**
 *  Basic try/catch 
 */

async function loadProfile(userId) {
  try {
    const res  = await fetch(`/api/users/${userId}`);
    if (!res.ok) throw new Error(`Not found: ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('loadProfile failed:', err.message);
    return null; // graceful fallback
  } finally {
    console.log('loadProfile completed'); // always runs
  }
}

/**
 *  Pitfall 1: missing await — error NOT caught 
 */

async function badExample() {
  try {
    fetch('/api/broken'); //  not awaited — rejection escapes try/catch
  } catch (err) {
    console.error('This never runs');
  }
}

/**
 * Pitfall 2: parallel fire-and-forget loses errors 
 */

async function riskyParallel() {
  const p1 = fetch('/api/a'); //  rejection unhandled if not awaited
  const p2 = fetch('/api/b');
  // ... other work
  return [await p1, await p2]; // only caught here, but p1 rejection may fire earlier
}

Real-World Use Case:

Express.js does not natively catch errors thrown from async route handlers — the error must be passed to next(err) explicitly. A common production pattern is a wrapper utility that bridges async/await errors into Express's error middleware:

Q. What is the difference between sequential and parallel await, and how do you optimise concurrent async operations?

await used naively in a loop creates sequential execution — each operation waits for the previous to complete before starting, which is wasteful when operations are independent. The total time becomes the sum of all operation durations rather than the maximum.

The correct approach for independent async operations is to start all Promises simultaneously and await their collective resolution with Promise.all (fail-fast) or Promise.allSettled (wait for all, regardless of failures).

Example 01:

/**
 * Sequential — slow (sum of durations)
 */

async function loadSequential(userIds) {
  const users = [];
  for (const id of userIds) {
    const user = await fetchUser(id); // each waits for the previous 
    users.push(user);
  }
  return users;
  // 3 users × 200ms each = ~600ms total
}

Example 02:

/**
 * Parallel with Promise.all — fast (max of durations) 
 */

async function loadParallel(userIds) {
  return Promise.all(userIds.map(id => fetchUser(id))); // all start immediately 
  // 3 users × 200ms each = ~200ms total (limited by slowest)
}

Example 03:

/**
 * Promise.allSettled — parallel, no fail-fast
 */

async function loadWithPartialFailure(userIds) {
  const results = await Promise.allSettled(userIds.map(id => fetchUser(id)));
  return results.map((result, i) => ({
    id: userIds[i],
    user:  result.status === 'fulfilled' ? result.value : null,
    error: result.status === 'rejected'  ? result.reason.message : null,
  }));
}

Example 04:

/**
 * Controlled concurrency — avoid hammering APIs 
 */

async function loadWithConcurrencyLimit(userIds, concurrency = 3) {
  const results = [];
  for (let i = 0; i < userIds.length; i += concurrency) {
    const batch = userIds.slice(i, i + concurrency);
    const batchResults = await Promise.all(batch.map(id => fetchUser(id)));
    results.push(...batchResults);
  }
  return results;
}

Example 05:

/**
 * Promise.race — first to settle wins (useful for timeouts) 
 */

function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error(`Timed out after ${ms}ms`)), ms)
  );
  return Promise.race([promise, timeout]);
}

const user = await withTimeout(fetchUser(1), 3000); // throws if fetch takes > 3s

Example 06:

/**
 * Promise.any — first to fulfil (ignore rejections) 
 */

const fastest = await Promise.any([
  fetch('https://cdn1.example.com/data.json'),
  fetch('https://cdn2.example.com/data.json'),
  fetch('https://cdn3.example.com/data.json'),
]); // whichever CDN responds first wins

Real-World Use Case:

GraphQL resolvers in Apollo Server resolve each requested field independently. When a query requests user, posts, and notifications simultaneously, the resolver layer runs all three await fetch(...) calls in parallel via Promise.all. A naive sequential implementation would triple page load time. At scale (Shopify, GitHub's GraphQL API), this concurrency control — combined with DataLoader for batching and deduplication — is what makes GraphQL APIs performant under high query complexity.

Q. How do async generators and for await...of enable streaming data processing?

An async generator (async function*) is a function that produces values asynchronously via yield. Each yield pauses execution until the consumer calls .next(), which returns Promise<{ value, done }>. for await...of is the idiomatic consumer — it automatically awaits each .next() call, making streaming processing look synchronous.

This pattern enables lazy, backpressure-aware pipelines: data is produced and consumed one chunk at a time rather than loading an entire dataset into memory.

Example:

/**
 * Async generator: paginated API 
 */

async function* fetchAllPages(baseUrl) {
  let page = 1;
  let hasMore = true;

  while (hasMore) {
    const res  = await fetch(`${baseUrl}?page=${page}&limit=100`);
    const { data, meta } = await res.json();

    yield data; // yield this page\'s array to the consumer

    hasMore = meta.page < meta.totalPages;
    page++;
  }
}

// Consumer — processes one page at a time, never holds all pages in memory
async function processAllUsers() {
  for await (const page of fetchAllPages('/api/users')) {
    for (const user of page) {
      await sendWelcomeEmail(user); // process each user
    }
  }
}

Real-World Use Case:

Node.js 18+ natively supports async iteration over fetch response bodies: for await (const chunk of response.body). AWS S3 SDK v3 returns async iterables for ListObjectsV2Command pagination. OpenAI's streaming chat completions API returns a ReadableStream consumed with for await...of — each chunk contains a token as it is generated, enabling real-time streaming UIs (like ChatGPT's typing effect). Without async generators, this would require complex recursive .then() chains or event emitter plumbing.

# 19. Event Loop

Q. How does the JavaScript Event Loop work — call stack, Web APIs, and the task queue?

JavaScript is single-threaded — it has one call stack and executes one piece of code at a time. The Event Loop is the mechanism that allows JavaScript to perform non-blocking I/O operations despite being single-threaded, by offloading work to the runtime (browser Web APIs or Node.js libuv) and scheduling callbacks back onto the call stack when it is empty.

The components:

Execution order per loop iteration (tick):

1. Execute the current synchronous code (call stack).
2. Drain the entire microtask queue (all microtasks, including any queued by microtasks).
3. Render/paint updates (browser only, between tasks).
4. Execute one macrotask from the macrotask queue.
5. Go to step 2.

Example:

console.log('1 — sync');

setTimeout(() => console.log('2 — macrotask (setTimeout)'), 0);

Promise.resolve()
  .then(() => console.log('3 — microtask (Promise.then)'))
  .then(() => console.log('4 — microtask chained'));

queueMicrotask(() => console.log('5 — microtask (queueMicrotask)'));

console.log('6 — sync');

// Output order:
// 1 — sync
// 6 — sync
// 3 — microtask (Promise.then)
// 5 — microtask (queueMicrotask)
// 4 — microtask chained
// 2 — macrotask (setTimeout)

Explanation: Synchronous code runs first (1, 6). When the stack empties, the entire microtask queue is drained in FIFO order (3, 5, then the chained 4). Only then does the event loop pick the next macrotask (2).

Real-World Use Case:

React's setState batching relies on the microtask queue. In React 18+, flushSync and automatic batching use queueMicrotask to defer DOM updates until after all synchronous state changes are processed. This avoids intermediate renders for each individual setState call in an event handler — reducing layout thrashing and improving frame rates in complex UI updates.

Q. What is the difference between microtasks and macrotasks, and why does it matter?

The distinction between microtasks and macrotasks determines when callbacks run relative to each other and to rendering. Getting this wrong causes subtle ordering bugs, laggy UIs, and starvation scenarios.

Microtask sources:

• Promise.then() / .catch() / .finally()
• async/await continuations (desugars to .then())
• queueMicrotask()
• MutationObserver callbacks

Macrotask sources:

• setTimeout / setInterval
• setImmediate (Node.js only)
• I/O callbacks (Node.js)
• UI event callbacks (click, input, etc.)
• MessageChannel.postMessage()
• requestAnimationFrame (browser — runs before paint, after microtasks)

Critical difference: After each macrotask, the entire microtask queue is drained before the next macrotask or render. A microtask that enqueues another microtask keeps the loop in the microtask phase — this can starve macrotasks (including UI rendering) indefinitely.

Example 01:

/**
 * Microtask starvation — infinite microtask loop starves the render 
 */

function recursiveMicrotask() {
  Promise.resolve().then(recursiveMicrotask); //  infinite microtask chain
  // The browser can never paint — UI freezes
}
// recursiveMicrotask(); // DO NOT RUN — for illustration only

// ── Correct: use macrotask (setTimeout/rAF) for deferred work ────────────────
function deferredWork() {
  setTimeout(deferredWork, 0); //  yields to the event loop between iterations
}

Example 02:

/**
 * Ordering example: Promise vs setTimeout 
 */

async function demo() {
  console.log('A');

  setTimeout(() => console.log('B — macrotask'), 0);

  await Promise.resolve(); // suspends, schedules microtask continuation
  console.log('C — microtask (after await)');

  setTimeout(() => console.log('D — macrotask'), 0);

  await Promise.resolve();
  console.log('E — microtask (after 2nd await)');
}

demo();
console.log('F — sync, after demo() call');

// Output: A → F → C → E → B → D
// A (sync inside demo), F (sync after demo() returns), C & E (microtasks), B & D (macrotasks)

Example 03:

/**
 * Node.js specific: process.nextTick runs BEFORE Promise microtasks 
 */

process.nextTick(() => console.log('nextTick — before Promises'));
Promise.resolve().then(() => console.log('Promise.then'));
// nextTick → Promise.then

Real-World Use Case:

Vue.js's nextTick() API was historically implemented as a microtask (using Promise.then internally). This guarantees that DOM mutations triggered by reactive data changes are fully flushed and the DOM updated before the nextTick callback fires — but before any setTimeout callbacks, ensuring predictable ordering. When building animation libraries or test utilities that assert on DOM state after state updates, understanding the microtask/macrotask boundary is essential for avoiding flaky assertions.

Q. How does setTimeout(fn, 0) actually behave, and what are its timer accuracy limitations?

setTimeout(fn, 0) does not execute fn immediately or even after exactly 0 milliseconds. It schedules fn as a macrotask — it will not run until:

1. The current call stack is empty.
2. The entire microtask queue is drained.
3. The event loop picks the next macrotask.

Additionally, browsers enforce a minimum timer delay of 4ms after 5 nested setTimeout calls (the "clamping" rule, per the HTML spec). In background tabs, browsers further throttle timers to 1000ms (1 second) to save CPU. Node.js has a minimum delay of 1ms but also subject to the event loop's libuv timer phase overhead.

Example:

/**
 * Use case: yielding to the event loop to prevent blocking 
 */

async function processLargeArray(items) {
  const CHUNK = 500;
  for (let i = 0; i < items.length; i += CHUNK) {
    const chunk = items.slice(i, i + CHUNK);
    processChunk(chunk);

    // Yield after each chunk — allows paint and input events between chunks
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

Real-World Use Case:

Data-grid libraries like AG Grid use setTimeout(fn, 0) to chunk large render operations — rendering 100 rows at a time and yielding between chunks — preventing the browser from becoming unresponsive while loading thousands of rows.

Q. How does Node.js's event loop differ from the browser's, and what are process.nextTick and setImmediate?

Node.js uses libuv for its event loop, which has a more complex, multi-phase structure than the browser's event loop. Each phase has its own FIFO queue of callbacks:

   ┌─────────────────────────────────┐
   │           timers                │  setTimeout / setInterval callbacks
   │  (callbacks scheduled for past  │
   │   or present time thresholds)   │
   └─────────────┬───────────────────┘
                 │
   ┌─────────────▼───────────────────┐
   │       pending callbacks         │  I/O callbacks deferred from previous tick
   └─────────────┬───────────────────┘
                 │
   ┌─────────────▼───────────────────┐
   │        idle, prepare            │  internal Node.js use
   └─────────────┬───────────────────┘
                 │
   ┌─────────────▼───────────────────┐
   │            poll                 │  retrieve new I/O events; block here if idle
   └─────────────┬───────────────────┘
                 │
   ┌─────────────▼───────────────────┐
   │            check                │  setImmediate callbacks
   └─────────────┬───────────────────┘
                 │
   ┌─────────────▼───────────────────┐
   │       close callbacks           │  e.g., socket.on('close', ...)
   └─────────────────────────────────┘

Between every phase, Node.js drains two special queues (highest priority):

1. process.nextTick queue — before Promise microtasks
2. Promise microtask queue — Promise.then / async continuations

Example:

/**
 * Execution order in Node.js 
 */

setImmediate(() => console.log('A — setImmediate (check phase)'));
setTimeout(() => console.log('B — setTimeout (timers phase)'), 0);

Promise.resolve().then(() => console.log('C — Promise microtask'));
process.nextTick(() => console.log('D — nextTick'));

console.log('E — sync');

// Output: E → D → C → B or A (timer vs check order is non-deterministic
//          when both are 0ms, depends on event loop entry time) → the other of B/A

Real-World Use Case:

Node.js HTTP server frameworks like Fastify and Express use process.nextTick internally to defer error propagation and middleware continuations to the next microtask checkpoint — ensuring that all synchronous setup code in a route handler completes before the framework processes the response.

# 20. this Keyword

Q. How is the value of this determined in JavaScript?

this is a dynamic binding — its value is determined at call time, not at definition time (unlike lexical scope). There are four binding rules, applied in order of precedence from highest to lowest:

Arrow functions are the exception: they have no own this — they capture this lexically from their enclosing scope at definition time and no binding rule can change it.

Example 01:

/**
 * Default binding
 */

function whoAmI() {
  console.log(this); // globalThis in sloppy mode, undefined in strict mode
}
whoAmI();

Example 02:

/**
 * Implicit binding
 */

const obj = {
  name: 'Alice',
  greet() { console.log(`Hi from ${this.name}`); },
};
obj.greet(); // 'Hi from Alice' — this = obj

Example 03:

/**
 * Implicit binding LOST when method is extracted
 */

const greet = obj.greet;
greet(); // 'Hi from undefined' — this = globalThis/undefined 

Example 04:

/**
 * Explicit binding 
 */

function introduce(role) {
  console.log(`${this.name} is a ${role}`);
}
introduce.call(  { name: 'Bob' },  'developer'); // Bob is a developer
introduce.apply( { name: 'Carol' }, ['designer']); // Carol is a designer
const boundFn = introduce.bind({ name: 'Dave' });
boundFn('manager'); // Dave is a manager

Example 05:

/**
 * new binding 
 */

function Person(name) {
  this.name = name; // this = newly created object
}
const alice = new Person('Alice');
console.log(alice.name); // 'Alice'

Example 06:

/**
 * Arrow functions — lexical this 
 */

const timer = {
  count: 0,
  start() {
    setInterval(() => {
      this.count++; // `this` = timer (lexical from start())
      console.log(this.count);
    }, 1000);
  },
};
timer.start();

Example 07:

/**
 * Class methods
 */

class Counter {
  #count = 0;

  // Regular method — this depends on call site
  increment() { this.#count++; }

  // Arrow class field — this is permanently bound to instance
  decrement = () => { this.#count--; };

  value() { return this.#count; }
}

const c = new Counter();
const { decrement } = c;   // extracted
decrement();               //  still works — arrow field preserves this
// c.increment extracted would break — regular method loses this

Q. What is the difference between Call, Apply and Bind?

1. Call: invokes the function and allows you to pass in arguments one by one.

Example:

const person = { name: "Sahima Mutti" };

function say(greeting) {
  return `${greeting}, ${this.name}`;
}

// call — invokes immediately, args passed individually
say.call(person, "Hi");    // Hi Sahima Mutti 

2. Apply: invokes the function and allows you to pass in arguments as an array.

Example:

const person = { name: "Sahima Mutti" };

function say(greeting) {
  return `${greeting}, ${this.name}`;
}

// apply — invokes immediately, args passed as array
say.apply(person, ["Hi"]);    // Hi Sahima Mutti 

3. Bind: returns a new function, allowing you to pass in a this array and any number of arguments.

Example:

const person = { name: "Sahima Mutti"};

function say(greeting) {
  return `${greeting}, ${this.name}`;
}

// bind — returns a NEW function, does not invoke immediately
const sayPerson = say.bind(person, "Hello");

sayPerson();    // Hi Sahima Mutti 

⚝ Try this example on CodeSandbox

Q. What is this inside class fields vs. class methods, and what is the performance trade-off?

Class fields (instance properties declared with =) are initialised in the constructor for each instance. An arrow function class field (method = () => {}) creates a new function object per instance, with this permanently bound.

A regular class method (method() {}) lives on the prototype — one function object shared across all instances, with this determined dynamically at the call site.

Example 01:

class Button {
  label = 'Click me';

  // Arrow field: new function per instance, `this` always bound to instance
  handleClickArrow = () => console.log(`Arrow: ${this.label}`);

  // Prototype method: shared across all instances, `this` depends on call site
  handleClickMethod() { console.log(`Method: ${this.label}`); }
}

const btn1 = new Button();
const btn2 = new Button();

console.log(btn1.handleClickMethod === btn2.handleClickMethod); // true  — shared on prototype
console.log(btn1.handleClickArrow  === btn2.handleClickArrow);  // false — new fn per instance

Example 02:

// Subclass behaviour
class Base {
  value = 10;
  arrowMethod = () => this.value * 2;
  protoMethod() { return this.value * 2; }
}

class Child extends Base {
  value = 20;
  protoMethod() { return this.value * 3; } // overrides prototype method
  arrowMethod = () => this.value * 3;      // creates a new instance field (not true override)
}

const child = new Child();
console.log(child.protoMethod()); // 60
console.log(child.arrowMethod()); // 60

# 21. Objects & Prototypes

Q. What are the possible ways to create objects in JavaScript?