JavaScript — Interview Questions

// Same task, 3 paradigms

// Procedural
function doubleProcedural(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) result.push(arr[i] * 2);
  return result;
}

// Object-oriented
class Doubler {
  double(arr) { return arr.map(n => n * 2); }
}

// Functional
const doubleFunctional = arr => arr.map(n => n * 2);

console.log('1');
setTimeout(() => console.log('2'), 0);
console.log('3');
// 1, 3, 2

"use strict";
x = 3.14; // ReferenceError: x is not defined

x = 3.14; // No error (non-strict) — creates a global

function myFunction() {
  "use strict";
  y = 3.14; // ReferenceError — strict only inside this function
}
myFunction();

console.log(typeof 10n);       // "bigint"
console.log(typeof Symbol());  // "symbol"
console.log(typeof null);      // "object" — historical bug
console.log(typeof []);        // "object"
console.log(typeof (() => {})); // "function"

let value = 42;
value = 'forty-two'; // no error

typeof "John Abraham"; // "string"
typeof (1 + 2);        // "number"
typeof undefined;      // "undefined"
typeof notDeclared;    // "undefined" — no ReferenceError
typeof null;           // "object" — bug kept for compatibility
typeof [];             // "object" — use Array.isArray()

let user;
console.log(user);          // undefined
console.log(typeof user);   // "undefined"
console.log({}.name);       // undefined
// console.log(notDeclared); // ReferenceError — undeclared is NOT the same as undefined

let user = null;
console.log(typeof user); // "object"

console.log(5 == '5');           // true
console.log(5 === '5');          // false
console.log(0 == false);         // true
console.log('' == 0);            // true
console.log(null == undefined);  // true
console.log(null == 0);          // false — null only loosely equals undefined
console.log(NaN == NaN);         // false
console.log([1, 2] == '1,2');    // true — array converted to string

console.log('5' + 1);   // "51"
console.log('5' - 1);   // 4
console.log(true + 1);  // 2
console.log([] + {});   // "[object Object]"
console.log(+'');       // 0
console.log(+'abc');    // NaN

console.log(!!'hello'); // true
console.log(!!0);       // false
console.log(!![]);      // true

console.log(typeof NaN);          // "number"
console.log(NaN === NaN);         // false
console.log(Number.isNaN(NaN));   // true — reliable check
console.log(isNaN('abc'));        // true — global isNaN converts to number first
console.log(Number.isNaN('abc')); // false

console.log(a);       // undefined
console.log(greet()); // "hi"
var a = 1;
function greet() { return 'hi'; }

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 5;

let x = 'outer';
{
  console.log(x); // ReferenceError: Cannot access 'x' before initialization
  let x = 'inner';
}

const user = { name: 'A' };
user.name = 'B'; // allowed
// user = {};    // TypeError: Assignment to constant variable.

let number = 42;
function printNumber() { console.log(number); }
function log() {
  let number = 54;
  printNumber();
}
log(); // 42 — printNumber was written in the global scope

let a = 20;
{
  let a = 10;   // legal — block-scoped
}

function x() {
  var a = 10;   // legal — var stays inside the function
}

var b = 20;
{
  let b = 10;   // legal
}

// let c = 20;
// {
//   var c = 10; // SyntaxError: Identifier 'c' has already been declared
// }

switch (x) {
  case 0:
    let name;
    break;
  case 1:
    // let name; // SyntaxError: Identifier 'name' has already been declared
    break;
}

switch (x) {
  case 0: {
    let name;  // its own block
    break;
  }
  case 1: {
    let name;  // no error
    break;
  }
}

const adventurer = { name: 'Alice' };
console.log(adventurer.dog?.name);     // undefined — no TypeError
console.log(adventurer.greet?.());     // undefined — method doesn't exist

console.log(0 || 10);  // 10
console.log(0 ?? 10);  // 0
console.log(adventurer.dog?.name ?? 'No dog'); // "No dog"

console.log(eval('1 + 2')); // 3

const user = { name: "John", age: 20 };
delete user.age;
console.log(user); // { name: "John" }

const arr = [1, 2, 3];
delete arr[1];
console.log(arr, arr.length); // [1, empty, 3] 3 — use splice instead

const fish = ['Lion', , 'Angel'];
console.log(fish.length); // 3
console.log(fish[1]);     // undefined
console.log(1 in fish);   // false — it's a hole, not a stored undefined

console.log([1, 2, ].length); // 2 — trailing comma ignored

a(); // "a called"
b(); // TypeError: b is not a function

function a() { console.log("a called"); }  // declaration — hoisted with body
var b = function () { console.log("b called"); }; // expression — b is undefined until this line

