MSDN Blog

1. Arrow Functions

Arrow functions provide a more concise syntax for writing function expressions. They also lexically bind `this`, avoiding common pitfalls associated with the `this` keyword in traditional functions.

const square = x => x * x;

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
// doubled will be [2, 4, 6]

2. Template Literals

Template literals, introduced in ES6, offer a cleaner way to create strings, especially when dealing with interpolation and multi-line strings. They use backticks (`) instead of single or double quotes.

const name = "Alice";
const age = 30;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

// Multi-line example
const multiLine = `This is a
multi-line
string.`;

3. Destructuring Assignment

Destructuring assignment allows you to unpack values from arrays or properties from objects into distinct variables. This simplifies data extraction and assignment.

Array Destructuring

const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors;

// firstColor is "red", secondColor is "green"

Object Destructuring

const person = { name: "Bob", age: 25 };
const { name, age } = person;

// name is "Bob", age is 25

// With renaming
const { name: personName, age: personAge } = person;
// personName is "Bob", personAge is 25

4. The Spread and Rest Operators

The spread operator (...) expands an iterable (like an array or string) into individual elements, while the rest operator (also ...) collects multiple elements into a single array.

Spread Operator

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
// combined is [1, 2, 3, 4]

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const mergedObj = { ...obj1, ...obj2 };
// mergedObj is { a: 1, b: 2 }

Rest Operator

function sum(...numbers) {
    return numbers.reduce(acc => acc + curr, 0);
}
// sum(1, 2, 3) would call reduce with [1, 2, 3]

const [first, ...restOfArray] = [1, 2, 3, 4];
// first is 1, restOfArray is [2, 3, 4]

5. Promises and Async/Await

Asynchronous operations are a cornerstone of modern web development. Promises provide a cleaner way to handle asynchronous code than traditional callbacks, and async/await further simplifies this by allowing you to write asynchronous code that looks synchronous.

// Using Promises
function fetchData(url) {
    return new Promise(resolve => {
        setTimeout(() => resolve("Data from " + url), 1000);
    });
}

fetchData("/api/users")
    .then(data => {
        console.log(data);
    }).catch(error => {
        console.error("Error fetching data", error);
    });

// Using Async/Await
async function getUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        return data;
    } catch error {
        console.error("Failed to get user data", error);
    }
}

// Call the async function
const userData = await getUserData(123);
if (userData) {
    console.log(userData);
}