Chấm bài đây! Lần này mức độ phức tạp cao hơn nhưng bạn giải quyết cực kỳ gọn, cú pháp Destructuring đã ăn vào tay rồi đấy. Tuy nhiên vẫn có 2 chi tiết nhỏ cần "chỉnh thước ngắm" lại cho chuẩn xác 100%.

Bài 1: Phân rã mảng — 10/10 điểm

const {techStack} = clientProject;
const [cms, , seoPlugin] = techStack;

• Nhận xét: Quá chuẩn. Bạn bốc cái mảng techStack ra trước, rồi từ cái mảng đó bạn dùng dấu phẩy trống , , để nhảy cóc qua phần tử ở giữa, lấy đúng cms và seoPlugin.

• Mẹo viết ngắn gọn (Pro shortcut): Bạn hoàn toàn có thể lồng hai bước này lại làm một dòng duy nhất như thế này:

  JavaScript

  const [cms, , seoPlugin] = clientProject.techStack;
  

Bài 2: Phân rã Object nâng cao — 9/10 điểm (Lệch tên biến)

const {brand, status: projectStatus, traffics = 5000000 } = clientProject;

• Nhận xét: Cú pháp đổi tên status: projectStatus và tạo giá trị phòng thủ = 5000000 bạn viết chính xác 100% về mặt kỹ thuật.

• Điểm trừ nhỏ: Đề bài yêu cầu đặt tên thuộc tính phòng hờ là budget, nhưng bạn lại gõ nhầm thành traffics. Sửa lại chữ traffics thành budget là ăn điểm tuyệt đối luôn.

Bài 3: Destructuring tại tham số — 6/10 điểm (Sai yêu cầu cấu trúc)

Nhìn kỹ lại yêu cầu nhé: "Hãy áp dụng Destructuring Object ngay trên hàng khai báo tham số của hàm để lấy trực tiếp thuộc tính... không cần viết code bốc tách ở trong thân hàm."

Code của bạn vẫn đang nhận vào biến obj ở tham số, rồi mới vào thân hàm để phân rã:

// CÁCH BẠN VIẾT (Vẫn phải tốn 1 dòng trong thân hàm)
function hienThiBaoCao(obj) {
    const {brand, seoMetrics} = obj;
    // ...
}

Tại sao tôi lại ép bạn phải tập viết Destructuring ngay tại tham số? Because sau này khi bạn học lên ReactJS ở F8, tất cả các Component đều nhận dữ liệu dạng Props (một Object lớn). Viết destructuring ngay trên tham số là luật bất thành văn của dân làm React để code ngắn, sạch, nhìn phát biết ngay hàm này cần những nguyên liệu gì để chạy.

Cách sửa chuẩn React Style:

// Bốc vỏ Object ngay tại hàng tham số luôn!
function hienThiBaoCao({ brand, seoMetrics }) {
    // Trong này không cần const {brand...} nữa, xài trực tiếp luôn!
    return Dự án <span class="hljs-subst">${brand}</span> có <span class="hljs-subst">${seoMetrics.backlinks}</span> backlinks;
}

console.log(hienThiBaoCao(clientProject));

Bạn thấy sức mạnh của nó chưa? Biến obj biến mất hoàn toàn, dòng khai báo biến bên trong thân hàm cũng bay màu. Hàm bây giờ nhìn cực kỳ tinh gọn và chuyên nghiệp.

Chốt hạ chặng đường:

Đến thời điểm này, toàn bộ mớ kiến thức "sống còn" và "hố tử thần" của JavaScript cơ bản bao gồm: Tham chiếu/Tham trị, Cắt gọt mảng, Bộ ba Map/Filter/Reduce, Tìm kiếm, Xử lý chuỗi, và Destructuring bạn đều đã thực hành và hiểu tận gốc rễ. Bạn không hề học vẹt mà đã có tư duy phân tích bộ nhớ rất sâu sắc.

