ECMAScript 2015 (ES6)

ES6, also known as ECMAScript 2015, is one of the biggest updates ever made to JavaScript. It introduced many modern features that made the language cleaner, more powerful, and easier to work with—especially for large-scale applications.

Here’s a structured overview 👇

🧱 1. Background

ECMAScript (ES) is the official standard of JavaScript.
ES6 (ECMAScript 2015) was released in June 2015.
It marked a major leap from ES5 (2009), adding features for better object-oriented, functional, and modular programming.

⚙️ 2. Key Features of ES6

✅ Let and Const

Block-scoped variable declarations that replace var.

let x = 10;
const y = 20;
x = 15; // OK
y = 30; // ❌ Error: Assignment to constant variable

let → can be reassigned, but not redeclared in the same scope.
const → cannot be reassigned.

✅ Arrow Functions

Shorter syntax for writing functions, and they don’t bind their own this.

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

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

✅ Template Literals

Use backticks ` for strings with embedded expressions.

const name = "Donny";
console.log(`Hello, ${name}!`); // Output: Hello, Donny!

✅ Default Parameters

Provide default values for function parameters.

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

✅ Destructuring Assignment

Extract data from arrays or objects easily.

const [a, b] = [10, 20];
const { name, age } = { name: "Donny", age: 30 };

console.log(a, b);     // 10 20
console.log(name, age); // Donny 30

✅ Spread and Rest Operators

Spread (...) expands arrays/objects.
Rest (...) collects multiple elements into an array.

const nums = [1, 2, 3];
const more = [...nums, 4, 5]; // Spread

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

✅ Classes

Syntactic sugar over JavaScript’s prototype-based inheritance.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

const p = new Person("Donny");
p.greet(); // Hi, I'm Donny

✅ Modules

Allow code to be split into reusable files.

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

// main.js
import { add } from './math.js';

✅ Promises

Used for handling asynchronous operations more cleanly.

fetch("https://api.example.com")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

✅ Enhanced Object Literals

Simplified syntax for creating objects.

const name = "Donny";
const age = 30;

const person = {
  name,
  age,
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

✅ Iterators and for…of Loop

Simplifies looping through iterable objects.

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

✅ Map and Set

New data structures.

const map = new Map();
map.set('name', 'Donny');

const set = new Set([1, 2, 2, 3]);
console.log(set); // Set { 1, 2, 3 }

🧠 3. Why ES6 Matters

Makes JavaScript cleaner and more readable.
Enables modular and scalable codebases.
Forms the foundation for modern frameworks like React, Angular, and Vue.

Please check before-and-after example (ES5 vs ES6) of the same code snippet so you can see how ES6 improves readability.

Dung (Donny) Nguyen

Senior Software Engineer