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