ES6+ (Modern JavaScript) Interview Questions

ECMAScript is the language specification; JavaScript is the most widely used implementation. ES6 (ES2015) was a major update, and new editions now appear every year.

Arrow functions are shorter, do not have their own this, arguments or super, cannot be used with new, and implicitly return a single expression when written without braces.

Both use …. Spread expands an iterable or object into individual elements ([...a, ...b], { ...obj }). Rest collects remaining elements into an array or object (function f(...args), const { id, ...rest } = obj).

var is function-scoped and can be redeclared, which causes bugs in loops and blocks. let and const are block-scoped, cannot be redeclared in the same scope and throw if used before declaration. Default to const and use let when you need to reassign.

Strings in backticks that support ${expression} interpolation and real line breaks. Tagged templates pass the pieces to a function, which libraries use for safe HTML, SQL or CSS.

A default value is used when the argument is undefined (missing or passed as undefined), not when it is null. Defaults are evaluated at call time and can refer to earlier parameters.

Syntax for unpacking values: const { name, age } = user takes properties; const [first, second] = list takes array items by position. You can rename, set defaults and collect the rest with ...rest.

1const { name, role = 'student', ...rest } = { name: 'Asha', city: 'Pune' };
2const [first, , third] = [10, 20, 30];
3let a = 1, b = 2;
4[a, b] = [b, a];

Shorthands inside object literals: property shorthand ({ name } instead of { name: name }), method shorthand (greet() {}), and computed keys ({ [key]: value }).

ES modules use import/export with static structure, which enables tree-shaking. A module can have many named exports (imported by exact name in braces) and at most one default export (imported with any name).

Map stores key-value pairs with keys of any type, keeps insertion order and has a size property. Set stores unique values. Use Map for frequent additions/removals or non-string keys, and Set for de-duplication and fast membership checks.

1const unique = [...new Set([1, 2, 2, 3])]; // [1, 2, 3]

A unique, immutable primitive often used as a non-colliding object key. Well-known symbols such as Symbol.iterator let you customise built-in language behaviour.

?. stops and returns undefined if the value on its left is null or undefined, instead of throwing. It works for properties (user?.address), indexes (list?.[0]) and calls (callback?.()).

|| falls back for any falsy value (0, "", false, NaN, null, undefined). ?? falls back only for null and undefined, so a real 0 or empty string is kept.

class, constructor, extends, super and static give clear syntax for constructor functions and prototypes. JavaScript is still prototype-based underneath, and class declarations are hoisted but stay in the temporal dead zone.

An object is iterable if it has a [Symbol.iterator]() method that returns an iterator with next() → { value, done }. for…of, spread, destructuring and Array.from all use this protocol.

An async function always returns a promise, and await pauses that function until a promise settles, so asynchronous code reads top to bottom and errors are handled with try/catch. It is still promises underneath — nothing becomes synchronous.

Object.freeze prevents adding, removing and changing properties, but only shallowly. For deep immutability, freeze recursively or create updated copies with spread instead of mutating.

import("./module.js") loads a module at runtime and returns a promise. It enables code splitting and lazy loading — for example loading a heavy chart library only when a user opens a dashboard.

flat/flatMap, at() for negative indexing, findLast/findLastIndex, and the non-mutating toSorted, toReversed, toSpliced and with(), which return copies — ideal for immutable state updates in React.

Producing values lazily — infinite sequences, paging through APIs, walking trees — because the function pauses at each yield. They can also receive values via next(value). Async generators with for await…of stream asynchronous data.

Syntax (arrow functions, classes, destructuring) can be transpiled. New built-ins (Promise, Map, Array.prototype.includes, Object.entries, structuredClone) must be polyfilled because they are runtime APIs.

toSorted, toReversed, toSpliced and with return new arrays, unlike sort, reverse and splice. Combined with at(-1), findLast and Object.groupBy, they make immutable updates easier in React and Redux code.

Static imports are hoisted, analysed at build time and enable tree shaking. import() returns a promise and loads a module on demand, creating a separate chunk — ideal for routes, heavy libraries or feature flags.

Built-in symbols such as Symbol.iterator, Symbol.asyncIterator, Symbol.toPrimitive and Symbol.hasInstance let your objects hook into language behaviour: iteration, conversion and instanceof.

With .then, errors flow to the next .catch in the chain. With await, a rejected promise throws at that line, caught by try/catch. Forgetting to await or return a promise inside either style creates a floating promise whose errors are lost.