What is ES6+?
ES6, also known as ECMAScript 2015, introduced many new features to JavaScript. Since then, JavaScript has continued to evolve with many new features in ES7, ES8, and beyond. In this tutorial, we will cover some of the most important ES6+ features.
1. Let & Const
ES6 introduced two new ways to declare variables: `let` and `const`. These are block-scoped, unlike `var`, which is function-scoped.
let name = "John"; // Reassignable
const age = 25; // Not reassignable
2. Arrow Functions
Arrow functions provide a shorter syntax for writing functions. They also inherit the `this` value from the surrounding context.
const greet = (name) => `Hello, ${name}!`;
console.log(greet("Alice"));
3. Template Literals
Template literals allow for multi-line strings and embedded expressions.
let name = "Alice";
let greeting = `Hello, ${name}! Welcome to ES6.`;
console.log(greeting);
4. Destructuring
Destructuring allows you to extract values from arrays and objects into variables.
let [first, second] = [10, 20]; // Array destructuring
console.log(first, second); // 10 20
let person = { name: "Alice", age: 25 };
let { name, age } = person; // Object destructuring
console.log(name, age); // Alice 25
5. Default Parameters
Default parameters allow you to set default values for function arguments.
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
console.log(greet()); // Hello, Guest!
console.log(greet("John")); // Hello, John!
6. Spread & Rest Operators
The spread operator (`...`) can be used to expand an array or object. The rest operator (`...`) can collect multiple values into a single array or object.
// Spread
let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];
console.log(newArr); // [1, 2, 3, 4, 5]
// Rest
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6
Interactive Example
Try using ES6+ features directly below: