JavaScript interview questions and answers

const p1 = new Promise((resolve) => resolve(42));
// p1 is fulfilled with value 42

const p2 = new Promise((_, reject) => reject(new Error("oops")));
// p2 is rejected with an Error

const p3 = new Promise(() => {}); // never resolves
// p3 stays pending forever

const oldElement = document.getElementById("old");
oldElement.remove(); // Element is removed from the DOM

// Without higher-order functions (repetitive)
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

const squared = [];
for (let i = 0; i < numbers.length; i++) {
  squared.push(numbers[i] * numbers[i]);
}

// With higher-order functions (reusable)
const map = (arr, fn) => arr.map(fn);
const doubled = map(numbers, x => x * 2);
const squared = map(numbers, x => x * x);

console.log(null == undefined);
console.log(null === undefined);

class Example {
  methodName() {
    console.log("Hello");
  }
}

// Frontend running on https://example.com
fetch("https://api.other.com/data")
  .then(response => response.json())
  .catch(error => console.log("CORS Error"));
  // Browser blocks this because it's a different domain!

function calculateTotal(items) {
  console.log("Items:", items); // Debug: check input
  
  let total = 0;
  for (let item of items) {
    console.log("Adding:", item.price); // Debug: check each iteration
    total += item.price;
  }
  
  console.log("Total:", total); // Debug: check result
  return total;
}

Promise.resolve(10)
  .then(val => val * 2)
  .then(val => console.log(val));

const firstButton = document.querySelector("button"); // First button on the page
const firstActive = document.querySelector(".active"); // First element with class "active"

async function greet() {
  return "Hello";
}

greet().then(console.log); // "Hello"

document.getElementById("list").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("List item clicked: " + event.target.textContent);
  }
});

function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(5));

var y = 1;

function test() {
  y = 2;
  var y;
}

test();
console.log(y);

console.log("1");

setTimeout(() => console.log("2"), 0);

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

console.log("4");

class Person {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name.toUpperCase();
  }

  set name(value) {
    this._name = value.toLowerCase();
  }
}

const user = new Person("Alice");
user.name = "BOB";
console.log(user.name);

fetch("https://api.example.com/data", {
  method: "PUT", // Not a simple method
  headers: {
    "Content-Type": "application/json",
    "X-Custom-Header": "value" // Custom header
  },
  body: JSON.stringify({ data: "..." })
});

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

// Spy on the method
const spy = jest.spyOn(user, "greet");

// Call the method
const result = user.greet("Alice");

// Verify the spy tracked the call
expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith("Alice");
expect(spy).toHaveBeenCalledTimes(1);
expect(result).toBe("Hello, Alice!"); // Original functionality works

async function fetchData() {
  const result = await Promise.resolve("Data ready");
  console.log(result); // "Data ready"
}

fetchData();
console.log("This runs before the await resolves");

<img src="image.jpg" loading="lazy" alt="Description">

Promise.resolve().then(() => {
  console.log('Promise resolved');
  setTimeout(() => {
    console.log('Timeout inside Promise');
  }, 0);
});

function addItem(text) {
  const li = document.createElement("li");
  li.textContent = text;
  
  // Must add listener to each new item
  li.addEventListener("click", () => {
    console.log("Clicked: " + text);
  });
  
  document.getElementById("list").appendChild(li);
}

// Each call adds another listener — memory leak risk
addItem("Item 1");
addItem("Item 2");
addItem("Item 3");

let count = 0;

function increment() {
  count++;
}

increment();
increment();
console.log(count);

console.log(+"10" + 5);

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

const name = "World";
const num = 42;
tag`Hello ${name}, you have ${num} messages`;

const id = Symbol('id');
const user = {
  name: 'Bob',
  [id]: 123
};

console.log(Object.keys(user).length);
console.log(user[id]);

function merge(target, source) {
  for (let key in source) {
    target[key] = source[key]; // Vulnerable!
  }
  return target;
}

// Usage
const user = {};
const userInput = JSON.parse(req.body);
merge(user, userInput);

async function loadUser() {
  const user = await fetch("/api/user"); // Stack trace shows fetch here
  console.log(user); // Error occurs here, but trace doesn't show the connection
}

setTimeout(() => console.log('setTimeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
// Output: Promise, setTimeout

function animate() {
  element.style.left = element.offsetLeft + 1 + "px";
  setTimeout(animate, 1000/60); // Tries to hit 60fps manually
}