ES6 — also called ECMAScript 2015 — was a revolutionary update to JavaScript.
Before ES6, JavaScript felt like a village road. After ES6, it became an express highway for modern web development.

It introduced cleaner syntax, powerful features, better readability, and professional coding standards.

Today, frameworks like React, Node.js, and Vue.js heavily rely on ES6 features.

Why ES6 Was Introduced

Old JavaScript had problems:

Difficult syntax
Repeated code
Confusing variable scope
Weak support for modular programming
Callback-heavy coding style

ES6 solved these with modern tools.

Major ES6 Features

We’ll cover:

let and const
Arrow Functions
Template Literals
Default Parameters
Destructuring
Spread Operator
Rest Parameters
Enhanced Object Literals
Classes
Modules
Promises
for...of
Map and Set

1. let and const

Before ES6, variables were declared using var.

var name = "Anas";

Problem with var:

Function scoped
Can be redeclared
Causes bugs

let

let is block scoped.

let age = 20;

if (true) {
    let age = 25;
    console.log(age);
}

console.log(age);

Output

25
20

Logic

The variable inside {} is different from the outer variable.

const

Used for constant values.

const pi = 3.14;

Cannot be reassigned.

const pi = 3.14;
pi = 3.1415;

Error

Assignment to constant variable

var vs let vs const

Feature	var	let	const
Scope	Function	Block	Block
Redeclare	Yes	No	No
Reassign	Yes	Yes	No

2. Arrow Functions

Arrow functions provide shorter syntax.

Traditional Function

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

Arrow Function

const add = (a, b) => {
    return a + b;
};

Shorter Version

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

Output

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

Why Arrow Functions Are Important

They:

Reduce code
Improve readability
Preserve this

Example

const person = {
    name: "Anas",

    greet: function () {
        setTimeout(() => {
            console.log("Hello " + this.name);
        }, 1000);
    }
};

person.greet();

Output

Hello Anas

Arrow function keeps the object's this.

3. Template Literals

Before ES6:

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

ES6 Template Literals

Use backticks `

let name = "Anas";

console.log(`Hello ${name}`);

Output

Hello Anas

Multi-line Strings

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

console.log(text);

4. Default Parameters

Old way:

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

ES6 Way

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

greet();

Output

Guest

5. Destructuring

Extract values easily.

Array Destructuring

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

const [a, b, c] = colors;

console.log(a);
console.log(b);

Output

red
green

Object Destructuring

const student = {
    name: "Anas",
    age: 20
};

const { name, age } = student;

console.log(name);

Output

Anas

Why Destructuring Matters

Used heavily in:

React
APIs
JSON handling
Function parameters

6. Spread Operator (...)

Spread expands values.

Arrays

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

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

console.log(result);

Output

[1, 2, 3, 4]

Objects

const user = {
    name: "Anas"
};

const updatedUser = {
    ...user,
    city: "Mumbai"
};

console.log(updatedUser);

Output

{
  name: "Anas",
  city: "Mumbai"
}

7. Rest Parameters

Collect multiple values into one array.

function sum(...numbers) {
    console.log(numbers);
}

sum(1, 2, 3, 4);

Output

[1, 2, 3, 4]

Real Example

function total(...nums) {
    return nums.reduce((a, b) => a + b);
}

console.log(total(10, 20, 30));

Output

8. Enhanced Object Literals

Old Way

const name = "Anas";

const user = {
    name: name
};

ES6 Way

const name = "Anas";

const user = {
    name
};

console.log(user);

Output

{ name: "Anas" }

Short Method Syntax

const user = {
    greet() {
        console.log("Hello");
    }
};

user.greet();

9. Classes

ES6 introduced cleaner OOP syntax.

Example

class Student {

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    intro() {
        console.log(`My name is ${this.name}`);
    }
}

const s1 = new Student("Anas", 20);

s1.intro();

Output

My name is Anas

Inheritance

class Animal {
    speak() {
        console.log("Animal speaks");
    }
}

class Dog extends Animal {
    bark() {
        console.log("Dog barks");
    }
}

const d = new Dog();

d.speak();
d.bark();

10. Modules

Modules split code into separate files.

Export

export const name = "Anas";

Import

import { name } from "./file.js";

console.log(name);

Benefits of Modules

Cleaner codebase
Reusable functions
Better scalability
Industry standard architecture

11. Promises

Promises handle asynchronous tasks.

Examples:

API calls
Database queries
File loading

Basic Promise

const promise = new Promise((resolve, reject) => {

    let success = true;

    if (success) {
        resolve("Task completed");
    } else {
        reject("Task failed");
    }
});

promise
    .then(result => console.log(result))
    .catch(error => console.log(error));

Output

Task completed

Promise States

State	Meaning
Pending	Waiting
Resolved	Success
Rejected	Failed

12. for...of Loop

Used for arrays and iterable objects.

const fruits = ["apple", "banana", "mango"];

for (const fruit of fruits) {
    console.log(fruit);
}

Output

apple
banana
mango

13. Map

Stores key-value pairs.

const map = new Map();

map.set("name", "Anas");
map.set("age", 20);

console.log(map.get("name"));

Output

Anas

14. Set

Stores unique values.

const numbers = new Set([1, 2, 2, 3, 3]);

console.log(numbers);

Output

Set(3) {1, 2, 3}

Real-Life Importance of ES6

ES6 is everywhere:

Technology	Uses ES6
React	Yes
Node.js	Yes
Express.js	Yes
Vue.js	Yes
Angular	Yes

Without ES6, modern JavaScript development becomes difficult.

Mini Real Project Example

const students = [
    { name: "Anas", marks: 90 },
    { name: "Ali", marks: 80 },
    { name: "Zaid", marks: 70 }
];

const result = students
    .filter(student => student.marks >= 80)
    .map(student => `${student.name} passed`);

console.log(result);

Output

["Anas passed", "Ali passed"]

ES6 Interview Questions

Difference between let and const?

let can change
const cannot change

What is destructuring?

Extracting values from arrays/objects into variables.

What is spread operator?

Expands array/object elements.

Difference between spread and rest?

Spread	Rest
Expands values	Collects values

Why use arrow functions?

Short syntax
Cleaner code
Lexical this

Final Summary

ES6 modernized JavaScript completely.

Core strengths:

Cleaner syntax
Better readability
Modular programming
Easier async handling
Powerful array/object manipulation

If old JavaScript was handwritten paperwork, ES6 became a smart digital workflow system — efficient, scalable, elegant.

Mastering ES6 is not optional anymore for a JavaScript developer. It is the foundation stone upon which modern frontend and backend ecosystems stand.