ES6 (ES2015)

By the end of this lesson, you will be able to recognise and use core ES6 (ES2015) features—let, const, arrow functions, template literals, destructuring, classes, and modules—to write clearer, more modern JavaScript.

What it is

ES6, officially called ES2015, was a major update to JavaScript that modernised the language. It introduced block-scoped variables, shorter function syntax, classes, modules, template literals, destructuring, and many other features that made JavaScript easier to read and maintain.

The mental model is simple: ES6 keeps JavaScript’s prototype-based object system, but gives developers a more expressive and predictable syntax. Instead of relying on awkward patterns, you can write code that looks closer to how you think about data and behaviour.

Related terms include ECMAScript, the language standard; transpilation, converting modern JavaScript into older JavaScript; Babel, a common transpiler; and polyfill, code that adds missing features to older environments.

Why it matters

• It reduces bugs by making variable scope clearer with let and const.
• It makes callbacks and small functions easier to write with arrow functions.
• It improves readability with template literals and destructuring.
• It gives JavaScript a familiar class syntax for organising objects.
• It supports modules, helping you split large programs into reusable files.

Syntax or steps

Start with variables. Use const when a binding should not be reassigned, and let when it should change.

let count = 0;
const MAX = 10;
count = count + 1;

Use arrow functions for concise callbacks.

const double = x => x * 2;
const add = (a, b) => a + b;

Use template literals to build strings.

const name = 'Ada';
const message = `Hello, ${name}!`;

Use destructuring to pull values out of objects or arrays.

const user = { name: 'Grace', age: 45 };
const { name, age } = user;

const numbers = [1, 2, 3];
const [first, second] = numbers;

Use classes to define reusable object shapes.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    return `${this.name} makes a sound.`;
  }
}

Use modules to share code between files.

export const pi = 3.14;

import { pi } from './math.js';

Example

const users = [
  { name: 'Ada', age: 36 },
  { name: 'Grace', age: 45 },
  { name: 'Alan', age: 41 }
];

const formatUser = ({ name, age }) => `${name} is ${age} years old`;

const adults = users
  .filter(user => user.age >= 18)
  .map(formatUser);

class Team {
  constructor(name, members) {
    this.name = name;
    this.members = [...members];
  }

  summary() {
    return `${this.name}: ${this.members.length} members`;
  }
}

const team = new Team('Engineering', adults);
const [first, ...others] = team.members;

console.log(team.summary());
console.log(first);
console.log(others.join(', '));

This example uses several ES6 features together. The users array is created with const. The formatUser function is an arrow function that uses object destructuring and a template literal. The filter and map methods use concise callbacks. The Team class uses a constructor and a method. The spread operator ... copies the members array. Finally, array destructuring extracts the first member and the remaining members.

Common mistakes

• Using var when let or const would be safer. Fix: prefer const, then use let only when reassignment is needed.
• Assuming const makes objects immutable. Fix: const prevents reassigning the variable, but object properties can still change.
• Using arrow functions for object methods when this must refer to the object. Fix: use a regular function or a class method.
• Forgetting that browser modules need <script type="module"> or a bundler. Fix: use the correct script type or build tool.

When to use it

ES6 is appropriate for almost all modern JavaScript projects. Compare it with older ES5 patterns:

Use ES6 when your environment supports it or when you can transpile it. Use ES5 only when you must support very old browsers without a build step.

Practice

1. Guided exercise: create an array of products, each with name and price. Use const, an arrow function, destructuring, and a template literal to print each product’s name and price. Expected output: lines such as Laptop costs 999.
2. Challenge: create a Cart class with an array of items. Add a method that uses the spread operator to return a new cart with an extra item. Hint: do not mutate the original array if you want predictable behaviour.

Quick check

Question: What is the difference between let and const?

Answer: Both are block-scoped. let allows reassignment, while const does not allow the variable binding to be reassigned, though object properties can still be changed.

Summary

ES6 modernised JavaScript by adding clearer syntax and better tools for scope, functions, objects, and modules. The transferable idea is that ES6 reduces accidental complexity, making code easier to read, reason about, and maintain.