10 Tính Năng ES6 Mà Mọi Lập Trình Viên Cần Biết

ECMAScript 6 (ES6), hay còn gọi là ECMAScript 2015, là một bản cập nhật lớn cho JavaScript, mang đến nhiều tính năng mới giúp viết code hiệu quả hơn, dễ bảo trì hơn và hiện đại hơn. Nếu bạn vẫn đang sử dụng JavaScript theo cách cũ, thì đã đến lúc cập nhật kiến thức của mình. Bài viết này sẽ điểm qua 10 tính năng ES6 quan trọng mà mọi lập trình viên JavaScript nên nắm vững.

1. let và const

Trước ES6, chúng ta chỉ có var để khai báo biến. let và const khắc phục những hạn chế của var bằng cách giới thiệu phạm vi khối (block scope).

• let: Khai báo biến có phạm vi khối. Giá trị của biến có thể thay đổi.
• const: Khai báo hằng số có phạm vi khối. Giá trị của hằng số không thể thay đổi sau khi được gán.

let name = "John Doe";
name = "Jane Doe"; // Được phép

const age = 30;
age = 31; // Báo lỗi

Sử dụng let và const giúp tránh các lỗi do phạm vi biến gây ra và làm code dễ đọc hơn.

2. Arrow Functions

Arrow functions cung cấp cú pháp ngắn gọn hơn cho việc định nghĩa hàm.

// Hàm truyền thống
function add(x, y) {
  return x + y;
}

// Arrow function
const add = (x, y) => x + y;

Arrow functions cũng có cách xử lý this khác với hàm truyền thống, giúp tránh những vấn đề phức tạp liên quan đến this trong các ngữ cảnh khác nhau.

3. Template Literals

Template literals cho phép bạn tạo chuỗi dễ dàng hơn bằng cách sử dụng backticks (`) và cho phép nhúng biểu thức JavaScript trực tiếp vào chuỗi.

const name = "John";
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`;

4. Destructuring

Destructuring cho phép bạn gán giá trị từ mảng hoặc đối tượng vào các biến riêng biệt một cách ngắn gọn.

const arr = [1, 2, 3];
const [a, b, c] = arr; // a = 1, b = 2, c = 3

const obj = { name: "John", age: 30 };
const { name, age } = obj; // name = "John", age = 30

5. Default Parameters

Cho phép bạn đặt giá trị mặc định cho tham số hàm.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, Guest!
greet("John"); // Hello, John!

6. Rest and Spread Operators

• Rest operator (...): Thu thập nhiều phần tử thành một mảng.
• Spread operator (...): Phân tách mảng hoặc đối tượng thành các phần tử riêng lẻ.

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

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

7. Classes

ES6 giới thiệu cú pháp class giúp định nghĩa class và đối tượng dễ hiểu hơn.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

8. Modules

ES6 hỗ trợ import và export module, giúp quản lý code tốt hơn và tái sử dụng code dễ dàng hơn.

9. Promises

Promises cung cấp một cách tốt hơn để xử lý các hoạt động bất đồng bộ.

const promise = new Promise((resolve, reject) => {
  // ...some asynchronous operation...
  resolve("Success!");
});

promise.then(result => console.log(result)).catch(error => console.error(error));

10. Map, Set, WeakMap, WeakSet

Các cấu trúc dữ liệu mới này bổ sung thêm các công cụ mạnh mẽ cho việc xử lý dữ liệu. Map và Set cung cấp các cách thức hiệu quả hơn để lưu trữ và truy xuất dữ liệu so với đối tượng và mảng. WeakMap và WeakSet có cơ chế garbage collection khác biệt, hữu ích trong một số trường hợp cụ thể.

Đây chỉ là 10 trong số rất nhiều tính năng tuyệt vời của ES6. Việc nắm vững những tính năng này sẽ giúp bạn viết code JavaScript hiện đại, hiệu quả và dễ bảo trì hơn. Hãy bắt đầu khám phá và áp dụng chúng vào các dự án của bạn ngay hôm nay!