Essential ES6+ JavaScript Features Every Developer Should Be Using

Why Modern JavaScript Syntax Matters

ES6 (ECMAScript 2015) and the yearly releases that followed transformed JavaScript from a scripting language into a mature, expressive programming language. If you're still writing JavaScript the ES5 way — with var, function keywords everywhere, and manual null checks — this guide will modernize your code immediately.

1. let and const (Goodbye, var)

var is function-scoped and hoisted in ways that cause confusing bugs. Replace it entirely:

• const — for values that won't be reassigned (use by default)
• let — for values that will change (loops, counters, reassigned variables)

const API_URL = 'https://api.example.com';
let attempts = 0;

2. Arrow Functions

Arrow functions are concise and don't bind their own this — solving a classic JavaScript headache:

// Old way
const double = function(n) { return n * 2; };

// Arrow function
const double = n => n * 2;

// Multi-line
const greet = (name) => {
  const message = `Hello, ${name}!`;
  return message;
};

3. Template Literals

No more string concatenation with +. Template literals use backticks and ${} for embedded expressions:

const name = 'Alice';
const age = 30;
console.log(`${name} is ${age} years old.`);

4. Destructuring Assignment

Extract values from arrays and objects cleanly:

// Object destructuring
const { name, email, role = 'user' } = currentUser;

// Array destructuring
const [first, second, ...rest] = items;

// In function parameters
function greetUser({ name, age }) {
  return `Hi ${name}, you are ${age}.`;
}

5. Spread and Rest Operators

The ... operator serves two related purposes:

// Spread: expand an array/object
const merged = { ...defaults, ...overrides };
const combined = [...arr1, ...arr2];

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

6. Optional Chaining (?.)

Access deeply nested properties without crashing if something is null or undefined:

// Without optional chaining (verbose and error-prone)
const city = user && user.address && user.address.city;

// With optional chaining
const city = user?.address?.city;

7. Nullish Coalescing (??)

Provide a default value only when something is null or undefined (unlike ||, which also triggers on 0 or empty string):

const count = userInput ?? 0;  // Only falls back if null/undefined
const label = title ?? 'Untitled';

8. Modules (import/export)

Native JavaScript modules keep your code organized and maintainable:

// utils.js
export const formatDate = (date) => date.toLocaleDateString();
export default function calculateTotal(items) { ... }

// main.js
import calculateTotal, { formatDate } from './utils.js';

Quick Reference

Feature	Introduced	Key Benefit
let / const	ES6	Block scoping, no var hoisting bugs
Arrow functions	ES6	Concise syntax, lexical this
Template literals	ES6	Readable string interpolation
Destructuring	ES6	Clean value extraction
Spread / Rest	ES6	Flexible arrays and objects
Optional chaining	ES2020	Safe property access
Nullish coalescing	ES2020	Precise default values
Modules	ES6	Native code organization

Start Using These Today

These features aren't just newer syntax — they genuinely make code safer, shorter, and easier to read. If you're working in any modern JavaScript environment (Node.js 14+, any modern browser, any bundler), all of these are fully available. Adopt them incrementally: start with const/let, then template literals, then work your way through the list.