ES6 Features Every JavaScript Developer Should Know

1What Is ES6?

ES6, formally ECMAScript 2015, is the landmark update to JavaScript that modernised the language and defined how it is written today. It introduced a batch of features — block-scoped variables, arrow functions, template literals, destructuring, the spread and rest operators, classes, and native modules — that together made JavaScript cleaner, safer, and far more expressive.

Every version since has built on this foundation, but ES6 is the one that changed daily practice. If you learn its features you will read and write the vast majority of modern JavaScript comfortably.

2let and const: Block Scoping

let and const replace the old var keyword and fix its biggest flaw: var is function-scoped and hoisted, which causes subtle bugs. let and const are block-scoped, meaning they exist only inside the nearest curly braces, which matches how most developers expect variables to behave.

Use const by default for values you never reassign, and let when you do. Reserve var for legacy code you are maintaining, not new code you write.

• const PI = 3.14159; // cannot be reassigned
• let count = 0; // can be reassigned
• count += 1; // fine
• // const does not make objects immutable, only the binding
• const user = { name: 'Ana' }; user.name = 'Bea'; // allowed

3Arrow Functions

Arrow functions provide a shorter syntax for writing functions and, crucially, do not bind their own this — they inherit it from the surrounding scope. This lexical this behaviour removes the need for old workarounds like const self = this and makes callbacks in methods and event handlers far cleaner.

• const double = x => x * 2; // implicit return
• const add = (a, b) => a + b; // multiple params need parentheses
• const greet = name => { return `Hi ${name}`; }; // block body
• [1, 2, 3].map(n => n * n); // concise callbacks

4Template Literals

Template literals use backticks instead of quotes and let you embed expressions directly with the ${} syntax. They replace clumsy string concatenation and support multi-line strings without escape characters, making dynamic text far more readable.

• const name = 'Sam';
• const msg = `Hello, ${name}!`; // interpolation
• const total = `Sum: ${2 + 3}`; // any expression works
• const html = `<div>
• <p>Multi-line</p>
• </div>`; // no concatenation needed

5Destructuring, Spread, and Rest

Destructuring unpacks values from arrays and objects into distinct variables in one line. The spread operator (...) expands an iterable into individual elements, and the rest parameter gathers remaining arguments into an array. Together they make combining and extracting data concise and readable.

• const [first, second] = [10, 20]; // array destructuring
• const { name, age } = user; // object destructuring
• const merged = [...arr1, ...arr2]; // spread to combine arrays
• const copy = { ...original, active: true }; // spread with override
• function sum(...nums) { return nums.reduce((a, b) => a + b); } // rest

const { theme = 'light', size = 'md' } = options;
function greet({ name = 'friend' } = {}) { return `Hi ${name}`; }

6Classes and Modules

ES6 added class syntax as cleaner sugar over JavaScript's prototype system, giving familiar constructor, method, and inheritance keywords. It also introduced native modules: import and export let you split code across files with explicit dependencies, replacing ad hoc global scripts and older module formats.

• class Animal {
• constructor(name) { this.name = name; }
• speak() { return `${this.name} makes a sound`; }
• }
• class Dog extends Animal { speak() { return `${this.name} barks`; } }
• // modules
• export function helper() {} // file a.js
• import { helper } from './a.js'; // file b.js

7Other Useful ES6 Additions

Beyond the headline features, ES6 shipped several smaller additions that show up constantly in modern code and are worth recognising.

• Default parameters: function f(x = 10) {} — cleaner than checking for undefined.
• Promises: native async handling that async/await later built on.
• for...of: iterate values of arrays, strings, maps, and sets directly.
• Map and Set: proper collection types with keys of any type and unique values.
• Object shorthand: { name } instead of { name: name } when the key matches the variable.

8Best Practices

Adopting ES6 well is about using each feature where it genuinely improves clarity, not scattering new syntax everywhere.

• Prefer const, then let; avoid var in new code entirely.
• Use arrow functions for callbacks, but regular functions for object methods needing this.
• Reach for template literals over string concatenation for readability.
• Use destructuring to unpack function parameters and API responses cleanly.
• Structure projects with ES6 modules rather than global scripts.

9Key Takeaways

ES6 mastery comes down to a handful of features you will use every day.

• let and const bring block scoping and replace var.
• Arrow functions are concise and inherit this from their surroundings.
• Template literals interpolate expressions and span multiple lines.
• Destructuring, spread, and rest simplify working with arrays and objects.
• Classes and modules give structure to modern JavaScript codebases.

10Frequently Asked Questions

Q: What is the difference between let, const, and var? A: var is function-scoped and hoisted, which leads to subtle bugs. let and const are block-scoped and behave more predictably. const cannot be reassigned after initialisation, while let can. Use const by default, let when you need reassignment, and avoid var in new code.

Q: When should I not use an arrow function? A: Avoid arrow functions where you need a dynamic this — such as object methods that reference the object, or event handlers relying on the element as this. Arrow functions inherit this from their surrounding scope and cannot be used as constructors, so use regular functions in those cases.

Q: Is ES6 still relevant in 2026? A: Absolutely. ES6 defined the modern JavaScript baseline, and every feature it introduced — let/const, arrow functions, destructuring, modules, classes — is standard in current codebases and fully supported across browsers and Node. Newer versions add to it rather than replace it.

Q: What is the difference between spread and rest? A: They share the ... syntax but do opposite things. Spread expands an array or object into individual elements, useful for copying or combining. Rest collects multiple elements into a single array, typically to gather remaining function arguments or destructured properties.