Tính năng ES6+ trong JavaScript

ES6 (ES2015) đã mang đến nhiều tính năng mới giúp JavaScript hiện đại và dễ viết hơn. Cùng tìm hiểu các tính năng quan trọng nhất.

1. Arrow Functions

Cú pháp ngắn gọn hơn cho hàm, tự động bind this:

// Cách cũ
const add = function(a, b) {
    return a + b;
};

// Arrow function
const add = (a, b) => a + b;

// Với một tham số
const square = x => x * x;

// Với nhiều dòng
const greet = name => {
    const message = `Hello ${name}!`;
    return message;
};

2. Destructuring

Trích xuất giá trị từ array hoặc object một cách dễ dàng:

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest);  // [3, 4, 5]

// Object destructuring
const user = { name: 'Huy', age: 22, city: 'Hanoi' };
const { name, age } = user;
console.log(name); // 'Huy'

// Đổi tên biến
const { name: userName } = user;
console.log(userName); // 'Huy'

3. Spread Operator (...)

Mở rộng array/object:

// Sao chép array
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// Gộp array
const combined = [...arr1, ...arr2];

// Sao chép object
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

// Truyền arguments
const numbers = [1, 2, 3];
Math.max(...numbers); // 3

4. Template Literals

Chuỗi với biến và biểu thức nhúng:

const name = 'Huy';
const age = 22;

// Cách cũ
const message = 'My name is ' + name + ' and I am ' + age + ' years old';

// Template literal
const message = `My name is ${name} and I am ${age} years old`;

// Nhiều dòng
const html = `
    <div>
        <h1>${name}</h1>
        <p>Age: ${age}</p>
    </div>
`;

5. Default Parameters

Giá trị mặc định cho tham số:

function greet(name = 'Guest', greeting = 'Hello') {
    return `${greeting}, ${name}!`;
}

greet(); // "Hello, Guest!"
greet('Huy'); // "Hello, Huy!"
greet('Huy', 'Hi'); // "Hi, Huy!"

6. Let và Const

Block-scoped variables thay vì function-scoped:

// let - có thể gán lại
let count = 0;
count = 1; // OK

// const - không thể gán lại
const PI = 3.14159;
// PI = 3.14; // Error!

// Block scope
if (true) {
    let x = 10;
    const y = 20;
}
// console.log(x); // Error! x is not defined

Kết luận

ES6+ đã làm JavaScript mạnh mẽ và dễ viết hơn rất nhiều. Các tính năng này giờ đã là chuẩn trong development hiện đại. Hãy thực hành thường xuyên để thành thạo!