JavaScript Questions & Answers

Variables declared with let and const belong to the nearest block, while var belongs to the nearest function:

if (true) {
  var functionScoped = "available outside";
  let blockScoped = "available only inside";
}

console.log(functionScoped); // "available outside"
console.log(blockScoped);    // ReferenceError

A var declaration can be repeated in the same scope:

var score = 10;
var score = 20; // Allowed

let and const cannot be redeclared in the same scope:

let age = 30;
let age = 31; // SyntaxError

const prevents reassignment, but it does not make objects immutable:

const user = { name: "Alex" };

user.name = "Sam";       // Allowed
user = { name: "Lee" };  // TypeError

All three declarations are hoisted. However, var is initialized with undefined, while let and const remain inaccessible in the temporal dead zone until their declarations execute.

Each primitive has a particular purpose:

• string represents text.
• number represents floating-point numbers, including NaN and Infinity.
• bigint represents integers larger than the safe range supported by number.
• boolean represents true or false.
• undefined commonly represents a missing or uninitialized value.
• symbol creates unique identifiers.
• null represents an intentional absence of a value.

const title = "Developer";
const price = 19.99;
const largeNumber = 9007199254740993n;
const isActive = true;
const missing = undefined;
const id = Symbol("id");
const selectedUser = null;

Primitive values are immutable:

let text = "hello";
text.toUpperCase();

console.log(text); // "hello"

String methods return new values rather than modifying the original string.

The typeof operator identifies most primitive types:

typeof "hello";    // "string"
typeof 42;         // "number"
typeof 42n;        // "bigint"
typeof true;       // "boolean"
typeof undefined;  // "undefined"
typeof Symbol();   // "symbol"

One historical JavaScript behavior is:

typeof null; // "object"

Despite this result, null is a primitive.

Common situations that produce undefined include:

• A declared but uninitialized variable
• A missing object property
• A function parameter that was not provided
• A function with no explicit return value

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

const user = {};
console.log(user.name); // undefined

function greet(name) {
  console.log(name);
}

greet(); // undefined

function doSomething() {}
doSomething(); // returns undefined

null is commonly used when a value is intentionally empty:

const state = {
  selectedUser: null
};

Their types behave differently:

typeof undefined; // "undefined"
typeof null;      // "object"

Loose equality considers them equal, but strict equality does not:

null == undefined;  // true
null === undefined; // false

A useful nullish check is:

if (value == null) {
  // Runs when value is either null or undefined
}

In most other comparisons, strict equality should be preferred.

Loose equality follows type-conversion rules that can create surprising results:

0 == false;          // true
"" == false;         // true
null == undefined;   // true
" \t" == 0;          // true

Strict equality requires matching types:

0 === false;          // false
"" === false;         // false
null === undefined;   // false

NaN is not equal to itself with either operator:

NaN == NaN;  // false
NaN === NaN; // false

Use Number.isNaN() to test for it:

Number.isNaN(NaN); // true

Objects are compared by identity rather than by their contents:

{} === {}; // false

const user = { name: "Alex" };
const sameUser = user;

user === sameUser; // true

JavaScript also provides Object.is(), which differs from === in two notable cases:

Object.is(NaN, NaN); // true
Object.is(0, -0);    // false

Values that sometimes look empty can still be truthy:

Boolean([]);      // true
Boolean({});      // true
Boolean("false"); // true
Boolean("0");     // true

Logical operators return operands rather than always returning Boolean values:

"hello" && 42; // 42
"" && 42;      // ""
"" || "guest"; // "guest"

The && operator returns the first falsy operand or the final operand if all are truthy. The || operator returns the first truthy operand or the final operand if all are falsy.

This can cause problems when 0 or an empty string is a valid value:

const count = 0;
const result = count || 10;

console.log(result); // 10

Nullish coalescing only uses the fallback for null or undefined:

const result = count ?? 10;

console.log(result); // 0

Use Boolean(value) or double negation when an actual Boolean is required:

Boolean("hello"); // true
!!"hello";        // true

Implicit coercion depends on the operator and the values involved.

The + operator performs addition when both operands are numbers. If either operand becomes a string, it performs string concatenation:

5 + 2;    // 7
"5" + 2;  // "52"
5 + "2";  // "52"

Most other arithmetic operators attempt to convert their operands to numbers:

"10" - 4; // 6
"10" * 2; // 20
"10" / 2; // 5

If a value cannot be converted into a valid number, the result is NaN:

Number("hello"); // NaN
"hello" * 2;     // NaN

Boolean coercion occurs in conditions and logical expressions:

Boolean("");      // false
Boolean("false"); // true
Boolean([]);      // true
Boolean({});      // true

Loose equality performs coercion before comparison, while strict equality does not:

5 == "5";  // true
5 === "5"; // false

Explicit conversion communicates intent more clearly and reduces unexpected behavior:

const input = "42";
const total = Number(input) + 8;

console.log(total); // 50

A var variable can be accessed before its declaration, but its value is initially undefined:

console.log(score); // undefined
var score = 10;

Conceptually, the declaration is processed before execution, but the assignment remains in place:

var score;
console.log(score);
score = 10;

let and const are also registered before execution, but accessing them early throws a ReferenceError:

console.log(age); // ReferenceError
let age = 30;

Function expressions are not fully initialized early:

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

var greet = function () {
  console.log("Hello");
};

With let or const, calling the function expression early produces a ReferenceError:

greet(); // ReferenceError

const greet = function () {
  console.log("Hello");
};

Understanding hoisting helps explain why declaration style affects when a variable or function can be used.

A variable in the TDZ can also shadow a variable from an outer scope:

const status = "global";

{
  console.log(status); // ReferenceError
  const status = "local";
}

JavaScript does not use the global status inside the block because the local binding belongs to that entire block. It remains inaccessible until its declaration.

Even typeof, which is normally safe for undeclared variables, throws an error for a variable in the TDZ:

typeof unknownVariable; // "undefined"

typeof value; // ReferenceError
let value = 10;

A const variable must be initialized at its declaration:

const name; // SyntaxError

A let variable can be declared without an initial value. It becomes undefined after the declaration executes:

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

The TDZ encourages variables to be declared before use and helps reveal initialization-order mistakes.

JavaScript has several kinds of scope:

• Global scope
• Module scope
• Function scope
• Block scope

A function retains the scope in which it was defined, regardless of where it is called:

const name = "Global";

function printName() {
  console.log(name);
}

function run() {
  const name = "Local";
  printName();
}

run(); // "Global"

printName was defined in the global lexical environment, so it uses the global name. The fact that it is called inside run does not change its scope.

Nested functions can search through multiple outer scopes:

const globalValue = "global";

function outer() {
  const outerValue = "outer";

  function inner() {
    const innerValue = "inner";

    console.log(innerValue);
    console.log(outerValue);
    console.log(globalValue);
  }

  inner();
}

Scope lookup moves outward only. outer cannot access innerValue.

Lexical scope is also the foundation of closures because a function retains access to the environment where it was created.

The returned function continues to access count after createCounter has completed:

const counter = createCounter();

counter(); // 1
counter(); // 2
counter(); // 3

Each invocation of the outer function creates a separate lexical environment:

const firstCounter = createCounter();
const secondCounter = createCounter();

firstCounter();  // 1
firstCounter();  // 2
secondCounter(); // 1

Closures can create private state:

function createAccount(initialBalance) {
  let balance = initialBalance;

  return {
    deposit(amount) {
      balance += amount;
    },
    getBalance() {
      return balance;
    }
  };
}

const account = createAccount(100);
account.deposit(50);
account.getBalance(); // 150

The balance variable cannot be accessed directly from outside the returned methods.

Closures are also created in event handlers:

function attachHandler(button, message) {
  button.addEventListener("click", () => {
    console.log(message);
  });
}

The handler retains access to message.

Closures may keep referenced data in memory for as long as the closure remains reachable. Unnecessary long-lived closures can therefore contribute to memory usage.

Shadowing can occur in functions and blocks:

const status = "offline";

{
  const status = "online";
  console.log(status); // "online"
}

console.log(status); // "offline"

Function parameters can also shadow outer variables:

const user = "Alex";

function greet(user) {
  console.log(user);
}

greet("Sam"); // "Sam"

Not every combination of declarations is allowed. For example, a let variable cannot be redeclared with var in the same scope:

let count = 1;
var count = 2; // SyntaxError

Shadowing is different from reassignment:

let score = 10;

{
  score = 20; // Reassigns the outer variable
}

console.log(score); // 20

Declaring let score = 20 inside the block would create a separate shadowing variable instead.

Clear, specific names are usually preferable when shadowing could make the code difficult to follow.

Reassigning a primitive parameter does not affect the original variable:

function change(value) {
  value = 20;
}

let score = 10;
change(score);

console.log(score); // 10

The function receives its own copy of the number.

With an object, the parameter and the caller’s variable initially contain copies of the same reference:

function update(user) {
  user.name = "Sam";
}

const person = { name: "Alex" };
update(person);

console.log(person.name); // "Sam"

Both references identify the same object, so mutation is visible to the caller.

Reassigning the parameter only replaces the function’s local reference:

function replace(user) {
  user = { name: "Lee" };
}

const person = { name: "Alex" };
replace(person);

console.log(person.name); // "Alex"

This distinction also applies to arrays:

function addItem(items) {
  items.push("new"); // Mutates the original array
}

function replaceItems(items) {
  items = []; // Reassigns only the local parameter
}

To avoid unwanted mutation, create a new object or array:

function rename(user, name) {
  return { ...user, name };
}

A shallow copy duplicates only the first level:

const original = {
  name: "Alex",
  settings: {
    theme: "light"
  }
};

const copy = { ...original };

copy.name = "Sam";
copy.settings.theme = "dark";

console.log(original.name);           // "Alex"
console.log(original.settings.theme); // "dark"

name is independent because it is a primitive top-level property. The nested settings object remains shared.

structuredClone() creates a deep copy:

const deepCopy = structuredClone(original);

deepCopy.settings.theme = "blue";

console.log(original.settings.theme); // "dark"

It supports many types, including:

• Objects and arrays
• Date
• Map and Set
• Typed arrays
• Circular references

It cannot clone every value. Functions, DOM nodes, and some platform-specific objects are not supported.

Converting through JSON is sometimes used as a simple deep-copy technique:

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

However, this approach loses or changes unsupported data such as undefined, functions, symbols, Date, Map, Set, BigInt, and circular references. It should not be treated as a general-purpose cloning solution.

Object properties can be renamed:

const user = { name: "Alex" };
const { name: displayName } = user;

console.log(displayName); // "Alex"

Default values are used when the extracted value is undefined:

const user = {};
const { role = "guest" } = user;

console.log(role); // "guest"

A default does not replace null:

const user = { role: null };
const { role = "guest" } = user;

console.log(role); // null

Array elements can be skipped:

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

console.log(tertiary); // "blue"

Nested values can be destructured:

const user = {
  profile: {
    email: "alex@example.com"
  }
};

const {
  profile: { email }
} = user;

Rest syntax collects the remaining values:

const [first, ...remaining] = [1, 2, 3, 4];
// first: 1
// remaining: [2, 3, 4]

Destructuring is also useful in function parameters:

function printUser({ name, role = "guest" }) {
  console.log(`${name}: ${role}`);
}

Nested destructuring can throw an error if an expected parent value is missing, so defaults or optional access may be necessary when working with uncertain data.

Array spread can copy or combine arrays:

const first = [1, 2];
const second = [3, 4];

const combined = [...first, ...second];
// [1, 2, 3, 4]

Function-call spread passes iterable values as separate arguments:

const numbers = [4, 8, 2];

Math.max(...numbers); // 8

Object spread copies enumerable own properties:

const defaults = {
  theme: "light",
  language: "en"
};

const settings = {
  ...defaults,
  theme: "dark"
};