const greet = function () { return 'hi'; };          // assigned
setTimeout(function () { console.log('done'); }, 0); // passed as a callback
(function () { console.log('IIFE'); })();            // invoked immediately

const double = n => n * 2;
const makeUser = () => ({ id: 1 }); // wrap an object in ()

const obj = {
  name: 'A',
  regular() { return this.name; },
  arrow: () => this?.name
};
console.log(obj.regular()); // "A"
console.log(obj.arrow());   // undefined — takes `this` from the outer scope

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) total += arguments[i];
  return total;
}
console.log(sum(1, 2, 3)); // 6

function toArray() {
  return Array.from(arguments); // or Array.prototype.slice.call(arguments)
}

const sumRest = (...nums) => nums.reduce((a, b) => a + b, 0); // modern

function max(...nums) {        // rest
  return Math.max(...nums);    // spread
}
console.log(max(3, 9, 4));     // 9

const [first, ...others] = [1, 2, 3]; // rest in destructuring → others = [2, 3]
const merged = { ...{ a: 1 }, b: 2 };  // spread → { a: 1, b: 2 }

const handler = () => console.log('This is a click handler function');
document.addEventListener('click', handler); // function passed as a value

const firstOrder = () => console.log('I am a first order function!');

const higherOrder = fn => fn();       // takes a function
higherOrder(firstOrder);

const multiplier = x => y => x * y;   // returns a function
console.log(multiplier(2)(5));        // 10

function add(a, b) {
  return a + b;           // pure — same input, same output
}

let total = 0;
function addToTotal(n) {
  total += n;             // impure — changes outside state
  return total;
}

function addItem(cart, item) {
  return [...cart, item]; // pure — returns a new array instead of mutating cart
}

(function () {
  var message = "IIFE";
  console.log(message); // "IIFE"
})();

console.log(typeof message); // "undefined" — not accessible outside

const counter = (() => {
  let count = 0;
  return { increment: () => ++count };
})();
console.log(counter.increment()); // 1

const user = {
  name: 'Asha',
  greet() { return this.name; }
};

console.log(user.greet()); // "Asha"
const fn = user.greet;
console.log(fn());         // undefined — called without an object

const name = { firstName: "Rishabh", lastName: "Sisodiya" };
const name2 = { firstName: "Any", lastName: "Random" };

function printFullName(hometown, state) {
  console.log(`${this.firstName} ${this.lastName} from ${hometown}, ${state}`);
}

printFullName.call(name, "Chittorgarh", "Rajasthan");
// "Rishabh Sisodiya from Chittorgarh, Rajasthan"

printFullName.apply(name2, ["Udaipur", "Rajasthan"]);
// "Any Random from Udaipur, Rajasthan"

const printMyName = printFullName.bind(name2, "Udaipur");
printMyName("Rajasthan");
// "Any Random from Udaipur, Rajasthan"

function greeting(name) {
  console.log('Hello ' + name);
}

function processUserInput(callback) {
  const name = 'Rishabh';
  callback(name);
}

processUserInput(greeting); // "Hello Rishabh"

setTimeout(() => console.log('Runs later'), 1000); // async callback

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2 — count is remembered

function x() {
  var a = 7;
  function y() {
    console.log(a); // a is not in y — found in x's environment
  }
  return y;
}

const z = x(); // x has finished...
z();           // 7 — ...but y still reaches a through its closure

function counter() {
  let count = 0;
  return () => ++count;
}
const next = counter();
next();
console.log(next()); // 2

function makeGreeting(greeting) {
  return name => `${greeting}, ${name}`; // closure created here, remembering greeting
}

const hi = makeGreeting('Hi');
const hello = makeGreeting('Hello');
console.log(hi('Asha'), hello('Asha')); // "Hi, Asha" "Hello, Asha"

function outer() {
  const secret = 'hidden'; // scope: visible only inside outer
  return () => secret;     // closure: this function keeps secret alive
}
console.log(outer()()); // "hidden" — outer has returned, secret still accessible

const bank = (function () {
  let balance = 0;                        // private

  function log(message) {                 // private helper
    console.log(message);
  }

  return {                                // public API
    deposit(amount) {
      balance += amount;
      log(`Deposited ${amount}`);
    },
    getBalance() {
      return balance;
    }
  };
})();

bank.deposit(500);              // "Deposited 500"
console.log(bank.getBalance()); // 500
console.log(bank.balance);      // undefined — no direct access

for (var i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 4, 4, 4

// 1. let — a new i for every iteration
for (let i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), 100);
}

