JavaScript ES6+: 10 tính năng hiện đại bạn bắt buộc phải biết

Từ phiên bản ES6 (ECMAScript 2015) trở đi, JavaScript đã "lột xác" với hàng loạt cú pháp mới giúp code gọn hơn, an toàn hơn. Nếu bạn vẫn đang viết var và function ở mọi nơi, đã đến lúc cập nhật. Dưới đây là 10 tính năng bạn sẽ gặp trong mọi dự án hiện đại.

1. let và const

Thay var bằng const cho giá trị không gán lại, và let cho giá trị thay đổi. Cả hai đều có phạm vi khối (block scope), tránh được rất nhiều lỗi khó hiểu.

const PI = 3.14;
let tong = 0;
for (let i = 1; i <= 10; i++) {
  tong += i;
}

2. Arrow function

// Cách cũ
const binhPhuong = function (x) { return x * x; };
// ES6
const binhPhuong2 = x => x * x;

3. Template literal

Dùng dấu backtick để nối chuỗi và chèn biến dễ dàng, kể cả xuống dòng.

const ten = "Lan";
console.log(`Xin chào ${ten}, hôm nay là ${new Date().toLocaleDateString("vi-VN")}`);

4. Destructuring

const user = { ten: "Nam", tuoi: 25, thanhPho: "Hà Nội" };
const { ten, thanhPho } = user;

const [dau, thuHai] = [10, 20, 30];

5. Spread và Rest (...)

const a = [1, 2];
const b = [...a, 3, 4];           // [1, 2, 3, 4]
const capNhat = { ...user, tuoi: 26 };

function tinhTong(...so) {
  return so.reduce((t, x) => t + x, 0);
}

6. Tham số mặc định

function chao(ten = "bạn") {
  return `Chào ${ten}!`;
}

7. Các hàm mảng: map, filter, reduce

Ba hàm này thay thế phần lớn vòng lặp for truyền thống và giúp code dễ đọc hơn hẳn.

const gia = [100, 250, 80, 400];
const coThue = gia.map(g => g * 1.1);
const dat = gia.filter(g => g > 200);
const tong = gia.reduce((t, g) => t + g, 0);

8. Module: import / export

// math.js
export const cong = (a, b) => a + b;

// main.js
import { cong } from "./math.js";

9. Promise và async/await

Xử lý bất đồng bộ (gọi API, đọc file…) trở nên dễ đọc như code tuần tự:

async function layBaiViet() {
  try {
    const res = await fetch("https://api.example.com/posts");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error("Lỗi:", err);
  }
}

10. Optional chaining (?.) và Nullish coalescing (??)

const thanhPho = user?.diaChi?.thanhPho ?? "Chưa cập nhật";

Không còn lỗi Cannot read properties of undefined khi dữ liệu thiếu trường.

Lời khuyên

Đừng học thuộc lòng. Hãy mở DevTools (F12), chọn tab Console và gõ thử từng ví dụ ở trên. Sau đó viết lại một đoạn code cũ của bạn bằng cú pháp mới, đó là cách nhanh nhất để những tính năng này trở thành phản xạ.