ES6 (Modern JavaScript) Features

ES6 (also known as ECMAScript 2015) introduced numerous features that enhanced JavaScript's power, clarity, and ease of use.
These features are used in nearly all modern web development frameworks, such as React, Angular, Vue, and Node.js.

As a student or recent graduate preparing for interviews or learning modern JavaScript, ES6 is essential.

In this chapter, you will learn the most important ES6 features:

• let and const

• Template literals

• Arrow functions

• Spread operator

• Rest operator

• Destructuring

• Default parameters

• Enhanced object literals

Let’s begin.

1. let and const (Block Scoped Variables)

let

Used for variables whose values can change.

let age = 20;
age = 25;

console.log(age);

Output:

25

const

Used for values that should not change.

const pi = 3.14;

console.log(pi);

Output:

3.14

Important:
You can change contents of a const object, but not reassign it.

const user = { name: "Aman" };
user.name = "Riya"; // allowed

2. Template Literals (Backticks)

Template literals make string creation easier.

Old Way:

let name = "Aman";
console.log("Hello " + name);

ES6 Way:

let name = "Aman";
console.log(`Hello ${name}`);

Multi-line string:

let msg = `
This is line 1
This is line 2
`;

console.log(msg);

3. Arrow Functions

Shorter way to write functions.

Old Way:

function add(a, b) {
    return a + b;
}

ES6 Way:

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

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

Output:

8

Arrow functions also have no this binding, which you learned earlier.

4. Spread Operator (...)

Spread operator expands arrays or objects.

Example: Spread in arrays

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];

console.log(arr2);

Output:

[1, 2, 3, 4, 5]

Example: Spread in objects

let user = { name: "Riya" };
let updated = { ...user, age: 21 };

console.log(updated);

5. Rest Operator (...rest)

Collects multiple values into an array.

function sum(...nums) {
    let total = 0;
    for (let n of nums) total += n;
    return total;
}

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

Output:

10

6. Destructuring

Destructuring extracts values from arrays and objects easily.

Array Destructuring

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

let [a, b, c] = colors;

console.log(a, b, c);

Output:

red blue green

Object Destructuring

let student = { name: "Aman", age: 20 };

let { name, age } = student;

console.log(name, age);

Rename while destructuring

let { name: studentName } = student;

console.log(studentName);

7. Default Parameters

function greet(name = "Guest") {
    console.log("Hello", name);
}

greet();
greet("Aman");

Output:

Hello Guest
Hello Aman

8. Enhanced Object Literals

ES6 allows shorter and cleaner object creation.

Old Way:

let name = "Aman";

let user = {
    name: name
};

ES6 Way:

let name = "Aman";

let user = {
    name
};

console.log(user);

Adding functions inside objects

let user = {
    name: "Aman",
    show() {
        console.log("Hello", this.name);
    }
};

user.show();

Real-Life Example: Clean Code With ES6

function createUser(name, age, city) {
    return {
        name,
        age,
        city,
        show() {
            console.log(`${name} lives in ${city}`);
        }
    };
}

let u1 = createUser("Meera", 21, "Delhi");
u1.show();

Output:

Meera lives in Delhi

Real-Life Example: Copying and Updating Objects

let product = { name: "Laptop", price: 40000 };

let finalProduct = { ...product, discount: 10 };

console.log(finalProduct);

Example Program (Complete)

let person = {
    name: "Riya",
    age: 22
};

// destructuring
let { name, age } = person;

// arrow function
const greet = () => `Hello ${name}, Age: ${age}`;

// spread
let updated = { ...person, city: "Mumbai" };

console.log(greet());
console.log(updated);

Output:

Hello Riya, Age: 22
{ name: 'Riya', age: 22, city: 'Mumbai' }

Common Mistakes Beginners Make

1. Confusing spread and rest (same symbol, different use)

2. Forgetting backticks for template literals

3. Using const but trying to reassign the variable

4. Using arrow functions inside objects incorrectly

5. Wrong destructuring variable names

Practice Tasks (Do It Yourself)

1. Write a function using arrow syntax that adds three numbers.

2. Use destructuring to extract first two items from an array.

3. Create a new object using spread and add two more properties.

4. Write a template literal message describing yourself.

5. Create a function that uses rest to accept unlimited inputs.