// 2. A function scope per iteration (IIFE)
for (var i = 1; i <= 3; i++) {
  (function (j) {
    setTimeout(() => console.log(j), 100);
  })(i);
}

// 3. Pass the value as a setTimeout argument
for (var i = 1; i <= 3; i++) {
  setTimeout(n => console.log(n), 100, i);
}
// All print 1, 2, 3

function attach() {
  const bigData = new Array(1_000_000).fill('*');

  function handler() {
    console.log(bigData.length); // closure keeps bigData alive
  }

  button.addEventListener('click', handler);
  return () => button.removeEventListener('click', handler); // cleanup function
}

const cleanup = attach();
// later, when the button is no longer needed:
cleanup(); // handler and bigData can now be garbage collected

function createCounter() {
  let count = 0;
  const current = count; // a copy taken once

  return {
    increment() { count++; },
    logCopy() { console.log(current); }, // stale — always 0
    logLive() { console.log(count); }    // reads the variable → up to date
  };
}

const c = createCounter();
c.increment();
c.logCopy(); // 0
c.logLive(); // 1

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);      // stale: `count` is always 0 from the first render
      // setCount(c => c + 1);  // fix: functional update always uses the latest value
    }, 1000);
    return () => clearInterval(id);
  }, []); // empty deps → the effect's closure never sees new renders
}

// 1. Function factory
const multiplyBy = factor => n => n * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10

// 2. once — run a function only one time
function once(fn) {
  let done = false, result;
  return (...args) => {
    if (!done) { done = true; result = fn(...args); }
    return result;
  };
}
const init = once(() => console.log('init'));
init(); init(); // "init" logged once

// 3. Debounce — shares one timer across calls
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// 4. Event handler remembering state
function trackClicks(button) {
  let clicks = 0;
  button.addEventListener('click', () => {
    clicks++;
    console.log(`Clicked ${clicks} times`);
  });
}

// 5. Partial application / currying
const log = level => message => console.log(`[${level}] ${message}`);
const warn = log('WARN');
warn('Low disk space'); // [WARN] Low disk space

const memoizedAddition = () => {
  const cache = {};
  return (value) => {
    if (value in cache) {
      console.log('Fetching from cache');
      return cache[value]; // cache.value would not work — the key is dynamic
    }
    console.log('Calculating result');
    const result = value + 20;
    cache[value] = result;
    return result;
  };
};

const addition = memoizedAddition();
console.log(addition(20)); // "Calculating result", 40
console.log(addition(20)); // "Fetching from cache", 40

// With closures
const multiply = x => y => x * y;
const double = multiply(2);
console.log(double(5)); // 10

// With bind (technically partial application)
function mul(x, y) { return x * y; }
const triple = mul.bind(null, 3);
console.log(triple(5)); // 15

// Infinite currying: sum(1)(2)(3)()
const sum = a => b => (b !== undefined ? sum(a + b) : a);
console.log(sum(1)(2)(3)()); // 6

// 1. Object literal (most common)
const o1 = { name: 'Sudheer' };

// 2. Object constructor (works, but the literal is preferred)
const o2 = new Object();
o2.name = 'Sudheer';

// 3. Object.create — choose the prototype
const proto = { greet() { return 'hi'; } };
const o3 = Object.create(proto);   // o3 inherits greet
const dict = Object.create(null);  // no prototype at all (no toString, etc.)

// 4. Constructor function + new
function Person(name) {
  this.name = name;
}
Person.prototype.greet = function () { return `Hi, ${this.name}`; };
const o4 = new Person('Sudheer');

// 5. ES6 class (syntax over constructor functions)
class User {
  constructor(name) { this.name = name; }
}
const o5 = new User('Sudheer');

// 6. Factory function — a normal function that returns an object (no `new`)
function createPerson(name) {
  return { name, age: 21 };
}
const o6 = createPerson('Sudheer');

// 7. Singleton — only one instance ever exists
const Config = (() => {
  let instance;
  return {
    getInstance() {
      if (!instance) instance = { env: 'prod' };
      return instance;
    }
  };
})();
console.log(Config.getInstance() === Config.getInstance()); // true

function myNew(Constructor, ...args) {
  const obj = Object.create(Constructor.prototype);
  const result = Constructor.apply(obj, args);
  return result !== null && typeof result === 'object' ? result : obj;
}

function Person(name) { this.name = name; }
const p = myNew(Person, 'Asha');
console.log(p.name, p instanceof Person); // "Asha" true

const arr = [];
console.log(Object.getPrototypeOf(arr) === Array.prototype);             // true
console.log(Object.getPrototypeOf(Array.prototype) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype));                    // null — end of chain

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.jumps = true;
console.log(rabbit.eats);                    // true — inherited
console.log(Object.hasOwn(rabbit, 'eats'));  // false

