Q: What is callback hell?
A: Callback hell happens when you nest many callbacks inside each other, making the code hard to read and maintain. It was a common issue when handling async tasks before Promise and async/await existed.

getUser(id, (user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      console.log(comments);
    });
  });
});

Q: What is a Promise and how does it help?
A: A Promise is a way to manage asynchronous tasks. It represents a future value and allows handling results using .then() and .catch(), helping avoid callback hell.

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Q: What’s the difference between null and undefined in practice?
A: undefined usually means a variable hasn't been assigned a value, while null is intentionally set to indicate "no value." Use null when you want to reset or clear a value, undefined signals missing data.

Q: How does async/await work?
A: async turns a function into one that always returns a Promise. await pauses the function until the Promise resolves. It makes async code look more like synchronous code.

async function load() {
  const res = await fetch("/data");
  const data = await res.json();
  console.log(data);
}

Q: What is a closure?
A: A closure is when a function "remembers" variables from its outer scope, even after the outer function has finished. Closures are useful for creating private variables or preserving state.

function counter() {
  let count = 0;
  return () => ++count;
}

const next = counter();
next(); // 1
next(); // 2

Q: What is the event loop in JavaScript?
A: The event loop is a mechanism that handles asynchronous tasks in JavaScript by managing the call stack and task queue. It ensures synchronous code runs first, then handles async callbacks.

Q: What is this in JavaScript?
A: this refers to the context of a function call. In object methods, this refers to the object. In regular functions, it’s undefined in strict mode or window in non-strict mode. Arrow functions do not have their own this.

Q: What’s the difference between debounce and throttle?
A: Debounce delays a function until after user stops triggering it for a set time. Throttle limits how often a function runs in a given period. Both are useful for optimizing performance during events like scroll or input.

Q: What is the DOM?
A: The DOM (Document Object Model) represents HTML as a tree structure. JavaScript uses the DOM to access and change page content, attributes, and styles.

Q: How is map() different from forEach()?
A: map() returns a new array with transformed values, while forEach() simply iterates through the array without returning anything. Use map() when you need to transform data.

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2, 4, 6]

Q: What's the difference between spread and rest operators?
A: Both use ..., but spread is for unpacking elements, and rest is for gathering elements into an array.

// spread
const arr = [1, 2, 3];
const copy = [...arr];

// rest
function sum(...args) {
  return args.reduce((a, b) => a + b);
}

Q: Why avoid using == for comparison?
A: Because == does type coercion and may produce unexpected results. For example: '' == 0 is true. Use === for safer and more predictable comparisons.

Q: Can arrow functions be used as constructors?
A: No. Arrow functions do not have their own this, arguments, or prototype, so they cannot be used to create instances like regular constructor functions.

Q: What is optional chaining (?.) used for?
A: It allows safely accessing deeply nested properties without throwing an error if an intermediate value is null or undefined.

const user = {};
console.log(user.profile?.email); // undefined, no error

Q: What are JSON.stringify() and JSON.parse() used for?
A: stringify() converts an object into a JSON string, useful for storing or sending data. parse() converts a JSON string back to an object. They're often used with APIs and localStorage.

Q: Why is typeof NaN equal to "number"?
A: It's a known quirk in JavaScript. NaN is still considered a number type, even though it’s not a valid number.

Q: What’s the difference between == undefined and === undefined?
A: == undefined returns true for both null and undefined due to type coercion. === undefined is strict and only returns true for actual undefined.

Q: What’s the difference between DOMContentLoaded and window.onload?
A: DOMContentLoaded fires when the DOM is ready, before images and other resources are loaded. window.onload waits for everything (images, scripts) to load. Use DOMContentLoaded for faster initialization.

Q: How do you deep clone an object in JS?
A: Use structuredClone(obj) or JSON.parse(JSON.stringify(obj)) (with some limitations). Libraries like lodash.cloneDeep are also helpful.

Q: What does [] == false return, and why?
A: It returns true due to JavaScript's coercion rules: [] becomes "", then 0, and false is also 0, so [] == false → true. Avoid == to prevent such logic errors.

Q: When should you use try...catch?
A: Use it when something might fail, like API calls, JSON parsing, or reading uncertain data. try...catch prevents your app from crashing and lets you handle errors safely.

try {
  const data = JSON.parse('{"key": 123}');
  console.log(data.key);
} catch (err) {
  console.error("JSON error:", err);
}

Q: What is an IIFE (Immediately Invoked Function Expression)?
A: It’s a function that runs immediately after it's defined. It's useful for creating private scope and avoiding global pollution.

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

Q: What's the difference between synchronous and asynchronous?
A: Synchronous code runs step by step, blocking the next task. Asynchronous code can pause and resume without blocking the main thread, which helps keep the UI responsive.

Q: What’s the difference between localStorage, sessionStorage, and cookie?
A:

• localStorage: persists data even after browser is closed.
• sessionStorage: cleared when tab/browser is closed.
• cookie: sent with every HTTP request, smaller size, more suitable for auth/data with expiration and security needs.

Q: How to check if a variable is an array?
A: Use Array.isArray(value) — it's the most reliable. Avoid typeof since typeof [] is "object".

Q: How to avoid mutating objects in JavaScript?
A: Clone objects before modifying. Use the spread operator, Object.assign(), or libraries like lodash.

const newUser = { ...user, name: "Vu Nguyen" };

Q: Why does setTimeout in a for loop often behave unexpectedly?
A: It’s due to closures keeping the last loop value. Use let or create a closure for each iteration to fix it.

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Logs: 0 1 2

Q: How to know if code is running asynchronously?
A: Check if it uses Promise, async/await, setTimeout, or async APIs like fetch. Async functions don’t return immediate results — they need .then() or await.

Q: What does Object.freeze() do?
A: It makes an object immutable — you can’t add, delete, or change its properties. It's useful for protecting data from accidental modification.

const config = Object.freeze({ mode: "prod" });
config.mode = "dev"; // Won’t change