Skip to main content

ES6 Features (ECMAScript 2015)

ECMAScript 6 (ES6) is arguably the most famous and culturally significant update in JavaScript's history. It completely revolutionized the syntax, paving the way for frameworks like React and Angular.

1. let and const​

Replaced the volatile, function-scoped var keyword with strictly block-scoped variables.

  • let: Used for variables that will be reassigned.
  • const: Used for immutable pointers (constants).

2. Arrow Functions​

A shorter, cleaner syntax for function expressions which also solved the notorious lexical this binding issue.

// Old ES5 Pattern
const double = function(x) { return x * 2; };

// ES6 Pattern
const double = x => x * 2;

3. Template Literals​

Smashed down the irritating barrier of String concatenation using backticks ( ` ). It allows for dynamic expression injection via ${} and multi-line strings.

const name = "Alice";
const greeting = `Hello ${name}!
Welcome to the team.`;

4. Destructuring Assignment​

A syntax for cleanly extracting values directly from Objects or Arrays into distinct variables.

const user = { name: "Bob", age: 30, role: "Admin" };

// ES6 Object Destructuring
const { name, role } = user;
console.log(name, role); // "Bob" "Admin"

5. Promises​

Introduced a clean, native structure for handling asynchronous callbacks seamlessly, eradicating heavily nested "Callback Hell".

6. Classes​

Wrapped JavaScript's prototypal inheritance model in modern Object-Oriented class syntax, complete with constructors, super, and extends.

7. Default Parameters​

Allowed developers to default functional arguments perfectly.

const multiply = (a, b = 1) => a * b;
console.log(multiply(5)); // 5 (Since b defaulted to 1)

8. Spread and Rest Operators (...)​

Provides easy logic for unpacking iterables.

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

// Rest Operator
const sumAll = (...args) => args.reduce((a, b) => a + b, 0);

9. Modules (Import / Export)​

Introduced secure module compartmentalization.

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

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