// Constructor function
function Bike(model, color) {
  this.model = model;
  this.color = color;
}
Bike.prototype.getDetails = function () {
  return `${this.model} bike has ${this.color} color`;
};

// Equivalent class
class BikeClass {
  constructor(model, color) {
    this.model = model;
    this.color = color;
  }
  getDetails() {
    return `${this.model} bike has ${this.color} color`;
  }
}

console.log(new BikeClass('Pulsar', 'black').getDetails()); // "Pulsar bike has black color"
console.log(typeof BikeClass); // "function"

class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // must be called before `this`
  }
  speak() {
    return `${super.speak()} — woof`;
  }
}

console.log(new Dog('Rex').speak()); // "Rex makes a sound — woof"

// 1. Private class fields
class Account {
  #balance = 0;
  deposit(n) { this.#balance += n; }
  get balance() { return this.#balance; }
}
const a = new Account();
a.deposit(50);
console.log(a.balance);   // 50
// a.#balance;            // SyntaxError

// 2. Closures
function createAccount() {
  let balance = 0;
  return { deposit: n => (balance += n) };
}

// 1. Object.defineProperty — writable: false (the default when using defineProperty)
const person = {};
Object.defineProperty(person, 'name', {
  value: 'John',
  writable: false,     // can't change the value
  configurable: false  // can't delete or redefine it
});
person.name = 'Jane';       // ignored (TypeError in strict mode)
console.log(person.name);   // "John"

// 2. Object.freeze — whole object read-only (shallow)
const person2 = Object.freeze({ name: 'John', age: 30 });
person2.name = 'Jane';      // ignored
person2.newProperty = 'x';  // ignored
console.log(person2);       // { name: 'John', age: 30 }

// 3. Getter without a setter
const person3 = {
  _name: 'John',
  get name() { return this._name; }
};
person3.name = 'Jane';      // ignored
console.log(person3.name);  // "John"

const frozen = Object.freeze({ inner: { x: 1 } });
frozen.inner.x = 2;
console.log(frozen.inner.x); // 2 — nested object is not frozen

const original = {
  name: "Alice",
  details: { age: 25, city: "New York" }
};

// Shallow copies
const shallowCopy = { ...original };  // or Object.assign({}, original)
shallowCopy.name = "Bob";
shallowCopy.details.age = 30;

console.log(original.name);        // "Alice" — top level was copied
console.log(original.details.age); // 30 — nested object is shared!

// Deep copy
const deepCopy = structuredClone(original);
deepCopy.details.city = "Pune";
console.log(original.details.city); // "New York" — unaffected

const user = { name: 'John', nickName: undefined };

// 1. in operator — own AND inherited properties
console.log('name' in user);        // true
console.log('toString' in user);    // true — inherited
console.log(!('age' in user));      // true — use parentheses for "not in"

// 2. Object.hasOwn (modern) / hasOwnProperty — own properties only
console.log(Object.hasOwn(user, 'name'));     // true
console.log(Object.hasOwn(user, 'toString')); // false
console.log(user.hasOwnProperty('name'));     // true

// 3. Compare with undefined — fails when the value IS undefined
console.log(user.nickName !== undefined); // false — but the key exists!

const object = { k1: "value1", k2: "value2", k3: "value3" };

for (const key in object) {
  if (Object.hasOwn(object, key)) {         // skip inherited properties
    console.log(key + " -> " + object[key]); // k1 -> value1 ...
  }
}

Object.keys(object).forEach(key => console.log(key));  // own keys
Object.values(object).forEach(v => console.log(v));    // own values
for (const [key, value] of Object.entries(object)) {   // key-value pairs
  console.log(key, value);
}

const obj = {};

// Modern
console.log(Object.keys(obj).length === 0 && obj.constructor === Object); // true

// Also counts symbol and non-enumerable keys
console.log(Reflect.ownKeys(obj).length === 0); // true

// Pre-ES5
function isEmpty(o) {
  for (const prop in o) {
    if (Object.prototype.hasOwnProperty.call(o, prop)) return false;
  }
  return true;
}

const map = new Map();
const keyObj = { id: 1 };
map.set(keyObj, 'user');
map.set(1, 'number');
map.set('1', 'string');
console.log(map.get(keyObj), map.get(1), map.get('1'), map.size); // "user" "number" "string" 3

const obj = {};
obj[keyObj] = 'user';
console.log(Object.keys(obj)); // ["[object Object]"] — object key became a string

const cache = new WeakMap();
let user = { id: 1 };
cache.set(user, { lastSeen: Date.now() });
user = null; // the entry can now be garbage collected

const id1 = Symbol('id');
const id2 = Symbol('id');
console.log(id1 === id2); // false

const user = { [id1]: 123, name: 'A' };
console.log(Object.keys(user));    // ["name"] — symbol keys are hidden
console.log(JSON.stringify(user)); // '{"name":"A"}'
console.log(Symbol.for('app') === Symbol.for('app')); // true — global registry

const user = {
  first: 'Rishabh',
  last: 'Sisodiya',
  get fullName() { return `${this.first} ${this.last}`; },
  set fullName(value) { [this.first, this.last] = value.split(' '); }
};

console.log(user.fullName); // "Rishabh Sisodiya"
user.fullName = 'John Doe';
console.log(user.first);    // "John"

function* range(start, end) {
  for (let i = start; i <= end; i++) yield i;
}

const it = range(1, 3);
console.log(it.next()); // { value: 1, done: false }
console.log([...range(1, 3)]); // [1, 2, 3]

const user = { age: 25 };

const validated = new Proxy(user, {
  set(target, prop, value) {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('age must be a number');
    }
    return Reflect.set(target, prop, value); // default behavior
  },
  get(target, prop) {
    return prop in target ? Reflect.get(target, prop) : `No property "${prop}"`;
  }
});

validated.age = 30;
console.log(validated.age);  // 30
console.log(validated.name); // 'No property "name"'
// validated.age = 'thirty'; // TypeError: age must be a number

// Object → JSON string
const user = { name: 'John', age: 31 };
const userString = JSON.stringify(user);
console.log(userString); // '{"name":"John","age":31}'

// JSON string → object
const parsed = JSON.parse('{"name":"John","age":31}');
console.log(parsed.name); // "John"

// Things JSON drops or changes
console.log(JSON.stringify({ a: undefined, b: () => 1, c: new Date(0), d: NaN }));
// '{"c":"1970-01-01T00:00:00.000Z","d":null}'

console.log(JSON.stringify(user, null, 2)); // pretty-printed with 2-space indentation

const d1 = new Date();
const d2 = new Date(d1);

console.log(d1 === d2);                     // false — different objects
console.log(d1.getTime() === d2.getTime()); // true
console.log(d1 < new Date(Date.now() + 1000)); // true — < and > convert to numbers

const today = new Date();
const dd = String(today.getDate()).padStart(2, '0');
const mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
const yyyy = today.getFullYear();

console.log(`${mm}/${dd}/${yyyy}`);            // e.g. "09/14/2026"
console.log(today.toLocaleDateString('en-IN')); // e.g. "14/9/2026"
console.log(today.toISOString());               // e.g. "2026-09-14T10:30:00.000Z"

const nums = [1, 2, 3, 4, 5];
console.log(nums.slice(0, 2)); // [1, 2]
console.log(nums.slice(-1));   // [5]
console.log(nums);             // [1, 2, 3, 4, 5] — unchanged

const a = [1, 2, 3, 4, 5];
console.log(a.splice(3, 1, "a", "b", "c")); // [4] — removed
console.log(a);                             // [1, 2, 3, "a", "b", "c", 5]

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled);   // [2, 4, 6]

