JavaScript ES6+ and Browser Interview Questions and Answers

15 questions on modern syntax, modules, classes, Map and Set, DOM events, storage, CORS, and security basics.

1. 1. How are arrow functions different from regular functions?

   Arrow functions have shorter syntax and no own this, arguments, or super, so they use the surrounding values. They cannot be used as constructors with new and have no prototype. That makes them ideal for callbacks, but a poor choice for object methods that rely on this.

2. 2. What is destructuring?

   It unpacks values from arrays or properties from objects into variables, with defaults, renaming, and nesting.

   const [first, , third = 0] = [1, 2];
   const { name, age: years = 18, ...rest } = { name: 'Ada', extra: true };
   function show({ id, title }) { return id + ': ' + title; }

3. 3. What is the difference between the spread and rest operators?

   Both use three dots. Rest collects remaining items into an array or object (function parameters or destructuring). Spread expands an iterable or object into individual elements, for example to copy or merge arrays and objects, or pass an array as arguments.

4. 4. What are template literals?

   Strings written with backticks that can span multiple lines and embed expressions with a dollar sign and braces. Tagged templates let a function process the pieces, which libraries use for styled components and safe SQL.

5. 5. What is the difference between CommonJS and ES modules?

   CommonJS (require and module.exports) loads modules synchronously and is the traditional Node.js format. ES modules (import and export) are the language standard, are statically analyzable so bundlers can remove unused code, load asynchronously, and support top-level await. Modern Node.js supports both, chosen by file extension or the package type setting.

6. 6. How do classes work in JavaScript?

   The class keyword is syntax over prototypes. A class has a constructor, methods placed on the prototype, static members, getters and setters, and private fields written with a hash prefix. extends sets up inheritance and super calls the parent. Class declarations are not usable before their definition, unlike function declarations.

   class Account {
     #balance = 0;
     deposit(amount) { this.#balance += amount; }
     get balance() { return this.#balance; }
   }

7. 7. What are Map, Set, WeakMap, and WeakSet?

   Map stores key-value pairs with keys of any type and keeps insertion order. Set stores unique values. WeakMap and WeakSet hold their keys (objects only) weakly, so they do not prevent garbage collection, and they cannot be iterated. Use WeakMap to attach private data to objects without causing memory leaks.

8. 8. What do optional chaining and nullish coalescing do?

   Optional chaining (a?.b?.c) stops and returns undefined if a value in the chain is null or undefined instead of throwing. Nullish coalescing (x ?? y) returns y only when x is null or undefined, unlike || which also replaces 0, empty strings, and false.

9. 9. What are the most useful array methods, and which ones mutate the array?

   map, filter, reduce, find, some, every, includes, flat, and slice return new values without mutating. push, pop, shift, unshift, splice, sort, and reverse mutate the array in place. Newer methods toSorted, toReversed, and toSpliced return copies, which suits immutable code.

10. 10. What are event bubbling, capturing, and delegation?

    When an event happens, it travels down from the window to the target (capturing) and then back up (bubbling). Listeners run in the bubbling phase by default. Event delegation attaches one listener to a parent and uses event.target to handle many children, which also works for elements added later and saves memory.

    list.addEventListener('click', function (event) {
      const item = event.target.closest('li');
      if (item) console.log(item.textContent);
    });

11. 11. What is the difference between localStorage, sessionStorage, and cookies?

    localStorage persists until cleared and is shared by tabs of the same origin. sessionStorage lasts for one tab session. Both hold strings, are readable by scripts, and are limited to a few megabytes. Cookies are sent with every matching HTTP request, can be HttpOnly (hidden from scripts), Secure, and SameSite, and are small, so they suit session identifiers. Never store secrets in localStorage.

12. 12. What is CORS?

    Cross-Origin Resource Sharing is a browser mechanism that lets a server allow requests from other origins using headers such as Access-Control-Allow-Origin. Browsers block scripts from reading cross-origin responses unless the server permits it. For some requests the browser first sends a preflight OPTIONS request. CORS is enforced by browsers, not servers, and is not an authentication mechanism.

13. 13. What is XSS and how do you prevent it in front-end code?

    Cross-site scripting is when an attacker gets their script to run in your page. Prevent it by treating all user data as text: use textContent instead of innerHTML, rely on framework escaping, sanitize any HTML you must render with a maintained library, and add a Content Security Policy as an extra layer. Keep session cookies HttpOnly.

14. 14. What is the difference between innerHTML, innerText, and textContent?

    innerHTML reads or writes HTML markup and is a common XSS risk when fed untrusted input. textContent reads or writes plain text, including hidden elements, and is fast and safe. innerText is similar but depends on rendered styles, so it ignores hidden text and triggers layout.

15. 15. What are Symbols, iterators, and the for...of loop?

    A Symbol is a unique, immutable primitive often used for hidden or special property keys. An iterable is an object with a Symbol.iterator method that returns an iterator with a next() method. for...of works on any iterable (arrays, strings, Maps, Sets, generators), while for...in loops over enumerable property names.