This lesson covers ES6 interview questions with clear answers, coding examples, real-world use cases, best practices, and common mistakes.
These ES6 interview questions help JavaScript developers prepare for junior, senior, and architect-level interviews. The questions cover variables, block scope, arrow functions, template literals, destructuring, spread, rest, classes, modules, promises, iterators, generators, collections, and real-world JavaScript architecture.
let,
const, arrow functions, classes, modules,
promises, destructuring, template literals, and default
parameters.
var, let, and const?var is function-scoped. let and
const are block-scoped. let can be
reassigned, but const cannot be reassigned.
let count = 1;
count = 2;
const appName = "Dashboard";if (true) {
const message = "Inside block";
console.log(message);
}this.
const add =
(a, b) => a + b;
console.log(add(2, 3));const name = "Alice";
const message =
`Hello ${name}`;
console.log(message);undefined.
function greet(name = "Guest") {
return "Hello " + name;
}
console.log(greet());const user =
{
name: "John",
role: "Admin"
};
const { name, role } =
user;const colors =
["Red", "Green", "Blue"];
const [first, second] =
colors;const first =
[1, 2];
const second =
[...first, 3, 4];function sum(...numbers) {
return numbers.reduce(
(total, number) => total + number,
0
);
}class User {
constructor(name) {
this.name = name;
}
greet() {
return "Hello " + this.name;
}
}constructor()?export function add(a, b) {
return a + b;
}
import { add } from "./math.js";fetch("/api/users")
.then((response) => response.json())
.then((users) => {
console.log(users);
});const be preferred by default?const prevents reassignment and communicates intent.
It makes code safer and easier to reason about. Use
let only when reassignment is required.
this in arrow functions?this from their surrounding
scope. They do not create their own this.
const user =
{
name: "Alice",
greet() {
setTimeout(() => {
console.log(this.name);
}, 1000);
}
};this.
let or
const variable. Accessing the variable there causes
a ReferenceError.
const user =
{
name: "John",
address: { city: "Dallas" }
};
const copy =
{ ...user };const numbers =
[1, 2, 3];
const copy =
[...numbers];
function sum(...values) {
return values.length;
}map(), filter(), and reduce()?map() transforms every item,
filter() keeps matching items, and
reduce() combines values into one result.
find() instead of filter()?find() when you need only the first matching
item. Use filter() when you need all matching
items.
Promise.all()?Promise.all() runs multiple Promises in parallel
and resolves when all succeed. It rejects when one Promise
rejects.
const [users, products] =
await Promise.all(
[
fetch("/api/users").then((res) => res.json()),
fetch("/api/products").then((res) => res.json())
]
);Promise.all() and Promise.allSettled()?Promise.all() fails fast when one Promise rejects.
Promise.allSettled() waits for all Promises and
returns success or failure status for each.
yield.
function* numbers() {
yield 1;
yield 2;
}
const generator =
numbers();
console.log(generator.next());yield*?yield* delegates iteration to another iterable or
generator.
Map and plain objects?Map supports any key type, preserves insertion
order, has a reliable size, and provides clear
methods like set(), get(), and
has().
Set and Array?Set stores unique values. Arrays can contain
duplicates and are better for ordered lists and indexed access.
const module =
await import("./chart.js");
module.renderChart();try...catch with async/await or
.catch() with Promise chains.
async function loadData() {
try {
const response =
await fetch("/api/data");
return await response.json();
} catch (error) {
console.error(error.message);
return null;
}
}map(), filter(), and
immutable update patterns instead of modifying existing objects
or arrays directly.
Promise.all()
for independent work, and add observability.
map(),
filter(), and reducer-style updates. For deeply
nested data, normalize state or use controlled helper libraries.
Map for dynamic key-value collections,
Set for uniqueness, WeakMap for
private object metadata, and WeakSet for tracking
object membership without preventing garbage collection.
const/let, module
exports, async error handling, immutability, naming,
destructuring depth, linting, formatting, test coverage, and
browser support.
class ApiClient {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
async get(path) {
const response =
await fetch(this.baseUrl + path);
if (!response.ok) {
throw new Error("Request failed");
}
return response.json();
}
}const values =
[1, 2, 2, 3, 3, 4];
const uniqueValues =
[...new Set(values)];
console.log(uniqueValues);const users =
[
{ name: "Alice", role: "admin" },
{ name: "Bob", role: "user" },
{ name: "Sarah", role: "admin" }
];
const grouped =
users.reduce((result, user) => {
if (!result[user.role]) {
result[user.role] = [];
}
result[user.role].push(user);
return result;
}, {});const updatedUsers =
users.map((user) => {
if (user.name === "Bob") {
return {
...user,
role: "editor"
};
}
return user;
});function createUser(
{
name = "Guest",
role = "User"
} = {}
) {
return {
name,
role
};
}async function loadChart() {
const chart =
await import("./chart.js");
chart.render();
}Interview Tip
For senior and architect ES6 interviews, do not only explain syntax. Discuss trade-offs such as readability, browser support, bundle size, immutability, module boundaries, async error handling, performance, testing, and long-term maintainability.