Destructuring JavaScript: đối tượng, mảng, mặc định và rest

Destructuring là so khớp theo hình dạng

Destructuring cho phép bạn viết một mẫu phản chiếu hình dạng của một đối tượng hay mảng, rồi lấy giá trị ra theo tên hoặc vị trí chỉ trong một dòng, giống kiểu Python. Thay vì lấy từng thuộc tính một, bạn mô tả thứ mình muốn và JavaScript trao nó cho bạn.

Hai dạng:

const user = { name: "Ada", age: 36 };
const { name, age } = user;
console.log(name, age);

const scores = [90, 85, 72];
const [first, second, third] = scores;
console.log(first, second, third);

Dấu ngoặc nhọn so khớp đối tượng theo tên thuộc tính. Dấu ngoặc vuông so khớp mảng theo vị trí. Trong cả hai trường hợp, các biến ở vế trái là khai báo mới: bạn không truy cập vào giá trị theo chỉ số, mà đang mô tả một mẫu để tách các phần ra.

Trước khi có destructuring, cùng đoạn code đó trông như thế này:

const name = user.name;
const age = user.age;
const first = scores[0];
const second = scores[1];

Không phải thảm họa, nhưng lặp đi lặp lại khi bạn phải làm vậy ở mọi hàm.

Destructuring đối tượng dùng tên thuộc tính

Với đối tượng, các tên bên trong dấu ngoặc nhọn phải trùng với tên thuộc tính của nguồn. Thứ tự không quan trọng, vì JavaScript tra theo khóa.

const book = {
    title: "The Pragmatic Programmer",
    author: "Hunt & Thomas",
    year: 1999,
};

const { year, title } = book;
console.log(title, year);

Nếu đối tượng không có thuộc tính đó, biến sẽ là undefined, không có lỗi nào:

const book = { title: "Refactoring" };
const { title, author } = book;
console.log(title);
console.log(author);

Hành vi undefined âm thầm này rất đáng nhớ, kẻo lúc 2 giờ sáng bạn ngồi gãi đầu vì gõ nhầm một tên thuộc tính.

Đổi tên biến

Đôi khi tên thuộc tính trên đối tượng không phải là tên bạn muốn đặt cho biến: có thể nó trùng với thứ khác trong phạm vi, hoặc API dùng quy ước đặt tên bạn không thích. Dùng original: newName để gán sang tên khác:

const response = { id: 42, msg: "ok" };
const { id: userId, msg: message } = response;

console.log(userId, message);

Hãy đọc là "lấy thuộc tính id, gọi nó là userId." Tên thuộc tính đứng trước, tên biến mới đứng sau dấu hai chấm. Nó trông như chú thích kiểu trong các ngôn ngữ khác, nhưng không phải.

Giá trị mặc định

Nếu một thuộc tính có thể bị thiếu, hãy đặt giá trị mặc định ngay trong mẫu:

function connect(options) {
    const { host = "localhost", port = 5432, timeout = 5000 } = options;
    console.log(`connecting to ${host}:${port} (timeout ${timeout}ms)`);
}

connect({ host: "db.example.com" });
connect({});

Giá trị mặc định chỉ được dùng khi giá trị là undefined. null, 0 và "" đều giữ nguyên:

const { retries = 3 } = { retries: null };
console.log(retries);

Điểm này hay làm người ta vấp. Nếu muốn null cũng kích hoạt giá trị mặc định, bạn cần kiểm tra rõ ràng, hoặc dùng toán tử nullish coalescing ?? sau khi destructuring.

Bạn có thể kết hợp giá trị mặc định với đổi tên:

const { host: hostname = "localhost" } = {};
console.log(hostname);

Destructuring mảng dùng vị trí

Mảng không có tên, chỉ có chỉ số, nên mẫu so khớp theo vị trí. Dùng dấu phẩy để bỏ qua những phần tử bạn không cần:

const coords = [40.7, -74.0, 10];
const [lat, lon] = coords;
console.log(lat, lon);

const [, , altitude] = coords;
console.log(altitude);

Hai dấu phẩy đầu có nghĩa là "bỏ qua chỉ số 0 và 1." Nhìn hơi rối mắt, nhưng tiện khi bạn chỉ cần một giá trị ở giữa.

Destructuring mảng tỏa sáng với các hàm trả về tuple:

function minMax(nums) {
    return [Math.min(...nums), Math.max(...nums)];
}

const [low, high] = minMax([5, 2, 9, 1, 7]);
console.log(low, high);

Mẫu này xuất hiện khắp nơi trong React hook: const [count, setCount] = useState(0).

Mẫu rest: gom phần còn lại

Bên trong một mẫu destructuring, ...name gom mọi thứ chưa được so khớp theo tên hoặc vị trí vào một biến mới.