Later properties override earlier properties, so settings.theme becomes "dark".

Rest parameters collect arguments into a real array:

function average(...numbers) {
  const total = numbers.reduce(
    (sum, number) => sum + number,
    0
  );

  return total / numbers.length;
}

Rest syntax can collect remaining destructured values:

const user = {
  id: 1,
  name: "Alex",
  role: "admin"
};

const { id, ...details } = user;

Spread creates shallow copies. Nested objects remain shared:

const original = {
  settings: { dark: false }
};

const copy = { ...original };
copy.settings.dark = true;

console.log(original.settings.dark); // true

Any valid expression can appear inside ${...}:

const price = 20;
const quantity = 3;

const message = `Total: $${price * quantity}`;
// "Total: $60"

Properties and function calls can also be interpolated:

const user = { name: "Alex" };

const text = `Welcome, ${user.name.toUpperCase()}!`;

Template literals can span multiple lines:

const content = `First line
Second line
Third line`;

Tagged templates pass the literal’s static strings and evaluated expressions to a function:

function inspect(strings, ...values) {
  console.log(strings);
  console.log(values);
}

const name = "Alex";
const count = 3;

inspect`${name} has ${count} messages`;

Tagged templates can be used for escaping content, localization, formatting, or domain-specific syntax.

Interpolation does not automatically make untrusted content safe. When inserting user-controlled values into HTML, developers must still use appropriate escaping or safe DOM APIs to prevent cross-site scripting.

Named exports use the exported names:

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

They are imported with braces:

import { add, subtract } from "./math.js";

A named import can be aliased:

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

A default export can be imported using any local name:

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

import writeLog from "./logger.js";

Named and default imports can be combined:

// math.js
export default function multiply(a, b) {
  return a * b;
}

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

import multiply, { add } from "./math.js";

Static imports are resolved before the module executes and normally appear at the top level. Dynamic import() loads a module asynchronously:

const module = await import("./analytics.js");
module.trackPageView();

Dynamic imports are useful for conditional loading and code splitting.

Imported bindings are live bindings. If the exporting module updates an exported variable, importing modules observe its current value:

// counter.js
export let count = 0;

export function increment() {
  count++;
}

Modules are evaluated once, and repeated imports reuse the same module instance.

In browsers, modules are loaded with:

<script type="module" src="./app.js"></script>

Browser modules use strict mode automatically, have their own scope, and are deferred by default.

A function declaration uses this syntax:

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

A function expression can be anonymous:

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

It can also have an internal name:

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

When a function expression is stored in const, the variable is in the temporal dead zone before its declaration:

greet(); // ReferenceError

const greet = function () {
  console.log("Hello");
};

With var, the variable is initialized with undefined, so calling it early produces a TypeError:

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

var greet = function () {
  console.log("Hello");
};

Function expressions are useful when functions are passed as values, used as callbacks, or created conditionally.

Arrow functions can use an implicit return when the body contains one expression:

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

Curly braces require an explicit return:

const add = (a, b) => {
  return a + b;
};

Returning an object implicitly requires parentheses:

const createUser = name => ({ name });

Arrow functions inherit this from their surrounding scope:

const timer = {
  seconds: 0,

  start() {
    setInterval(() => {
      this.seconds++;
    }, 1000);
  }
};

The callback uses the same this as start.

An arrow function is usually unsuitable as an object method when dynamic this is required:

const user = {
  name: "Alex",
  greet: () => {
    console.log(this.name);
  }
};

The arrow function does not receive user as its this.

Arrow functions cannot be called with new:

const User = name => {
  this.name = name;
};

new User("Alex"); // TypeError

They also do not have their own arguments object. Rest parameters should be used instead:

const sum = (...numbers) =>
  numbers.reduce((total, number) => total + number, 0);

A standalone function call uses the default binding:

"use strict";

function showThis() {
  console.log(this);
}

showThis(); // undefined

In older non-strict browser scripts, the default value may be the global object.

A method can lose its receiver when it is separated from its object:

const greet = user.greet;
greet(); // `this` is no longer `user`

Explicit binding can provide a value:

greet.call(user); // "Alex"

Constructor calls create a new object and bind it to this:

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

const user = new User("Alex");

Arrow functions do not create their own this:

const user = {
  name: "Alex",

  delayedGreeting() {
    setTimeout(() => {
      console.log(this.name);
    }, 100);
  }
};

Binding precedence is generally:

1. Constructor binding with new
2. Explicit binding with bind, call, or apply
3. Method binding
4. Default binding

A function created by bind keeps its bound this, although calling that bound function with new uses the newly created instance.

Consider this function:

function introduce(greeting, punctuation) {
  return `${greeting}, I am ${this.name}${punctuation}`;
}

const user = { name: "Alex" };

call accepts individual arguments:

introduce.call(user, "Hello", "!");
// "Hello, I am Alex!"

apply accepts them as a collection:

introduce.apply(user, ["Hello", "!"]);
// "Hello, I am Alex!"

bind creates a new function:

const introduceAlex = introduce.bind(user);

introduceAlex("Hello", "!");
// "Hello, I am Alex!"

bind can also preset arguments, which is called partial application:

const sayHelloToAlex = introduce.bind(
  user,
  "Hello"
);

sayHelloToAlex("!");

These methods cannot replace the lexical this of an arrow function:

const showThis = () => this;

showThis.call(user); // Does not change arrow `this`

A function that receives another function is higher-order:

function repeat(times, action) {
  for (let index = 0; index < times; index++) {
    action(index);
  }
}

repeat(3, index => {
  console.log(index);
});

A function that returns a function is also higher-order:

function multiplyBy(multiplier) {
  return number => number * multiplier;
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

double(5); // 10
triple(5); // 15

Higher-order functions can separate reusable control flow from changing behavior:

function withLogging(action) {
  return (...argumentsList) => {
    console.log("Starting");
    const result = action(...argumentsList);
    console.log("Finished");
    return result;
  };
}

This pattern is useful for validation, authorization, caching, logging, retries, and event handling.

Synchronous callbacks execute before the surrounding function returns:

const numbers = [1, 2, 3];

const doubled = numbers.map(number => {
  return number * 2;
});

Asynchronous callbacks execute later:

setTimeout(() => {
  console.log("Executed later");
}, 1000);

Event listeners also use callbacks:

button.addEventListener("click", event => {
  console.log(event.target);
});

Traditional asynchronous code can become deeply nested:

getUser(userId, user => {
  getOrders(user.id, orders => {
    getOrderDetails(orders[0].id, details => {
      console.log(details);
    });
  });
});

This is often called callback hell. Promises and async/await make many asynchronous workflows easier to compose and handle.

Error-first callbacks are common in older Node.js APIs:

operation((error, result) => {
  if (error) {
    console.error(error);
    return;
  }

  console.log(result);
});

Common side effects include:

• Modifying an external variable
• Mutating an argument
• Updating the DOM
• Writing to storage
• Sending a network request
• Logging to the console
• Reading the current time
• Generating a random value

This function is impure because it changes external state:

let total = 0;

function addToTotal(amount) {
  total += amount;
  return total;
}

This version is pure:

function addToTotal(total, amount) {
  return total + amount;
}

Mutation can also make a function impure:

function addUser(users, user) {
  users.push(user);
  return users;
}

A non-mutating version returns a new array:

function addUser(users, user) {
  return [...users, user];
}

Real applications require side effects. The goal is usually to isolate them from pure business logic rather than eliminate them entirely.

For example, data transformation can remain pure while a separate function handles the network request or DOM update.

An arrow function can also be used:

(() => {
  const value = 42;
  console.log(value);
})();

An IIFE can return a value:

const result = (() => {
  const first = 10;
  const second = 20;

  return first + second;
})();

console.log(result); // 30

IIFEs were commonly used in the module pattern:

const counter = (() => {
  let count = 0;

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

The count variable remains private.

Modern JavaScript modules and block-scoped variables have reduced the need for IIFEs. However, they can still be useful for one-time initialization or creating an isolated scope in older code.

An async IIFE allows await in environments where top-level await is unavailable:

(async () => {
  const response = await fetch("/api/users");
  const users = await response.json();

  console.log(users);
})();

Default expressions can reference earlier parameters:

function createRange(start, end = start + 10) {
  return { start, end };
}

createRange(5); // { start: 5, end: 15 }

A later parameter cannot safely be referenced before it has been initialized:

function example(first = second, second = 2) {
  return first + second;
}

example(); // ReferenceError

Default expressions can call functions:

function generateId() {
  return crypto.randomUUID();
}

function createUser(name, id = generateId()) {
  return { name, id };
}

generateId() runs each time the default is needed.

Destructured parameters can have defaults:

function configure({
  theme = "light",
  language = "en"
} = {}) {
  return { theme, language };
}

configure(); // Works because the object defaults to {}

Without = {}, calling configure() would attempt to destructure undefined and throw an error.

An object can have both own properties and inherited properties:

const animal = {
  type: "animal"
};

const dog = Object.create(animal);
dog.name = "Rex";

dog.name; // Own property
dog.type; // Inherited property

Object.hasOwn() checks whether a property belongs directly to the object:

Object.hasOwn(dog, "name"); // true
Object.hasOwn(dog, "type"); // false

Constructor functions typically place shared methods on their prototype object:

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

User.prototype.greet = function () {
  return `Hello, ${this.name}`;
};

const user = new User("Alex");
user.greet();

The new operator creates an object whose prototype points to User.prototype.

Classes use the same prototype-based mechanism:

class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}`;
  }
}

Class syntax makes the pattern more readable but does not replace prototype-based inheritance with a separate inheritance model.

Consider an array:

const numbers = [1, 2, 3];

A simplified version of its prototype chain is:

numbers
  → Array.prototype
  → Object.prototype
  → null

numbers.map is found on Array.prototype, while numbers.toString can ultimately be found through the chain.

An own property shadows an inherited property with the same name:

const parent = {
  role: "parent"
};

const child = Object.create(parent);
child.role = "child";

console.log(child.role); // "child"

The prototype can be inspected using:

Object.getPrototypeOf(child);

An object without Object.prototype can be created with:

const dictionary = Object.create(null);

This object does not inherit methods such as toString or hasOwnProperty.

Directly changing prototypes with Object.setPrototypeOf() can harm performance. Prototypes are usually established when objects are created through classes, constructor functions, object literals, or Object.create().

The constructor-function equivalent is:

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

User.prototype.greet = function () {
  return `Hello, ${this.name}`;
};

Both versions allow this:

const user = new User("Alex");
user.greet();

Important differences include:

• Class declarations are in the temporal dead zone.
• Class constructors must be called with new.
• Class bodies run in strict mode.
• Class methods are non-enumerable.
• Classes support extends, super, static members, and private fields with concise syntax.

Calling a class without new throws an error:

User("Alex"); // TypeError

A traditional constructor function may be called without new, although doing so is usually a bug.

Classes support private fields:

class Account {
  #balance = 0;

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

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

Private fields cannot be accessed directly outside the class.

Instance methods are stored on the class prototype:

class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, ${this.name}`;
  }
}

const user = new User("Alex");
user.greet();

The instance method is shared rather than recreated for every instance:

user.greet === User.prototype.greet; // true

Static methods are called on the class:

class User {
  static fromJSON(json) {
    const data = JSON.parse(json);
    return new User(data.name);
  }

  constructor(name) {
    this.name = name;
  }
}

const user = User.fromJSON('{"name":"Alex"}');

An instance does not inherit static methods:

user.fromJSON(); // TypeError

Inside a static method, this normally refers to the class on which the method was called:

class Base {
  static create() {
    return new this();
  }
}

class Child extends Base {}

Child.create(); // Creates a Child instance

Static properties are also useful for class-level constants or shared state, although shared mutable state should be used carefully.

The getter is accessed like a property, not called like a method:

user.fullName; // "Alex Smith"

A setter can validate data:

class Temperature {
  #celsius = 0;

  get celsius() {
    return this.#celsius;
  }

  set celsius(value) {
    if (!Number.isFinite(value)) {
      throw new TypeError("Temperature must be a number");
    }

    this.#celsius = value;
  }
}

It is used with assignment syntax:

const temperature = new Temperature();

temperature.celsius = 25;
console.log(temperature.celsius); // 25

A getter can expose a derived value:

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  get area() {
    return this.width * this.height;
  }
}

Getters should generally avoid surprising side effects because property access looks like a simple read.

Setters accept exactly one parameter. If only a getter is defined, the property is read-only through that accessor.

Accessors can be defined in object literals, classes, or with Object.defineProperty().

Common mutating array methods include:

• push
• pop
• shift
• unshift
• splice
• sort
• reverse
• fill

const numbers = [3, 1, 2];
numbers.sort();

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

Common non-mutating array methods include:

• map
• filter
• slice
• concat
• toSorted
• toReversed
• toSpliced

const numbers = [3, 1, 2];
const sorted = numbers.toSorted();

console.log(numbers); // [3, 1, 2]
console.log(sorted);  // [1, 2, 3]

Objects can be updated immutably with spread syntax:

const user = {
  name: "Alex",
  role: "user"
};

const updatedUser = {
  ...user,
  role: "admin"
};

Nested updates require copying every changed level:

const state = {
  user: {
    settings: {
      theme: "light"
    }
  }
};

const updatedState = {
  ...state,
  user: {
    ...state.user,
    settings: {
      ...state.user.settings,
      theme: "dark"
    }
  }
};

const does not make an object immutable:

const user = { name: "Alex" };
user.name = "Sam"; // Allowed

Object.freeze() prevents direct changes to an object’s own properties, but it is shallow:

const settings = Object.freeze({
  nested: {
    theme: "light"
  }
});

settings.nested.theme = "dark"; // Nested object is not frozen

Immutability can improve predictability, change detection, undo functionality, memoization, and debugging. However, copying large structures also has a performance and memory cost, so the appropriate strategy depends on the application.

map calls its callback for every existing element and stores each returned value:

const users = [
  { id: 1, name: "Alex" },
  { id: 2, name: "Sam" }
];

const names = users.map(user => user.name);
// ["Alex", "Sam"]

filter includes an element when the callback returns a truthy value:

const activeUsers = users.filter(user => user.active);

reduce receives an accumulator, the current value, the current index, and the original array:

const total = numbers.reduce(
  (accumulator, number) => accumulator + number,
  0
);

The second argument is the accumulator’s initial value. Providing it is generally safer:

[].reduce((sum, number) => sum + number);
// TypeError

[].reduce((sum, number) => sum + number, 0);
// 0

reduce can build arrays, objects, maps, or other structures:

const grouped = users.reduce((groups, user) => {
  const role = user.role;
  groups[role] ??= [];
  groups[role].push(user);
  return groups;
}, {});

Although these methods do not mutate the source array directly, their callbacks can still mutate objects contained in the array. Avoid such side effects when predictable transformations are important.

Returning a value from a forEach callback does not create a result array:

const result = [1, 2, 3].forEach(number => {
  return number * 2;
});

console.log(result); // undefined

Both methods receive the same callback arguments:

array.map((element, index, originalArray) => {
  // ...
});

array.forEach((element, index, originalArray) => {
  // ...
});

Neither method supports early termination with break or return:

[1, 2, 3].forEach(number => {
  if (number === 2) {
    return; // Skips only the rest of this callback
  }
});

Use for...of, find, some, or every when early termination is required.

Avoid using forEach directly with asynchronous callbacks when the operations must be awaited:

// Does not wait for all callbacks to finish
users.forEach(async user => {
  await saveUser(user);
});

Sequential processing can use for...of:

for (const user of users) {
  await saveUser(user);
}

Parallel processing can use map with Promise.all:

await Promise.all(
  users.map(user => saveUser(user))
);

find returns the element itself, not its index:

const users = [
  { id: 1, name: "Alex" },
  { id: 2, name: "Sam" }
];

const user = users.find(user => user.id === 2);
// { id: 2, name: "Sam" }

Use findIndex when the position is needed:

const index = users.findIndex(user => user.id === 2);
// 1

Newer JavaScript also provides findLast and findLastIndex for searching from the end:

const values = [1, 4, 2, 4];

values.findLast(value => value === 4);      // 4
values.findLastIndex(value => value === 4); // 3

filter always returns a new array, even when nothing matches:

const matches = users.filter(user => user.id === 99);

console.log(matches); // []
console.log(Boolean(matches)); // true

Because an empty array is truthy, check its length when determining whether results exist:

if (matches.length === 0) {
  console.log("No users found");
}

some stops after finding the first truthy callback result:

const hasAdmin = users.some(user => {
  return user.role === "admin";
});

every stops after finding the first falsy result:

const allActive = users.every(user => {
  return user.active;
});

Their results for an empty array are important:

[].some(() => true);  // false
[].every(() => false); // true

some returns false because no element satisfies the condition. every returns true because no element violates the condition. This is known as vacuous truth.

some can be used as an existence check:

const hasPermission = permissions.some(
  permission => permission === "edit"
);

every is useful for validation:

const formIsValid = fields.every(field => {
  return field.value.trim() !== "";
});

Because both short-circuit, they may be more efficient than filter when only a Boolean result is required.

Methods that add or remove elements mutate the array:

const items = ["a", "b"];

items.push("c");    // ["a", "b", "c"]
items.pop();        // ["a", "b"]
items.unshift("z"); // ["z", "a", "b"]
items.shift();      // ["a", "b"]

splice can remove, replace, or insert elements:

const items = ["a", "b", "c"];

items.splice(1, 1, "x");
// items is ["a", "x", "c"]

sort and reverse mutate the original:

const numbers = [3, 1, 2];

const result = numbers.sort();

result === numbers; // true

Modern non-mutating alternatives include:

const sorted = numbers.toSorted();
const reversed = numbers.toReversed();
const changed = numbers.toSpliced(1, 1, 10);
const replaced = numbers.with(0, 99);

Older code can copy before applying a mutating method:

const sorted = [...numbers].sort((a, b) => a - b);

Assignment by index also mutates an array:

numbers[0] = 100;

A method can return a new array while its callback still mutates contained objects:

const users = [{ name: "Alex" }];

const result = users.map(user => {
  user.name = "Sam";
  return user;
});

console.log(users[0].name); // "Sam"

Array.from() can also convert a Set into an array:

const uniqueValues = Array.from(new Set(values));

Set works well for duplicate primitive values:

[...new Set(["a", "a", "b"])];
// ["a", "b"]

Object values are compared by identity, not by contents:

const users = [
  { id: 1 },
  { id: 1 }
];

[...new Set(users)].length; // 2

Although the objects contain the same data, they are different object references.

Objects can be deduplicated by a property using a Map:

const users = [
  { id: 1, name: "Alex" },
  { id: 2, name: "Sam" },
  { id: 1, name: "Alexander" }
];

const uniqueUsers = [
  ...new Map(
    users.map(user => [user.id, user])
  ).values()
];

Because later entries replace earlier entries with the same key, this keeps the final object for each id.

To keep the first occurrence:

const seen = new Set();

const uniqueUsers = users.filter(user => {
  if (seen.has(user.id)) {
    return false;
  }

  seen.add(user.id);
  return true;
});

The right solution depends on whether uniqueness is based on primitive equality, object identity, or a selected property.

Object property keys are strings or symbols. Other values are converted to strings:

const object = {};

object[1] = "number";
object["1"] = "string";

console.log(object[1]); // "string"

A Map distinguishes these keys:

const map = new Map();

map.set(1, "number");
map.set("1", "string");

map.get(1);   // "number"
map.get("1"); // "string"

Objects can also be used as keys:

const user = { id: 1 };
const permissions = new Map();

permissions.set(user, ["read", "write"]);
permissions.get(user); // ["read", "write"]

A Map provides:

map.set(key, value);
map.get(key);
map.has(key);
map.delete(key);
map.clear();
map.size;

It is directly iterable:

for (const [key, value] of map) {
  console.log(key, value);
}

Objects are often more convenient for structured records:

const user = {
  id: 1,
  name: "Alex",
  role: "admin"
};

Objects work directly with JSON.stringify(). A Map requires explicit conversion before JSON serialization.

The main Set operations are:

const roles = new Set();

roles.add("admin");
roles.has("admin");    // true
roles.delete("admin"); // true
roles.clear();
roles.size;            // 0

A Set can be constructed from any iterable:

const uniqueLetters = new Set("hello");
// Set { "h", "e", "l", "o" }

It can be converted into an array:

const values = [...uniqueLetters];

Sets are directly iterable:

for (const role of roles) {
  console.log(role);
}

Object values are unique by identity:

const first = { id: 1 };
const second = { id: 1 };

const set = new Set([first, second]);

console.log(set.size); // 2

A Set is often clearer than repeatedly using array.includes() when many membership checks are required:

const allowedRoles = new Set([
  "admin",
  "editor",
  "author"
]);

if (allowedRoles.has(user.role)) {
  // Allow access
}

Modern JavaScript environments also provide set-composition methods such as union, intersection, difference, and isSubsetOf. Compatibility should be checked when supporting older browsers.

A regular Map strongly retains its keys:

const cache = new Map();

let user = { id: 1 };
cache.set(user, "cached");

user = null;

The object remains reachable through cache, so it cannot be garbage-collected.

A WeakMap does not keep its keys alive:

const cache = new WeakMap();

let user = { id: 1 };
cache.set(user, "cached");

user = null;

If no other references remain, the object and its associated entry may be collected.

Common WeakMap operations are:

weakMap.set(object, value);
weakMap.get(object);
weakMap.has(object);
weakMap.delete(object);

Common WeakSet operations are:

weakSet.add(object);
weakSet.has(object);
weakSet.delete(object);

Weak collections are not iterable and do not expose size or clear. Garbage collection is unpredictable, so JavaScript cannot provide a reliable list of their current entries.

A WeakMap can store private metadata associated with an object:

const privateData = new WeakMap();

class User {
  constructor(name) {
    privateData.set(this, { name });
  }

  getName() {
    return privateData.get(this).name;
  }
}

A WeakSet can track whether particular objects have been processed:

const processed = new WeakSet();

function process(object) {
  if (processed.has(object)) {
    return;
  }

  processed.add(object);
  // Process the object
}

Weak collections are specialized tools. Use Map or Set when iteration, primitive keys, or collection size is required.

The browser environment includes several cooperating components:

• The JavaScript engine
• The call stack
• Browser APIs
• The microtask queue
• Task queues
• The event loop
• The rendering system

When a timer is created, the browser tracks it outside the JavaScript call stack. After the delay has elapsed, its callback becomes eligible to enter a task queue.

The event loop generally performs work in this order:

1. Execute the current task.
2. Empty the microtask queue.
3. Give the browser an opportunity to render.
4. Begin another task.

A zero-millisecond timeout does not run immediately. It specifies a minimum delay before the callback can be queued:

setTimeout(callback, 0);

The callback must still wait for the current code and all queued microtasks to complete.

Long-running synchronous code blocks the event loop:

const start = Date.now();

while (Date.now() - start < 5000) {
  // Blocks the main thread
}

During this period, the page may not respond to input, process callbacks, or update its display.

A simplified execution sequence is:

Add global execution context
Add first()
Add second()
Add console.log()
Remove console.log()
Remove second()
Remove first()

Each stack frame stores information such as:

• Function arguments
• Local variables
• The current execution position
• The function’s this value
• A reference to its lexical environment

Recursive functions add a new frame for every call:

function countDown(number) {
  if (number === 0) {
    return;
  }

  countDown(number - 1);
}

countDown(5);

Recursion without a valid stopping condition eventually exceeds the available stack:

function recurse() {
  recurse();
}