Giữ nguyên bộ khung tư duy cứng cáp này, mở F8 lên và quét sạch các bài tập thực hành tiếp theo đi thôi! Mọi bug bây giờ chỉ là chuyện nhỏ.

Thắc mắc này cực kỳ chí mạng! Người mới học lập trình khi nhìn vào khúc này đều sẽ bị "khựng" lại một nhịp vì cảm thấy nó phi logic. Tại sao không có dấu bằng (= clientProject) mà JS vẫn tự biết đường mò vào trong để bốc dữ liệu?

Bản chất của phép thuật này nằm ở cơ chế Gán ngầm (Implicit Assignment) khi gọi hàm. Hãy cùng bóc tách lớp mặt nạ của nó ra nhé.

1. Bản chất: Ai đã gán nó cho clientProject?

Khi bạn viết định nghĩa hàm:

function hienThiBaoCao({ brand, seoMetrics }) { ... }

Lúc này dấu { brand, seoMetrics } chỉ là một cái khuôn (hoặc cái phễu) chờ sẵn ở cửa. Nó chưa hề có dữ liệu gì cả.

Cú lừa nằm ở dòng này:

hienThiBaoCao(clientProject);

Ngay tại khoảnh khắc bạn truyền clientProject vào trong dấu ngoặc của lời gọi hàm, JavaScript ở dưới bo mạch sẽ thực hiện ngay lập tức một lệnh gán ngầm tương đương như sau:

// JS tự động chạy dòng này dưới bộ nhớ:
let { brand, seoMetrics } = clientProject;

Nghĩa là, thay vì bạn phải tự tay viết dấu bằng (= clientProject) trong thân hàm, thì hành động bỏ clientProject vào dấu ngoặc câu lệnh gọi hàm chính là lúc bạn đã thực hiện phép gán đó rồi!

2. Hãy nhìn lại 2 cách viết để thấy sự dịch chuyển của dấu bằng (=)

Để bạn dễ hình dung, hãy xem sự tiến hóa từ cách viết truyền thống sang cách viết hiện đại:

Cách cũ: "Mang nguyên cái thùng vào nhà rồi mới khui"

function hienThiBaoCao(obj) {
    // Bước này bạn phải gán ngầm: obj = clientProject
    // Rồi bạn mới viết dấu bằng để bốc tách:
    const { brand, seoMetrics } = obj; 

<span class="hljs-keyword">return</span> <span class="hljs-string">`Dự án <span class="hljs-subst">${brand}</span>`</span>;

}

Cách mới (Destructuring tham số): "Khui thùng ngay tại cửa"

function hienThiBaoCao({ brand, seoMetrics }) {
    // Dấu bằng (=) chính là hành động bạn truyền clientProject ở bên dưới!
    return Dự án <span class="hljs-subst">${brand}</span>;
}

hienThiBaoCao(clientProject); // <--- Dữ liệu được nạp vào khuôn ở đây

3. Hình ảnh trực quan để nhớ lâu: "Shipper giao hàng"

Hãy tưởng tượng clientProject là một gói hàng bưu điện chứa nhiều đồ bên trong (brand, techStack, seoMetrics...).

• Cách viết cũ: Bạn nhận nguyên gói hàng (obj), mang vào phòng khách, lấy kéo cắt băng keo (const { brand } = obj) để lấy đồ ra xài.

• Cách viết mới: Bạn thiết kế một cái hòm thư có sẵn 2 ngăn đúng kích cỡ tên là brand và seoMetrics ở trước cửa nhà. Khi ông shipper clientProject tới, ông ấy tự động rải đồ vào đúng 2 ngăn đó. Bạn chỉ việc chui từ trong nhà ra bốc đúng món ở ngăn đó xài, không cần cầm kéo cắt thùng nữa.

Chính vì sự tiện lợi này mà khi lên React, bạn sẽ thấy người ta viết kiểu này 100% để code rành mạch, nhìn vào tham số của hàm là biết ngay hàm này cần bốc những dữ liệu gì từ Object truyền vào.