Với mảng, rest lấy phần đuôi:

const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head);
console.log(tail);

Với đối tượng, rest lấy mọi thuộc tính chưa được nêu tên:

const user = { id: 1, name: "Ada", email: "ada@example.com", role: "admin" };
const { id, ...rest } = user;

console.log(id);
console.log(rest);

Đây là cách viết quen thuộc để bỏ một trường khỏi đối tượng mà không thay đổi đối tượng gốc: rest là một đối tượng mới chứa mọi thứ trừ id.

Rest phải là phần tử cuối cùng trong mẫu. const [...init, last] là lỗi cú pháp.

Destructuring lồng nhau

Các mẫu có thể lồng nhau. Nếu một thuộc tính cũng là đối tượng hay mảng, bạn có thể destructuring vào bên trong nó ngay trong cùng một biểu thức:

const response = {
    status: 200,
    data: {
        user: { name: "Ada", age: 36 },
        tags: ["admin", "beta"],
    },
};

const {
    status,
    data: {
        user: { name },
        tags: [primaryTag],
    },
} = response;

console.log(status, name, primaryTag);

Rất mạnh, nhưng hãy dùng có chừng mực. Ba tầng ngoặc nhọn lồng nhau bắt đầu giống một câu đố. Khi đến mức đó, hãy tách các giá trị trung gian ra biến riêng: dễ đọc quan trọng hơn khéo léo.

Một cái bẫy: data: { user } trong mẫu không tạo ra biến tên data. Nó là chỉ dẫn "đi vào bên trong data và tiếp tục destructuring." Nếu bạn cần chính data, hãy thêm nó riêng:

const response = { data: { user: { name: "Ada" } } };
const { data, data: { user } } = response;
console.log(data);
console.log(user);

Destructuring tham số hàm

Nơi bạn destructuring nhiều nhất là danh sách tham số của hàm. Nó biến kiểu "truyền một đối tượng tùy chọn" thành một chữ ký hàm tự giải thích:

function createUser({ name, email, role = "member", active = true }) {
    console.log({ name, email, role, active });
}

createUser({ name: "Ada", email: "ada@example.com" });
createUser({ name: "Boris", email: "b@example.com", role: "admin" });

Ở chỗ gọi, nó trông như mọi lời gọi truyền đối tượng tùy chọn khác. Bên trong hàm, bạn có các biến được đặt tên sẵn kèm giá trị mặc định, không còn phải viết đi viết lại options.name || "default".

Một góc cạnh cần cẩn thận: gọi hàm này mà không truyền đối số sẽ gây lỗi, vì bạn không thể destructuring undefined. Hãy đặt giá trị mặc định cho cả tham số:

function createUser({ name = "anon", role = "member" } = {}) {
    console.log(name, role);
}

createUser();

= {} sau mẫu có nghĩa là "nếu không có đối số nào được truyền vào, coi như đó là một đối tượng rỗng." Sau đó các giá trị mặc định bên trong sẽ lo phần còn lại.

Hoán đổi và gán lại

Destructuring cũng dùng được với các biến đã khai báo, nhưng bạn cần đặt mẫu đối tượng trong dấu ngoặc tròn (nếu không, JavaScript sẽ hiểu { là bắt đầu một khối lệnh):

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a, b);

let user = { name: "Ada" };
({ name: user.name } = { name: "Boris" });
console.log(user);

Hoán đổi bằng mảng rất gọn. Gán lại bằng đối tượng hiếm gặp hơn, nhưng mẹo dấu ngoặc tròn đáng ghi nhớ để dùng khi cần.

Một ví dụ thực tế

Kết hợp gần hết những gì ở trên: một hàm xử lý response từ API:

function summarise({
    status,
    data: { items = [] } = {},
    meta: { total = 0 } = {},
} = {}) {
    const [firstItem, ...rest] = items;
    return {
        ok: status === 200,
        first: firstItem?.name ?? "none",
        remaining: rest.length,
        total,
    };
}

console.log(summarise({
    status: 200,
    data: { items: [{ name: "alpha" }, { name: "beta" }, { name: "gamma" }] },
    meta: { total: 3 },
}));

console.log(summarise());

Mỗi tầng destructuring đều có giá trị mặc định, nên hàm vẫn chạy được với dữ liệu thiếu mà không cần cả đống câu lệnh if bảo vệ. Đó mới là lợi ích thật: chữ ký hàm vừa chính xác vừa dễ dãi.

Tiếp theo: object spread

Destructuring lấy giá trị ra khỏi đối tượng. Spread đặt chúng vào: sao chép, gộp và ghi đè. Hai thứ này luôn đi cùng nhau trong JavaScript hiện đại, và spread là bài tiếp theo.