recurse(); // RangeError: Maximum call stack size exceeded

Stack traces show the chain of active function calls at the time an error occurred, making them important for debugging.

Synchronous code blocks further JavaScript execution until it finishes:

const result = performCalculation();
console.log(result);

Asynchronous APIs return control before their work completes:

fetch("/api/users")
  .then(response => response.json())
  .then(users => console.log(users));

console.log("Request started");

async/await makes asynchronous code look sequential, but await does not block the entire JavaScript thread:

async function loadUsers() {
  const response = await fetch("/api/users");
  const users = await response.json();

  return users;
}

The async function pauses at await, while other eligible work can continue.

Asynchronous code is helpful for:

• Network requests
• Timers
• User interactions
• File operations in supported environments
• Background work
• Streams and animations

CPU-intensive JavaScript is still blocking unless it is divided into smaller tasks or moved to a worker.

Common microtask sources include:

• Promise reaction callbacks
• Code after await
• queueMicrotask()
• MutationObserver callbacks

Common task sources include:

• setTimeout
• setInterval
• User-interface events
• Message events
• Some network and platform callbacks

Microtasks added while processing microtasks run before the browser moves to the next task:

queueMicrotask(() => {
  console.log("Microtask 1");

  queueMicrotask(() => {
    console.log("Microtask 2");
  });
});

Excessive microtasks can delay rendering and other tasks. This is called microtask starvation:

function repeat() {
  queueMicrotask(repeat);
}

repeat();

Browser scheduling details are defined in terms of tasks rather than “macrotasks,” but “macrotask” is commonly used in interviews to distinguish task queues from the microtask queue.

Nested scheduling changes the order:

console.log("1");

setTimeout(() => {
  console.log("2");

  Promise.resolve().then(() => {
    console.log("3");
  });
}, 0);

Promise.resolve().then(() => {
  console.log("4");

  setTimeout(() => {
    console.log("5");
  }, 0);
});

console.log("6");

Output:

1
6
4
2
3
5

The reasoning is:

1. Synchronous code prints 1 and 6.
2. The first Promise callback runs and prints 4.
3. The first timer task prints 2.
4. Its Promise callback runs as a microtask and prints 3.
5. The timer created inside the earlier Promise callback prints 5.

An await continuation is also scheduled through the microtask mechanism:

async function run() {
  console.log("Inside 1");
  await Promise.resolve();
  console.log("Inside 2");
}

console.log("Outside 1");
run();
console.log("Outside 2");

Output:

Outside 1
Inside 1
Outside 2
Inside 2

A Promise can be created with an executor function:

const promise = new Promise((resolve, reject) => {
  const succeeded = true;

  if (succeeded) {
    resolve("Completed");
  } else {
    reject(new Error("Failed"));
  }
});

The executor runs synchronously:

console.log("Before");

new Promise(resolve => {
  console.log("Executor");
  resolve();
});

console.log("After");

Output:

Before
Executor
After

Promise handlers always run asynchronously as microtasks, even when the Promise is already settled:

Promise.resolve("Done").then(console.log);
console.log("Synchronous");

Output:

Synchronous
Done

then returns a new Promise, enabling chaining:

Promise.resolve(2)
  .then(value => value * 2)
  .then(value => value + 1)
  .then(console.log); // 5

Returning a Promise from a handler causes the next step to wait for it:

fetch("/api/user")
  .then(response => response.json())
  .then(user => fetch(`/api/orders/${user.id}`))
  .then(response => response.json());

Throwing inside a handler rejects the Promise returned by that handler:

Promise.resolve()
  .then(() => {
    throw new Error("Failed");
  })
  .catch(error => console.error(error));

These transitions are possible:

pending → fulfilled
pending → rejected

These transitions are not possible:

fulfilled → rejected
rejected → fulfilled
settled → pending

Resolving a Promise with another Promise makes the outer Promise adopt the other Promise’s eventual state:

const inner = new Promise(resolve => {
  setTimeout(() => resolve("Done"), 1000);
});

const outer = new Promise(resolve => {
  resolve(inner);
});

outer.then(console.log); // "Done"

A Promise may be resolved but still pending while it follows another Promise. For everyday interviews, “resolved” is often treated as synonymous with “fulfilled,” but the specification distinguishes them.

A rejection should normally use an Error object:

reject(new Error("Unable to load user"));

This preserves a useful message and stack trace.

An unhandled rejection occurs when a rejected Promise has no rejection handler. Browsers may report it in the console and emit an unhandledrejection event.

Returning a normal value from an async function creates a fulfilled Promise:

async function getNumber() {
  return 42;
}

getNumber().then(console.log); // 42

Throwing creates a rejected Promise:

async function fail() {
  throw new Error("Failed");
}

fail().catch(console.error);

await accepts any value. A non-Promise value behaves like an already fulfilled Promise, but continuation still occurs asynchronously:

async function run() {
  console.log("A");
  await 42;
  console.log("C");
}

run();
console.log("B");

Output:

A
B
C

Errors can be handled with try and catch:

async function loadUser() {
  try {
    const response = await fetch("/api/user");

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error(error);
    throw error;
  }
}

Independent operations should not be awaited one after another unnecessarily:

const [user, products] = await Promise.all([
  fetchUser(),
  fetchProducts()
]);

This starts both operations before waiting for them together.

Promise.all preserves input order, regardless of completion order:

const results = await Promise.all([
  fetchUser(),
  fetchProducts(),
  fetchSettings()
]);

If any input rejects, the combined Promise rejects immediately. Other operations are not automatically cancelled.

Promise.allSettled returns status objects:

const results = await Promise.allSettled([
  Promise.resolve("A"),
  Promise.reject(new Error("Failed"))
]);

Result shape:

[
  {
    status: "fulfilled",
    value: "A"
  },
  {
    status: "rejected",
    reason: Error("Failed")
  }
]

Promise.race reacts to the first settlement, whether successful or failed:

const result = await Promise.race([
  fetchData(),
  timeoutPromise(5000)
]);