const result = numbers.forEach(num => console.log(num * 2)); // logs 2, 4, 6
console.log(result);    // undefined

const arr = [1, 2];
console.log(arr.push(3));                 // 3 — the new length, not the array
console.log([1, 2, 3].splice(1, 1, 'a')); // [2] — removed items
console.log([10, 1, 2].sort());           // [1, 10, 2] — default sort compares strings!
console.log([10, 1, 2].sort((a, b) => a - b)); // [1, 2, 10]
console.log([1, [2, [3]]].flat(2));       // [1, 2, 3]
console.log([1, 2, 3].at(-1));            // 3

// 1. Set length to 0 — clears the array in place (all references see it)
let a1 = [1, 2, 3, 4];
a1.length = 0;

// 2. Reassign — creates a new array; other references keep the old values
let a2 = [1, 2, 3, 4];
const ref = a2;
a2 = [];
console.log(ref); // [1, 2, 3, 4]

// 3. splice — in place
let a3 = [1, 2, 3, 4];
a3.splice(0, a3.length);

// 4. pop()/shift() in a loop — works but slow (shift re-indexes every time)
let a4 = [1, 2, 3, 4];
while (a4.length) a4.pop();

console.log('start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('end');
// start, end, promise, timeout

function loop() {
  Promise.resolve().then(loop); // each microtask adds another
}
// loop(); // setTimeout callbacks would never run