JavaScriptES6+ Overview

ES6+ Overview

ES6 — officially ECMAScript 2015 — is the version of JavaScript that gave the language a second life. It landed an unusual amount of new syntax and built-ins in one go, and most of what people now call "modern JavaScript" comes from this release. Subsequent yearly editions (ES2016 onward) have added smaller, focused features. This page is a quick tour of the headline ES6 features and the most-used additions that came after — each section links to the dedicated tutorial page for the deep dive.

let and const (block-scoped variables)

JS
if (true) {
  let inside = "block-scoped";
  const PI = 3.14159;
  // PI = 4; // TypeError — cannot reassign a const
}
// console.log(inside); // ReferenceError — out of scope

let and const replaced var for almost every use. They are block-scoped, free of hoisting surprises, and const documents intent (the binding won't be reassigned). See Variables and Scope.

Arrow functions

JS
const square = x => x * x;
const sum    = (a, b) => a + b;

// Short body returns the expression; braces require an explicit return.
const greet  = name => ({ hello: name });   // ()-wrap object literals

console.log(square(4));     // 16
console.log(greet("Ada"));  // { hello: "Ada" }

Arrow functions inherit this from their surrounding scope — a fix for the classic var self = this workaround. More in Arrow Functions.

Template literals

JS
const name = "Ada";
const age  = 36;

const intro = `${name} is ${age} years old`;
// multi-line works without "\n":
const block = `line one
line two`;

Backticks plus ${...} replaced "Hello " + name + ", you have " + n + " messages" style concatenation. Tagged templates extend this further — see Tagged Templates.

Destructuring

JS
const user = { name: "Lin", role: "admin", age: 36 };
const { name, role } = user;

const point = [10, 20, 30];
const [x, y, ...rest] = point;

// Defaults and renames work too.
const { age: years = 0 } = user;
console.log(years); // 36
Default, rest and spread

JS
function greet(name = "friend") {
  return "Hello, " + name;
}

function sum(...nums) {            // rest — collects arguments into an array
  return nums.reduce((a, b) => a + b, 0);
}

const a = [1, 2, 3];
const b = [...a, 4, 5];            // spread — expands into another array
const o = { ...{ x: 1 }, y: 2 };   // also works on objects

console.log(sum(1, 2, 3, 4));      // 10
console.log(b);                     // [1, 2, 3, 4, 5]
Classes

JS
class Animal {
  constructor(name) { this.name = name; }
  speak() { return `${this.name} makes a sound`; }
}

class Dog extends Animal {
  speak() { return `${this.name} barks`; }
}

console.log(new Dog("Rex").speak());
Rex barks

Classes are syntactic sugar over the prototype system that has always powered JavaScript. See Classes.

Modules

The import/export syntax — see Modules Overview and import / export. Before ES6, every team rolled their own module system (or used CommonJS, AMD, UMD…).

Promises

JS
fetch("/api/user")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Native Promises replaced callback-pyramids and made async/await (added in ES2017) possible. See Promises.

Map, Set, WeakMap, WeakSet

JS
const seen = new Set();
seen.add("a"); seen.add("b"); seen.add("a");
console.log(seen.size); // 2

const cache = new Map();
cache.set(window, "first visit");
console.log(cache.get(window));

See Sets, Maps and WeakSet & WeakMap.

Iterators and generators

JS
function* range(from, to) {
  for (let i = from; i < to; i++) yield i;
}

for (const n of range(0, 3)) console.log(n);
0
1
2

Generators give you lazy, on-demand sequences. See Iterators and Generators.

What came after ES6

Each yearly release adds a handful of features. The highlights:

  • ES2016 — Array.prototype.includes, the exponentiation operator **.

  • ES2017 — async/await, Object.values/entries, string padding.

  • ES2018 — object rest/spread, Promise.prototype.finally, async iteration.

  • ES2019 — Array.prototype.flat/flatMap, optional catch binding, Object.fromEntries.

  • ES2020 — optional chaining ?., nullish coalescing ??, BigInt, Promise.allSettled, dynamic import().

  • ES2021 — logical assignment (&&=, ||=, ??=), String.prototype.replaceAll, Promise.any.

  • ES2022 — top-level await, class fields and private members, Object.hasOwn, Array.prototype.at.

  • ES2023 — Array.prototype.findLast, the immutable toSorted/toReversed/toSpliced methods.

  • ES2024 — Object.groupBy, Map.groupBy, Promise.withResolvers, the v regex flag.

Detailed pages: Logical Assignment, Top-Level await, Latest Language Features.

What "ES6" really means
Most teams say "ES6" as shorthand for "modern JavaScript". Browsers and Node have shipped every yearly edition for a long time now — if you are writing JavaScript today, you can use everything on this page. Older corporate or embedded environments are the main exception; for those you still reach for Babel or SWC.