Modern JavaScript Essentials: Destructuring, Template Literals, Spread & Rest, Map & Set

In this article, we’ll dive into four powerful features of modern JavaScript:

• Destructuring: Extracting values from arrays/objects.

• Template Literals: A smarter way to handle strings.

• Spread & Rest Operators: Expanding and collecting values with ease.

• Map & Set: Modern alternatives to objects and arrays for certain use cases.

---

1️⃣ Destructuring in JavaScript

Imagine unpacking groceries into different shelves without repeating yourself. That’s exactly what destructuring does — it allows you to pull out values from arrays and objects directly into variables.

📦 Example: Array Destructuring

// ES5 way
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];

// ES6 destructuring
const [x, y] = [1, 2, 3];
console.log(x, y); // 1, 2

📦 Example: Object Destructuring

const user = { name: "Prashant", age: 25 };

// Old way
var name = user.name;
var age = user.age;

// Modern way
const { name, age } = user;
console.log(name, age); // Prashant 25

👉 Benefit: Fewer lines, clearer intent, and direct access to needed values.

---

2️⃣ Template Literals

In ES5, building strings with variables was painful. Template literals introduced in ES6 make this seamless.

📃 Example

const product = "Laptop";
const price = 60000;

// ES5
console.log("The " + product + " costs " + price + " INR.");

// ES6 Template Literal
console.log(`The ${product} costs ${price} INR.`);

✅ Supports multi-line strings too:

const message = `
Hello User,
Welcome to our platform!
`;

👉 Benefit: Readable, clean, and no more messy + concatenations.

---

3️⃣ Spread & Rest Operators (...)

This one operator does two opposite jobs:

• Spread → expands values.

• Rest → collects values.

✨ Spread Example

const nums = [1, 2, 3];
const newNums = [...nums, 4, 5]; 
console.log(newNums); // [1,2,3,4,5]

✨ Rest Example

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3, 4)); // 10

---

📊 Comparison Table: Spread vs Rest

👉 Visual Idea: Diagram showing spread scattering marbles out of a bag, and rest collecting them back into a bag.

---

4️⃣ Map & Set – Modern Data Structures

🔹 Map

A Map is like an object but with any type of key (not just strings).

const userRoles = new Map();
userRoles.set("Alice", "Admin");
userRoles.set("Bob", "Editor");

console.log(userRoles.get("Alice")); // Admin

✅ Advantages over Objects:

• Keys can be objects, arrays, or functions.

• Maintains insertion order.

---

🔹 Set

A Set is like an array, but only unique values are allowed.

const numbers = new Set([1, 2, 2, 3]);
console.log(numbers); // Set {1, 2, 3}

✅ Advantages over Arrays:

• Automatically removes duplicates.

• Useful for uniqueness checks.

---

🆚 ES5 vs ES6 at a Glance

---

🎯 Conclusion

Modern JavaScript features aren’t just syntactic sugar — they make your code cleaner, faster, and easier to maintain.

• Use destructuring for clarity.

• Prefer template literals for strings.

• Apply spread/rest to simplify function handling and data merging.

• Choose Map/Set when you need ordered key-value pairs or unique collections.