ES6 (ECMAScript 2015) introduced several new features and syntax improvements to JavaScript. Here’s a summary of the most important ES6 syntax with examples:
1. let and const Keywords
ES6 introduced let and const for block-scoped variables.
-
let: Block-scoped variable that can be updated but not re-declared in the same scope. -
const: Block-scoped constant, cannot be updated or re-declared.
// let example
let age = 25;
age = 30; // allowed
// const example
const name = 'John';
name = 'Doe'; // error: Assignment to constant variable
2. Arrow Functions (=>)
Arrow functions provide a shorter syntax for writing functions and do not bind their own this.
// Regular function
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => a + b; // implicit return
3. Template Literals
Template literals allow for embedding expressions and multi-line strings, using backticks (`).
const name = 'Alice';
const greeting = `Hello, ${name}!`; // string interpolation
console.log(greeting); // Hello, Alice!
4. Destructuring Assignment
Destructuring allows you to unpack values from arrays or properties from objects into distinct variables.
- Array Destructuring:
const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first); // 1
console.log(second); // 2
- Object Destructuring:
const person = { name: 'John', age: 25 };
const { name, age } = person;
console.log(name); // John
console.log(age); // 25
5. Default Parameters
Functions can have default parameter values.
const greet = (name = 'Guest') => `Hello, ${name}!`;
console.log(greet()); // Hello, Guest!
console.log(greet('Alice')); // Hello, Alice!
6. Rest Parameters (...)
The rest operator (...) allows functions to accept an indefinite number of arguments as an array.
const sum = (...numbers) => numbers.reduce((acc, num) => acc + num, 0);
console.log(sum(1, 2, 3, 4)); // 10
7. Spread Operator (...)
The spread operator (...) allows an iterable (e.g., array, string) to be expanded into individual elements.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]
8. Classes
ES6 introduced the class syntax to define constructors and methods.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}.`);
}
}
const john = new Person('John', 25);
john.greet(); // Hello, my name is John.
9. Modules (Export & Import)
ES6 provides native support for modules with export and import.
- Exporting:
// file: math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
- Importing:
// file: app.js
import { add, subtract } from './math';
console.log(add(2, 3)); // 5
10. Promises
Promises represent the eventual completion (or failure) of an asynchronous operation.
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data received');
}, 2000);
});
};
fetchData().then(data => console.log(data)); // Data received (after 2 seconds)
11. For-of Loop
The for-of loop allows you to iterate over iterable objects like arrays, strings, etc.
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
console.log(fruit);
}
// apple
// banana
// cherry
12. Map and Set
ES6 introduced new collection types: Map (for key-value pairs) and Set (for unique values).
- Map:
const map = new Map();
map.set('name', 'John');
map.set('age', 25);
console.log(map.get('name')); // John
- Set:
const set = new Set([1, 2, 3, 3]); // duplicates are ignored
set.add(4);
console.log(set.has(3)); // true
console.log(set.size); // 4
These ES6 features significantly improve the readability, maintainability, and functionality of JavaScript code.
Top comments (0)