JavaScript Core | VoidX Academy

12. Modern ES6+ Features

Syntax

ES6+ Features

In 2015, JavaScript received a massive update known as ES6. It introduced syntactical sugar that allows engineers to write significantly cleaner and shorter code.

🏷️ Template Literals

Gone are the days of clunky string concatenation. Use backticks ` and ${} to inject variables directly into strings.

const name = "Alice";
const tasks = 5;

// Old way:
// const msg = "User " + name + " has " + tasks + " tasks.";

// ES6 Way:
const msg = `User ${name} has ${tasks} tasks remaining.`;
console.log(msg);

OutputUser Alice has 5 tasks remaining.

📦 Destructuring

Destructuring allows you to unpack values from arrays or properties from objects directly into distinct variables.

const user = { username: "Ghost", role: "Admin", age: 30 };

// Instead of user.username and user.role, extract them instantly:
const { username, role } = user;

console.log(username);
console.log(role);

OutputGhost
Admin

✨ Spread Operator (...)

The spread operator literally "spreads" the contents of an array or object out into a new container. It is the absolute best way to copy arrays without mutating the original.

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

// Combine arrays effortlessly
const merged = [...arr1, ...arr2, 7, 8];
console.log(merged);

// Copy and extend objects
const config = { theme: "dark", version: 1 };
const finalConfig = { ...config, loggedIn: true };
console.log(finalConfig);

Output[ 1, 2, 3, 4, 5, 6, 7, 8 ]
{ theme: 'dark', version: 1, loggedIn: true }

🎒 Rest Parameters

Looks identical to spread, but does the exact opposite. It collects multiple arguments into a single array parameter inside a function.

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

console.log(sumAll(10, 20, 30, 40));

Output100

12. Modern ES6+ Features

Syntax

ES6+ Features

In 2015, JavaScript received a massive update known as ES6. It introduced syntactical sugar that allows engineers to write significantly cleaner and shorter code.

🏷️ Template Literals

Gone are the days of clunky string concatenation. Use backticks ` and ${} to inject variables directly into strings.

const name = "Alice";
const tasks = 5;

// Old way:
// const msg = "User " + name + " has " + tasks + " tasks.";

// ES6 Way:
const msg = `User ${name} has ${tasks} tasks remaining.`;
console.log(msg);

OutputUser Alice has 5 tasks remaining.

📦 Destructuring

Destructuring allows you to unpack values from arrays or properties from objects directly into distinct variables.

const user = { username: "Ghost", role: "Admin", age: 30 };

// Instead of user.username and user.role, extract them instantly:
const { username, role } = user;

console.log(username);
console.log(role);

OutputGhost
Admin

✨ Spread Operator (...)

The spread operator literally "spreads" the contents of an array or object out into a new container. It is the absolute best way to copy arrays without mutating the original.

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

// Combine arrays effortlessly
const merged = [...arr1, ...arr2, 7, 8];
console.log(merged);

// Copy and extend objects
const config = { theme: "dark", version: 1 };
const finalConfig = { ...config, loggedIn: true };
console.log(finalConfig);

Output[ 1, 2, 3, 4, 5, 6, 7, 8 ]
{ theme: 'dark', version: 1, loggedIn: true }

🎒 Rest Parameters

Looks identical to spread, but does the exact opposite. It collects multiple arguments into a single array parameter inside a function.

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

console.log(sumAll(10, 20, 30, 40));

Output100

12. Modern ES6+ Features

ES6+ Features

🏷️ Template Literals

📦 Destructuring

✨ Spread Operator (...)

🎒 Rest Parameters

Knowledge Check

12. Modern ES6+ Features

ES6+ Features

🏷️ Template Literals

📦 Destructuring

✨ Spread Operator (...)

🎒 Rest Parameters

Knowledge Check