JavaScript ES6 Features Complete Guide

What is ES6?

ES6 (ECMAScript 2015) was the biggest update to JavaScript ever. It introduced features that define how we write JS today. Here are the ones that matter most.

1. let & const

const PI = 3.14;   // cannot be reassigned
let count = 0;     // block-scoped, can change
// var is function-scoped and should be avoided

2. Arrow Functions

const add = (a, b) => a + b;
const square = n => n * n;
// Arrow functions also keep the parent's "this"

3. Template Literals

const name = "Ali";
console.log(`Hello ${name}, you have ${2 + 3} messages`);

4. Destructuring

const { id, email } = user;
const [first, second] = items;

5. Spread & Rest

const merged = [...arr1, ...arr2];
const clone = { ...original };
function sum(...nums) { return nums.reduce((a,b)=>a+b, 0); }

6. Default Parameters

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

7. Promises

fetch("/api").then(res => res.json()).then(console.log);

8. Modules

// math.js
export const add = (a, b) => a + b;
// app.js
import { add } from "./math.js";

FAQs

Do I need Babel to use ES6?

Not anymore for modern browsers — they all support ES6. You only need Babel to support very old browsers like IE11.

What came after ES6?

Yearly releases: ES2017 added async/await, ES2020 added optional chaining (?.) and nullish coalescing (??). See our JavaScript guides.