Six ES6 Features Every JavaScript Developer Should Know

ES6 JavaScript (also called ES2015) was the biggest update to JavaScript in years. It introduced syntax that made the language far cleaner and more expressive. If you’re learning JavaScript today, you’re already using ES6 — here are the six features you’ll use in virtually every project.

1. Arrow Functions

// Old way
function add(a, b) { return a + b; }

// Arrow function
const add = (a, b) => a + b;

// Great for array methods
const doubled = [1, 2, 3].map(n => n * 2); // [2, 4, 6]

Arrow functions also don’t have their own this, which matters in class methods and callbacks.

2. Destructuring

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first = 1, second = 2, rest = [3, 4, 5]

// Object destructuring
const { name, age, city = "Unknown" } = { name: "Kaikobud", age: 28 };
// city defaults to "Unknown" if not present

// Function parameter destructuring
function greet({ name, role }) {
  console.log(`${name} is a ${role}`);
}

3. Template Literals

const name = "Kaikobud";
const role = "developer";

// Old way
const msg = "Hello, " + name + "! You are a " + role + ".";

// Template literal
const msg = `Hello, ${name}! You are a ${role}.`;

// Multi-line strings
const html = `
  <div class="card">
    <h2>${name}</h2>
  </div>
`;

4. Spread and Rest Operators

// Spread — expand an array or object
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const user = { name: "Kai" };
const fullUser = { ...user, role: "admin" }; // merge objects

// Rest — collect remaining arguments
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

5. let and const

// let — block-scoped, can be reassigned
let count = 0;
count = 1; // OK

// const — block-scoped, cannot be reassigned
const MAX = 100;
// MAX = 200; // Error

Stop using var. Use const by default, let when you need to reassign.

6. Modules (import / export)

// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }

// main.js
import { PI, add } from "./math.js";
import * as math from "./math.js"; // import everything

Conclusion

These six ES6 JavaScript features — arrow functions, destructuring, template literals, spread/rest, let/const, and modules — appear in virtually every modern codebase. If you’re not using them yet, start today. They make your code shorter, clearer, and more enjoyable to write.

Read next: async/await in JavaScript Explained

External resource: MDN — JavaScript Guide