15 ES6 Interview Questions and Answers

ES6, or ECMAScript 2015, introduced significant improvements and new features to JavaScript, making it more powerful and easier to work with. These enhancements include new syntax for writing cleaner and more maintainable code, as well as advanced functionalities that streamline complex operations. ES6 has become a fundamental skill for developers, as it is widely adopted in modern web development projects and frameworks.

This article provides a curated selection of ES6 interview questions designed to help you demonstrate your proficiency and understanding of the language’s capabilities. By familiarizing yourself with these questions and their answers, you will be better prepared to showcase your expertise and problem-solving skills in any technical interview setting.

ES6 Interview Questions and Answers

1. How do let and const differ from var in terms of scope and hoisting?

In ES6, let and const provide block-scoped variables, unlike var, which is function-scoped. This means let and const variables are only accessible within the block they are defined in, such as within a loop or an if statement. In contrast, var variables are accessible throughout the entire function.

Regarding hoisting, var variables are hoisted to the top of their function scope and initialized with undefined, allowing them to be used before their declaration. Let and const are also hoisted but remain in a “temporal dead zone” until their declaration, resulting in a ReferenceError if accessed beforehand.

Example:

function scopeTest() {
    if (true) {
        var varVariable = 'I am a var variable';
        let letVariable = 'I am a let variable';
        const constVariable = 'I am a const variable';
    }
    console.log(varVariable); // 'I am a var variable'
    console.log(letVariable); // ReferenceError: letVariable is not defined
    console.log(constVariable); // ReferenceError: constVariable is not defined
}

scopeTest();

2. Write a function using arrow syntax that takes two parameters and returns their sum.

Arrow functions in ES6 offer a concise syntax for writing functions, especially small, anonymous ones. They also have a lexical this binding, inheriting this from the parent scope.

Example:

const sum = (a, b) => a + b;

console.log(sum(3, 4)); // 7

3. How would you use template literals to create a multi-line string that includes variables?

Template literals, enclosed by backticks, allow for embedded expressions using ${expression} syntax, facilitating multi-line strings and variable inclusion.

Example:

const name = "John";
const age = 30;
const multiLineString = `Hello, my name is ${name}.
I am ${age} years old.
Nice to meet you!`;

console.log(multiLineString);

4. How can you set default values for function parameters?

You can set default values for function parameters directly within the function signature, initializing parameters with default values if no arguments are provided or if undefined is passed.

Example:

function greet(name = 'Guest') {
    return `Hello, ${name}!`;
}

console.log(greet()); // Output: Hello, Guest!
console.log(greet('Alice')); // Output: Hello, Alice!

5. Demonstrate how to use the spread operator to combine two arrays into one.

The spread operator, denoted by three dots (…), allows an iterable like an array to be expanded in places where zero or more arguments or elements are expected, such as combining arrays.

Example:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const combinedArray = [...array1, ...array2];

console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6]

6. Write a function that uses rest parameters to accept any number of arguments and returns their sum.

Rest parameters allow a function to accept an indefinite number of arguments as an array, useful when the number of inputs is unknown.

Example:

function sum(...args) {
    return args.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // Output: 10
console.log(sum(5, 10, 15));  // Output: 30

7. Create a simple class with a constructor and a method.

Classes provide a clear way to create objects and deal with inheritance. A class can have a constructor for creating and initializing an object, and methods to define behavior.

Example:

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

    greet() {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

const person1 = new Person('John', 30);
console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.

8. Extend a class and override a method from the parent class.

Classes can be extended using the extends keyword, allowing a subclass to inherit properties and methods from a parent class. A subclass method can override a parent class method.

Example:

class Animal {
    speak() {
        console.log("Animal speaks");
    }
}

class Dog extends Animal {
    speak() {
        console.log("Dog barks");
    }
}

const myDog = new Dog();
myDog.speak(); // Output: Dog barks

9. Explain how ES6 modules work and how to import/export them.

ES6 modules enable code modularization, allowing developers to split code into reusable pieces. They use export and import keywords to share and use functionalities across files.

Named exports allow exporting multiple values, while default exports allow exporting a single value.

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// logger.js
const log = (message) => console.log(message);
export default log;

To import these exports:

// main.js
import log from './logger.js'; // Importing default export
import { add, subtract } from './math.js'; // Importing named exports

log(add(2, 3)); // 5
log(subtract(5, 2)); // 3

10. Write a promise that resolves after 2 seconds and logs a message.

Promises handle asynchronous operations, representing an operation that hasn’t completed yet but is expected in the future. To create a promise that resolves after 2 seconds and logs a message:

Example:

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise resolved after 2 seconds');
    }, 2000);
});

myPromise.then(message => {
    console.log(message);
});

11. Explain the difference between Map and Set data structures in ES6.

Map and Set are distinct data structures.

– A Map is a collection of key-value pairs where both keys and values can be of any data type. It maintains the insertion order.
– A Set is a collection of unique values, meaning it does not allow duplicates. It also maintains the insertion order.

Example:

// Example of Map
let map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map.get('key1')); // Output: value1
console.log(map.size); // Output: 2

// Example of Set
let set = new Set();
set.add(1);
set.add(2);
set.add(2); // Duplicate value, will not be added
console.log(set.has(1)); // Output: true
console.log(set.size); // Output: 2

12. Create a simple Proxy object that logs every time a property is accessed.

A Proxy object allows you to define custom behavior for fundamental operations. You can intercept these operations and add custom logic, such as logging every time a property is accessed.

Example:

const target = {
    name: 'John Doe',
    age: 30
};

const handler = {
    get: function(target, property) {
        console.log(`Property '${property}' has been accessed.`);
        return target[property];
    }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Logs: Property 'name' has been accessed.
console.log(proxy.age);  // Logs: Property 'age' has been accessed.

13. Explain the concept of promises and how async/await improves upon them.

Example using Promises:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 1000);
    });
}

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

Example using Async/Await:

async function fetchData() {
    try {
        const data = await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('Data fetched');
            }, 1000);
        });
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

fetchData();

14. Describe tree shaking in the context of ES6 modules.

Tree shaking optimizes JavaScript code by removing dead code, which is code that is never used. This process is effective with ES6 modules due to their static structure, allowing for efficient analysis of code dependencies.

Tools like Webpack and Rollup perform tree shaking by analyzing import and export statements to determine which parts of the code are used, excluding unused code from the final bundle.

Example:

// utils.js
export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

// main.js
import { add } from './utils';

console.log(add(2, 3));

In this example, the subtract function is never used. A tree shaking tool would exclude it from the final bundle, resulting in a smaller output.

15. Explain the purpose and use cases of iterators and generators.

Iterators are objects implementing the iterator protocol, which consists of a next() method returning an object with value and done properties. Generators are special functions that can be paused and resumed, producing a sequence of values over time.

Example:

// Iterator example
const myIterator = {
  data: [1, 2, 3],
  index: 0,
  next() {
    if (this.index < this.data.length) {
      return { value: this.data[this.index++], done: false };
    } else {
      return { value: undefined, done: true };
    }
  }
};

console.log(myIterator.next()); // { value: 1, done: false }
console.log(myIterator.next()); // { value: 2, done: false }
console.log(myIterator.next()); // { value: 3, done: false }
console.log(myIterator.next()); // { value: undefined, done: true }

// Generator example
function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = myGenerator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }