JavaScript · ES2015

ES6 Interactive Hub

Cột mốc lớn nhất của JavaScript hiện đại: let/const, arrow function, class, destructuring, spread/rest, template literals, ES modules, promises — nền tảng của mọi codebase ngày nay.

Kinh Nghiệm
0 XP
Hoàn thành khóa học0%

Let & Const

Chuyên đề cốt lõi

Dễ5 phút

💡 Khái niệm tóm tắt

Thay thế cho var trong khai báo biến, giải quyết bài toán Scope (phạm vi biến) và Re-declaration (khai báo đè).

🤔 Tại sao cần tính năng này?

Trong ES5, "var" có Function scope hoặc Global scope dẫn đến việc rò rỉ biến ra ngoài khối lệnh (Block) hoặc gây lỗi hoisting khó lường. "let" và "const" mang lại Block Scope (chỉ có giá trị trong dấu ngoặc nhọn chứa nó).

ES5 (Kiểu Cũ)Không khuyến khích
// Khai báo với var
var x = 10;
if (true) {
    var x = 20; // Khai báo đè và ghi đè giá trị ngoài block!
    console.log("Trong block:", x); // 20
}
console.log("Ngoài block:", x); // 20 (bị ảnh hưởng!)
ES6 (Hiện Đại)Tối ưu & Khuyên dùng
// Khai báo với let & const
let y = 10;
const PI = 3.14159;

if (true) {
    let y = 20; // Biến y này cô lập trong block hiện tại
    console.log("Trong block let:", y); // 20
    // PI = 3.14; // Uncaught TypeError: Assignment to constant variable.
}
console.log("Ngoài block let:", y); // 10 (không bị ghi đè!)
Bạn đã nắm chắc? Thử chạy code thật hoặc làm trắc nghiệm!

Bảng Tra Cứu Nhanh ES6

Xem nhanh cấu trúc + copy snippet

Let & Const

Thay thế cho var trong khai báo biến, giải quyết bài toán Scope (phạm vi biến) và Re-declaration (khai báo đè).

let y = 10;
const PI = 3.14159;
if (true) {
...
Arrow Functions

Cú pháp viết hàm siêu ngắn gọn sử dụng dấu "=>" và tự động ràng buộc (bind) ngữ cảnh từ khóa "this".

const numbers = [1, 2, 3];
const doubles = numbers.map(n => n * 2); // Tự động return
console.log(doubles); // [2, 4, 6]
...
Template Literals

Khởi tạo chuỗi động bằng ký tự backtick (`) giúp chèn biến bằng cú pháp ${} và xuống dòng tự nhiên không cần ghép chuỗi.

const name = "An";
const job = "Lập trình viên";
const greet = `Chào ${name}, tôi là ${job}.
...
Destructuring

Trích xuất nhanh các thuộc tính từ Object hoặc phần tử từ Array vào các biến riêng lẻ bằng cú pháp ngắn gọn độc đáo.

const user = { name: "Bảo", age: 25, city: "Đà Nẵng" };
const { name, age, city } = user;
console.log(name, age, city);
...
Spread & Rest

Toán tử ba dấu chấm "..." thần thánh giúp sao chép/gộp mảng, đối tượng (Spread) hoặc thu gom danh sách tham số (Rest).

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

Cung cấp cú pháp hướng đối tượng (OOP) sạch sẽ, thay thế cho cách khởi tạo hàm Prototype rườm rà của ES5.

class Car {
    constructor(brand) {
        this.brand = brand;
...
Promises

Cơ chế xử lý các tác vụ bất đồng bộ (Asynchronous) tránh rơi vào tình trạng "Callback Hell" đáng sợ của ES5.

getData()
    .then(user => getPosts(user.id))
    .then(posts => getComments(posts[0].id))
...
ES Modules

Hệ thống Module chính thức (Native Modules) của JavaScript sử dụng "export" và "import" để chia nhỏ file mã nguồn.

export const KEY = "SECRET123";
export function add(a, b) {
    return a + b;
...