JavaScript ES6+ Features Every Developer Should Know

ES6 (ECMAScript 2015) and later versions introduced features that transformed how we write JavaScript. This guide covers the ones you'll use daily.

Arrow Functions

Concise syntax and lexical this binding:

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

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

// With body (return needed)
const multiply = (a, b) => {
  return a * b;
};

// No arguments
const logSomething = () => console.log('Hello');

// Single argument (parentheses optional)
const double = x => x * 2;

Arrow functions don't have their own this — they inherit it from the enclosing scope.

Destructuring

Extract values from objects and arrays:

// Object destructuring
const user = { name: 'Alice', age: 25, city: 'NYC' };
const { name, age } = user;

// With renaming
const { name: userName, age: userAge } = user;

// Array destructuring
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;

// Skip elements
const [, , third] = colors;

// Function parameters
function greet({ name, city }) {
  return `Hello ${name} from ${city}`;
}

Spread and Rest Operators

Same syntax, different contexts:

// Spread in arrays
const a = [1, 2, 3];
const b = [4, 5, 6];
const combined = [...a, ...b];  // [1, 2, 3, 4, 5, 6]

// Spread in objects
const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };  // { x: 1, y: 2, z: 3 }

// Rest in function parameters
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4);  // 10

// Rest in destructuring
const [first, ...rest] = [1, 2, 3, 4];
// first = 1, rest = [2, 3, 4]

Template Literals

String interpolation and multi-line strings:

const name = 'Alice';
const age = 25;

// String interpolation
const greeting = `Hello, ${name}! You are ${age}.`;

// Multi-line strings
const html = `
  

    
${name}
    
Age: ${age}
  
`;

// Expressions
const price = 99.99;
const message = `Total: $${(price * 1.1).toFixed(2)}`;

Default Parameters

function createUser(name, role = 'user', active = true) {
  return { name, role, active };
}
createUser('Bob');
// { name: 'Bob', role: 'user', active: true }

Object Shorthand

const name = 'Alice';
const age = 25;

// Old way
const user = { name: name, age: age };

// New way (when key and variable name match)
const user = { name, age };

// Method shorthand
const calculator = {
  value: 0,
  add(n) { this.value += n; },
  subtract(n) { this.value -= n; }
};

Modules (Import/Export)

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

// Named exports
import { PI, add } from './math.js';

// Default import
import Calculator from './math.js';

// All exports
import * as math from './math.js';
math.PI;

Async/Await

Cleaner syntax for Promises:

// With Promises
function fetchUser(id) {
  return fetch(`/api/users/${id}`)
    .then(res => res.json())
    .then(user => user.name);
}

// With async/await
async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);
  const user = await res.json();
  return user.name;
}

// Error handling
async function fetchUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('User not found');
    return await res.json();
  } catch (error) {
    console.error('Failed:', error);
  }
}

Optional Chaining and Nullish Coalescing

// Optional chaining (ES2020)
const city = user?.address?.city ?? 'Unknown';

// Before optional chaining
const city = user && user.address && user.address.city;

// Nullish coalescing (ES2020)
const name = user.nickname ?? user.name ?? 'Anonymous';

// Before nullish coalescing
const name = user.nickname || user.name || 'Anonymous';
// Problem: 0 or '' would be treated as falsy

Array Methods: map, filter, reduce

const numbers = [1, 2, 3, 4, 5];

// map - transform each element
const doubled = numbers.map(n => n * 2);

// filter - keep elements matching condition
const evens = numbers.filter(n => n % 2 === 0);

// reduce - accumulate to single value
const sum = numbers.reduce((acc, n) => acc + n, 0);

// Chaining
const result = numbers
  .filter(n => n > 2)
  .map(n => n * 10)
  .reduce((a, b) => a + b, 0);