JavaScript ES6+ Features Explained

ES6+ (ES2015 and beyond) introduced powerful features that make JavaScript cleaner, faster, and more modern.

1. let and const (Block-scoped Variables)

let = variable that can be updated
const = variable that cannot be reassigned

Example:

let name = "Alice";
const age = 25;

name = "Bob";    //  OK
// age = 30;     //  Error

2. Arrow Functions (=>)

Arrow functions are shorter and automatically bind this.

Example:

const greet = (name) => {
  return "Hello, " + name;
};

console.log(greet("Liam"));  // Hello, Liam

3. Template Literals (Backticks ``)

Use ${} inside backticks to build strings with variables.

Example:

let item = "book";
let message = `I bought a ${item}.`;
console.log(message);

Output

I bought a book.

4. Default Parameters

Set default values for function parameters.

Example:

function greet(name = "Guest") {
  console.log("Hello, " + name);
}

greet();         // Hello, Guest
greet("Ava");    // Hello, Ava

5. Destructuring (Objects & Arrays)

Extract values from arrays or objects into variables.

Object Example:

const user = { name: "Leo", age: 30 };
const { name, age } = user;
console.log(name); // Leo

Array Example:

const colors = ["red", "blue"];
const [first, second] = colors;
console.log(first); // red

6. Spread (...) and Rest Parameters

Spread: Copy or expand arrays/objects.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2);  // [1, 2, 3, 4]

Rest: Collect multiple arguments into one.

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3));  // 6

7. Object Property Shorthand

Shorter way to assign object properties.

Example:

let name = "Zara";
let user = { name };  // same as { name: name }
console.log(user.name);  // Zara

8. Enhanced Object Literals

Define methods directly inside objects.

let car = {
  brand: "BMW",
  start() {
    console.log("Starting...");
  }
};

car.start();  // Starting...

9. Classes

Use class to define reusable object blueprints.

Example:

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

const p1 = new Person("Mia");
p1.greet();  // Hello, I'm Mia

10. Promises (Async Code Handling)

Handle async tasks like API calls using .then() and .catch().

Example:

let promise = new Promise((resolve, reject) => {
  resolve("Success!");
});

promise.then(msg => console.log(msg));  // Success!

11. Modules (import / export)

Split code into multiple files.

math.js

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

main.js

import { add } from './math.js';
console.log(add(2, 3));  // 5

12. Optional Chaining (?.) and Nullish Coalescing (??)

Optional Chaining:

const user = {};
console.log(user.profile?.name);  // undefined (no error)

Nullish Coalescing:

let username = null;
console.log(username ?? "Guest");  // Guest

Recap: Top ES6+ Features You Should Use

Feature	What It Does
let, const	Safer variable declarations
Arrow Functions	Short, this-bound functions
Template Literals	Easy string formatting
Destructuring	Clean variable extraction
Spread / Rest	Flexible value handling
Classes	OOP-style syntax
Promises	Cleaner async handling
Modules	Better code organization
Optional Chaining / ??	Safer and simpler value checking