JavaScript · ES2021

ES12 Interactive Hub — ECMAScript 2021

Logical assignment (||= &&= ??=), String.replaceAll, Promise.any, numeric separator, WeakRef + FinalizationRegistry — tinh chỉnh syntax + quản lý memory nâng cao.

Kinh Nghiệm

0 XP

Hoàn thành khóa học0%

Logical assignment (||=, &&=, ??=)

Chuyên đề cốt lõi

Trung bình5 phút

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

Kết hợp toán tử logic với phép gán, viết x ??= y thay vì x = x ?? y — gọn hơn và hiệu quả hơn.

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

Pattern "if value is falsy/nullish then set default" rất phổ biến nhưng cú pháp x = x || y dài và đánh giá lại x. Logical assignment chỉ gán khi cần thiết, tối ưu hơn về mặt ngữ nghĩa.

Trước (cách viết cũ)Verbose / Cồng kềnh

// Trước ES12 — gán mặc định kiểu cũ
var x = null;
x = x || 10;          // x = 10 (nhưng 0/'' cũng bị thay)
x = x !== null && x !== undefined ? x : 10;  // chuẩn nhưng dài

// Pattern thường gặp
function setDefault(opts) {
    opts.theme = opts.theme || 'light';
    opts.retries = opts.retries === undefined ? 3 : opts.retries;
    return opts;
}

ES12 (Hiện đại)Tối ưu & Khuyên dùng

// ES12 — 3 toán tử mới
let x = null;
x ??= 10;        // x = 10 (vì null/undefined)
x ??= 20;        // x vẫn = 10 (không gán)

let y = 0;
y ||= 5;         // y = 5 (0 là falsy)

let cfg = { a: 1, b: 'ok' };
cfg.b &&= cfg.b.toUpperCase(); // chỉ gán khi b truthy
console.log(cfg); // { a: 1, b: 'OK' }

// Pattern set default nay cực gọn
function setDefault(opts) {
    opts.theme ??= 'light';
    opts.retries ??= 3;
    return opts;
}

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 ES12

Xem nhanh cấu trúc + copy snippet

Logical assignment (||=, &&=, ??=)

Kết hợp toán tử logic với phép gán, viết x ??= y thay vì x = x ?? y — gọn hơn và hiệu quả hơn.

let x = null;
x ??= 10;        // x = 10 (vì null/undefined)
x ??= 20;        // x vẫn = 10 (không gán)
...

String.replaceAll

Phương thức thay thế TẤT CẢ xuất hiện của một chuỗi mà không cần dùng regex global.

const str = "a-b-c-d";
console.log(str.replaceAll('-', '_')); // 'a_b_c_d'
const s = "1.2.3";
...

Promise.any

Resolve khi promise ĐẦU TIÊN thành công. Chỉ reject (với AggregateError) khi TẤT CẢ promise đều fail.

try {
    const data = await Promise.any([
        fetch('https://cdn1.../data'),
...

Numeric separator (_)

Cho phép dùng dấu gạch dưới "_" làm dấu ngăn cách trong số literal để dễ đọc — KHÔNG ảnh hưởng giá trị.

const billion = 1_000_000_000;
const bytes = 0xFF_FF_FF_FF;
const binary = 0b1010_0001_1000_0101;
...

WeakRef & FinalizationRegistry

Bộ đôi quản lý bộ nhớ nâng cao: WeakRef tham chiếu YẾU (không ngăn GC), FinalizationRegistry chạy callback sau khi object bị GC.

class WeakCache {
    constructor() {
        this.map = new Map(); // key → WeakRef<value>
...