ES6 (released in 2015) was the biggest update to JavaScript ever. It introduced "Syntactic Sugar"—shortcuts for things we used to do the long way.
1. Template Literals
No more messy plus signs (+) for combining strings. We use backticks (`) and ${} to inject variables directly into text.
2. Destructuring
A fast way to "unpack" values from arrays or properties from objects into distinct variables.
3. Spread & Rest Operator (...)
Spread: "Expands" an array or object into a new one (great for copying).
Rest: "Gathers" multiple elements into a single array.
The Code Example
// 1. Template Literals (The modern string)
const user = "Alex";
const message = `Welcome back, ${user}! Today is ${new Date().toLocaleDateString()}.`;
console.log(message);
// 2. Object & Array Destructuring
const person = { firstName: "John", age: 30, city: "New York" };
// Instead of: const age = person.age;
const { firstName, city } = person;
console.log(firstName, city); // "John", "New York"
const colors = ["Red", "Green", "Blue"];
const [primary, secondary] = colors; // primary = "Red"
// 3. Spread Operator (Copying & Combining)
const snacks = ["Chips", "Nuts"];
const fullMenu = [...snacks, "Soda", "Pizza"];
// Result: ["Chips", "Nuts", "Soda", "Pizza"]
const originalUser = { name: "Bob", role: "Admin" };
const updatedUser = { ...originalUser, role: "SuperAdmin" }; // Overwrites role