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 |