ES6+ Features Every JavaScript Developer Should Know

Modern JavaScript — ES6 (2015) and the yearly updates since — transformed the language from verbose to expressive. The features you’ll use every single day are arrow functions, destructuring, template literals, the spread/rest operator, default parameters, and modules, plus later additions like async/await, optional chaining, and nullish coalescing.

If you learned older JavaScript, these are the upgrades that modernise your code; if you’re new, these are JavaScript now. Here’s the essential set.

let and const

Block-scoped variable declarations that replaced var. Covered fully in var vs let vs const — the short version: const by default, let to reassign.

Arrow functions

Shorter function syntax that inherits this from its surroundings — ideal for callbacks.

const double = (n) => n * 2;
nums.map((n) => n * 2);          // concise callbacks

The key behavioural difference from regular functions: arrows have no own this (see the this keyword), which is exactly why they’re the go-to fix for lost-this bugs.

Template literals

String interpolation with backticks — no more + concatenation:

const name = "Ana";
const greeting = `Hello, ${name}! You have ${count} messages.`;

They also support multi-line strings directly.

Destructuring

Unpack arrays and objects into variables in one line:

const { name, age } = user;          // object destructuring
const [first, second] = list;        // array destructuring
const { city = "Unknown" } = user;   // with a default

It’s everywhere in modern code, especially for function parameters and imports.

Spread and rest (...)

The same three dots do two complementary jobs:

const merged = [...arr1, ...arr2];          // spread: expand
const copy = { ...original, active: true }; // spread into a new object

function sum(...nums) {                       // rest: gather
  return nums.reduce((a, b) => a + b, 0);
}

Spread expands a collection; rest gathers arguments into an array.

Default parameters

function greet(name = "friend") {
  return `Hi, ${name}`;
}
greet();          // "Hi, friend"

Modules (import/export)

Split code across files with import/export — the foundation of every modern project:

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

The later essentials (ES2017+)

• async/await — readable asynchronous code (see promises and async/await).
• Optional chaining ?. — safely access nested properties: user?.address?.city returns undefined instead of throwing.
• Nullish coalescing ?? — a default only for null/undefined: const port = config.port ?? 3000 (unlike ||, it keeps 0 and "").

Common mistakes

• Using || for defaults when you mean ?? — count || 10 wrongly replaces a valid 0. Use ?? for null/undefined-only defaults.
• Arrow functions as object methods when you need this to be the object — an arrow won’t bind to it.
• Over-destructuring into unreadable lines — clarity first.

See more in common JavaScript mistakes.

Where this fits

ES6+ features run through every phase of the JavaScript roadmap, and they make array methods and async code concise.

The modern syntax is used throughout JavaScript in One Month and explored in depth — including the newer yearly additions — in the job-ready JavaScript in Three Months.

Learn the daily set well and you’re writing idiomatic, modern JavaScript.