JavascriptJavascript

JavaScript ES6+ Interview Questions & Concepts (Destructuring, Spread, Rest)

Javascript·21 March 2026

Share this article on social platforms or copy the direct link.

JavaScript ES6+ Features Explained (Simple & Practical Guide)

If you're working with modern JavaScript or React, ES6+ features are something you simply can’t ignore. These features make your code shorter, cleaner, and much easier to understand. Instead of writing long and repetitive code, ES6 helps you write smart and efficient logic.

ES6+ is not just about new syntax — it’s about writing better and more readable JavaScript.

“Good developers write code that works. Great developers write code that others can understand.”

1. Destructuring

Destructuring lets you take values from objects or arrays and assign them to variables in a clean way. No need to access each property manually again and again.

Object Destructuring

const user = {
  name: "Divyansh",
  age: 22
};

const { name, age } = user;

console.log(name); // Divyansh

Array Destructuring

const colors = ["red", "blue", "green"];

const [first, second] = colors;

console.log(first); // red

2. Spread Operator (...)

The spread operator is used to expand elements. It's very useful when you want to merge arrays or copy data.

const arr1 = [1, 2];
const arr2 = [3, 4];

const result = [...arr1, ...arr2];

console.log(result); // [1, 2, 3, 4]

3. Rest Operator (...)

The rest operator collects multiple values into a single array. It is commonly used in functions when you don’t know how many arguments will come.

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

4. Template Literals

Template literals allow you to write dynamic strings easily using backticks (`). You can directly insert variables without using + operator.

const name = "Divyansh";

const message = `Hello ${name}, welcome!`;

console.log(message);

5. Optional Chaining (?.)

Optional chaining helps you safely access nested properties without breaking your code. If something is undefined, it simply returns undefined instead of throwing an error.

const user = {
  profile: {
    name: "Divyansh"
  }
};

console.log(user?.profile?.name); // Divyansh
console.log(user?.address?.city); // undefined

Once you start using ES6+ features, your code naturally becomes cleaner and easier to maintain. These are must-know concepts for any modern JavaScript developer.

JavaScript ES6 ES6 Features Modern JavaScript JavaScript Interview React JS Basics

Explore more Javascript articles

Read more articles from the same category or open the full category archive directly.

React js

Javascript

JavaScript Basics Explained: Variables, Data Types & Functions with Examples

“Strong fundamentals in JavaScript make you a better React developer.”

Javascript

JavaScript Arrays Explained with Examples Part 2 (Complete Beginner Guide)

Learn advanced JavaScript array methods with simple explanations and examples. This part covers flat, flatMap, findIndex, fill, copyWithin, Array.from, Array.isArray, and more.

Javascript

JavaScript Arrays Explained with Examples (Complete Beginner Guide)

Learn JavaScript Arrays step by step with simple explanations and examples. This cheat sheet covers array basics, methods, loops, searching, filtering, mapping, and common interview topics.

Javascript

React js