ES6 (ECMAScript 2015): A Complete Guide for JavaScript Developers

JavaScript changed forever with ES6 (ECMAScript 2015).
If you’ve written modern JavaScript—whether in Angular, React, Node.js, or plain JS—you’re already using ES6 daily, sometimes without even realizing it.

This blog is a complete walkthrough of ES6 features, why they matter, and how they improve code readability, maintainability, and performance.

Why ES6 Was a Game Changer

Before ES6:

• JavaScript lacked proper scoping
• Code was verbose and hard to maintain
• Async programming was painful
• No native modules, classes, or arrow functions

ES6 introduced modern programming constructs that made JavaScript suitable for large-scale applications.

1. let and const (Block Scope)

ES6 replaced var with let and const.

❌ Problem with var

if (true) {
  var x = 10;
}
console.log(x); // 10 (unexpected)

✅ Solution with let

if (true) {
  let x = 10;
}
console.log(x); // ReferenceError

const

• Block scoped
• Cannot be reassigned
• Best default choice

const API_URL = "https://api.example.com";

👉 Best Practice:
Use const by default, let when reassignment is needed.

2. Arrow Functions (=>)

Arrow functions provide shorter syntax and lexical this binding.

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

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

Lexical this

class Counter {
  count = 0;

  increment() {
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
}

No need for var self = this.

3. Template Literals

String interpolation becomes clean and readable.

const name = "Ranjan";
const role = "Developer";

console.log(`Hello, I am ${name}, a ${role}`);

Supports:

• Multiline strings
• Embedded expressions

4. Destructuring (Arrays & Objects)

Extract values easily.

Object Destructuring

const user = { name: "Ranjan", age: 35 };
const { name, age } = user;

Array Destructuring

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

5. Default Parameters

No more manual checks.

function greet(name = "Guest") {
  return `Hello ${name}`;
}

6. Spread (...) and Rest (...) Operator

Spread

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

const user = { name: "Ranjan" };
const updatedUser = { ...user, role: "Engineer" };

Rest

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

7. Enhanced Object Literals

Shorter and smarter object creation.

const name = "Ranjan";
const age = 35;
const user = { name, age };

Methods:

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

8. Classes (Syntactic Sugar over Prototypes)

Cleaner OOP syntax.

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello ${this.name}`;
  }
}

Inheritance:

class Developer extends Person {
  code() {
    return "Coding...";
  }
}

👉 Widely used in Angular & TypeScript.

9. Modules (import / export)

Native module system.

// math.js
export const add = (a, b) => a + b;

// app.js
import { add } from "./math.js";

Foundation of modern bundlers: Webpack, Vite, Rollup.

10. Promises

Fixes callback hell.

fetchData()
  .then(data => process(data))
  .catch(err => console.error(err));

Promise states:

• Pending
• Fulfilled
• Rejected

11. for...of Loop

Iterate values (not keys).

for (const value of [10, 20, 30]) {
  console.log(value);
}

12. Map & Set

Map (key-value)

const map = new Map();
map.set("name", "Ranjan");

Set (unique values)

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

13. Symbol

Unique identifiers.

const id = Symbol("id");

Used internally in libraries and frameworks.

14. Generators

Pause and resume functions.

function* generator() {
  yield 1;
  yield 2;
}

ES6 in Real-World Development

ES6 is the foundation of:

• Angular / React / Vue
• Node.js backend
• TypeScript (superset of ES6)
• Modern browser APIs

If you know ES6 well, learning TypeScript, React, Node, or even AI tooling becomes much easier.