Promise.any ignores rejections until one input fulfills:

const fastestSuccess = await Promise.any([
  fetchFromServerA(),
  fetchFromServerB()
]);

If every input rejects, Promise.any rejects with an AggregateError.

Empty iterables behave differently:

Promise.all([]);        // Fulfilled with []
Promise.allSettled([]); // Fulfilled with []
Promise.any([]);        // Rejected with AggregateError
Promise.race([]);       // Remains pending

Promise chains propagate rejections to the nearest rejection handler:

fetchUser()
  .then(user => fetchOrders(user.id))
  .then(orders => renderOrders(orders))
  .catch(error => {
    showErrorMessage(error);
  });

A try...catch block does not catch a Promise rejection unless the Promise is awaited:

try {
  fetchUser(); // Rejection is not caught here
} catch (error) {
  console.error(error);
}

Correct version:

try {
  await fetchUser();
} catch (error) {
  console.error(error);
}

Fetch only rejects for certain network-level failures. HTTP error statuses must be checked explicitly:

const response = await fetch("/api/user");

if (!response.ok) {
  throw new Error(`Request failed: ${response.status}`);
}

Avoid silently swallowing errors:

try {
  await saveUser();
} catch (error) {
  // Empty catch hides the failure
}

Add contextual information while preserving the original cause:

try {
  await saveUser();
} catch (error) {
  throw new Error("Could not save user", {
    cause: error
  });
}

finally is appropriate for cleanup:

setLoading(true);

try {
  await loadData();
} finally {
  setLoading(false);
}

Cancellation can be handled explicitly:

const controller = new AbortController();

try {
  const response = await fetch("/api/users", {
    signal: controller.signal
  });

  const users = await response.json();
} catch (error) {
  if (error.name === "AbortError") {
    console.log("Request cancelled");
  } else {
    throw error;
  }
}

A single signal can cancel multiple related operations:

const controller = new AbortController();

const requests = [
  fetch("/api/user", {
    signal: controller.signal
  }),
  fetch("/api/products", {
    signal: controller.signal
  })
];

controller.abort();

Some environments support timeout signals:

const response = await fetch("/api/users", {
  signal: AbortSignal.timeout(5000)
});

When implementing search suggestions, cancel the previous request before starting a new one:

let currentController;

async function search(query) {
  currentController?.abort();
  currentController = new AbortController();

  const response = await fetch(
    `/api/search?q=${encodeURIComponent(query)}`,
    { signal: currentController.signal }
  );

  return response.json();
}

Aborting Fetch does not guarantee that the server stops work already started. It primarily stops the client from continuing to wait for or process the response.

Suppose each operation takes one second.

Sequential execution takes approximately two seconds:

const user = await fetchUser();
const products = await fetchProducts();

The second operation does not begin until the first finishes.

Parallel execution takes approximately one second:

const userPromise = fetchUser();
const productsPromise = fetchProducts();

const [user, products] = await Promise.all([
  userPromise,
  productsPromise
]);

Only independent operations should run in parallel. Dependent operations must wait for the required value:

const user = await fetchUser();
const orders = await fetchOrders(user.id);

When processing an array in parallel:

const users = await Promise.all(
  userIds.map(id => fetchUser(id))
);

Avoid forEach with async callbacks:

// Does not wait for completion
userIds.forEach(async id => {
  await fetchUser(id);
});

Unrestricted parallelism can overload a browser, network, or server when the input is large. A concurrency limit may be necessary:

async function processInBatches(items, batchSize) {
  const results = [];

  for (
    let index = 0;
    index < items.length;
    index += batchSize
  ) {
    const batch = items.slice(index, index + batchSize);

    const batchResults = await Promise.all(
      batch.map(item => processItem(item))
    );

    results.push(...batchResults);
  }

  return results;
}

Parallel execution improves total duration when operations are independent, but it does not make the individual operations themselves execute faster.

The DOM tree contains several node types:

• Document nodes
• Element nodes
• Text nodes
• Comment nodes
• Document fragments

For this HTML:

<main>
  <h1>Hello</h1>
</main>

A simplified tree is:

document
  └── html
      └── body
          └── main
              └── h1
                  └── "Hello"

The DOM is not part of the JavaScript language itself. It is a Web API supplied by browser environments.

JavaScript can use DOM APIs to:

• Find elements
• Change content and attributes
• Modify styles and classes
• Attach event listeners
• Create or remove elements
• Measure element positions and sizes

DOM updates may trigger browser rendering work, so large or repeated changes can affect performance.

Browsers may correct invalid markup while building the DOM:

<table>
  <tr>
    <td>Item</td>
  </tr>
</table>

The browser may insert a <tbody> element into the DOM even if it was not present in the source.

The source is generally static for a particular response. The DOM is live and can change because of:

• JavaScript
• Form input
• Browser extensions
• Client-side frameworks
• DOM APIs
• Browser parsing rules

“View Page Source” normally shows the original response. Browser developer tools normally show the current DOM.

The DOM is also different from the visual rendering of the page. CSS can hide, reorder, or visually transform elements without changing their DOM structure.

Common selection methods include:

document.querySelector(".card");
document.querySelectorAll(".card");
document.getElementById("profile");

querySelector returns the first match or null. querySelectorAll returns a static NodeList.

Content and properties can be updated directly:

const image = document.querySelector("img");

image.src = "/avatar.png";
image.alt = "User avatar";

Attributes can be managed explicitly:

element.setAttribute("aria-label", "Close");
element.getAttribute("aria-label");
element.removeAttribute("aria-label");

Classes can be managed with classList:

element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("selected");

Elements can be inserted with:

parent.append(element);
parent.prepend(element);
reference.before(element);
reference.after(element);

They can be replaced or removed:

oldElement.replaceWith(newElement);
element.remove();

For many insertions, a DocumentFragment can group work before insertion:

const fragment = document.createDocumentFragment();

for (const name of names) {
  const item = document.createElement("li");
  item.textContent = name;
  fragment.append(item);
}

list.append(fragment);