Khám Phá JavaScript Nâng Cao - Kỳ 16: Các Khái Niệm Quan Trọng Cần Nắm Bắt

Một Lời Nói Hài Hước: Có Hai Thứ Gây Tranh Cãi: Thứ Mà Nhiều Người Chửi Và Thứ Không Ai Thèm Sử Dụng.

JavaScript là một ví dụ điển hình cho cả hai điều này. Mặc dù JavaScript có nhiều điểm thú vị, nhưng cũng gây ra không ít đau đầu cho lập trình viên. Lý thuyết có thể dễ hiểu, nhưng khi thực hành thực sự là một vấn đề. Nhằm giúp các bạn hiểu rõ hơn về JavaScript, mình sẽ cùng các bạn phân tích từng ví dụ cụ thể.

Chương Trình này có thể kéo dài một thời gian, và mình không chắc số lượng Kỳ sẽ có. Tuy nhiên, cho những bạn chưa đọc các bài trước của mình về JS, mình sẽ trình bày lại toàn bộ các lý thuyết cần thiết. Mình có thể lặp lại các lý thuyết này nhiều lần (tùy hứng) để giúp các bạn nắm vững hơn.

Ok, bây giờ hãy bắt đầu bài học nào... GÉT GÔ 🚀

Nếu bạn có bất kỳ câu hỏi nào, hãy để lại bình luận bên dưới nhé. Chỉ cần một bình luận chào mình cũng đã giúp mình có thêm động lực để hoàn thành series này. Cảm ơn các bạn rất nhiều! 🤗

1. Destructuring và Đổi Tên (Renaming)

Đoạn code dưới đây sẽ cho ra output gì?

const { name: myName } = { name: "Lydia" };  

console.log(name);

• A: "Lydia"
• B: "myName"
• C: undefined
• D: ReferenceError

Đáp án: D

Tại Sao Lại Như Vậy?

1.1. Giới Thiệu Về Destructuring Trong JavaScript

Destructuring là cú pháp cho phép chúng ta "unpack" các giá trị từ arrays hoặc properties từ objects vào các biến riêng biệt, làm cho code trở nên ngắn gọn và dễ đọc hơn.

1.2. Đổi Tên Trong Destructuring

Trong ví dụ trên, cú pháp { name: myName } có nghĩa là:

• Lấy giá trị của property name từ object bên phải dấu = và gán cho biến mới tên là myName. Chúng ta không tạo một biến nào có tên name.

1.3. Phân Tích Đoạn Code

const { name: myName } = { name: "Lydia" };  

console.log(name);

Khi cố gắng log ra biến name, JavaScript không thể tìm thấy biến đó trong scope hiện tại, dẫn đến việc ném ra một ReferenceError.

1.4. Tóm Lại

Destructuring là một công cụ mạnh mẽ, nhưng cần cẩn thận khi sử dụng để tránh nhầm lẫn về các biến được tạo ra.

2. Hàm Thuần Khiết (Pure Functions)

Phân tích xem đây có phải là một pure function không?

function sum(a, b) {
  return a + b;
}

• A: Có
• B: Không

Đáp án: A

2.1. Khái Niệm Về Pure Function

Một pure function sẽ:

1. Luôn trả về cùng một kết quả cho cùng một đầu vào.
2. Không gây ra bất kỳ side effects nào (không thay đổi trạng thái bên ngoài function).

2.2. Phân Tích Hàm sum

Hàm sum không có side effects; nó chỉ thực hiện phép cộng và trả về kết quả.

2.3. Ví Dụ Về Non-Pure Function

let total = 0;

function addToTotal(value) {
  total += value;
  return total;
}

Hàm này không phải là pure function vì nó thay đổi total bên ngoài hàm.

2.4. Tóm Lại

Sử dụng pure functions giúp code dễ đọc, dễ test hơn.

3. Memoization và Closure

Output của đoạn code dưới đây là gì?

const add = () => {
  const cache = {};
  return num => {
    if (num in cache) {
      return `From cache! ${cache[num]}`;
    } else {
      const result = num + 10;
      cache[num] = result;
      return `Calculated! ${result}`;
    }
  };
};

const addFunction = add();
console.log(addFunction(10));
console.log(addFunction(10));
console.log(addFunction(5 * 2));

• A: Calculated! 20 Calculated! 20 Calculated! 20
• B: Calculated! 20 From cache! 20 Calculated! 20
• C: Calculated! 20 From cache! 20 From cache! 20
• D: Calculated! 20 From cache! 20 Error

Đáp án: C

3.1. Closure Và Memoization

Đoạn code trên sử dụng closure để implement memoization. Closure cho phép hàm truy cập vào scope của nó.

3.2. Tóm Lại

Memoization giúp tối ưu hóa hiệu suất bằng cách lưu trữ các kết quả đã tính toán.

4. Vòng Lặp for...in và for...of

Output của đoạn code bên dưới là gì?

const myLifeSummedUp = ["☕", "💻", "🍷", "🍫"]

for (let item in myLifeSummedUp) {
  console.log(item)
}

for (let item of myLifeSummedUp) {
  console.log(item)
}

• A: 0 1 2 3 và "☕" "💻" "🍷" "🍫"
• B: "☕" "💻" "🍷" "🍫" và "☕" "💻" "🍷" "🍫"
• C: "☕" "💻" "🍷" "🍫" và 0 1 2 3
• D: 0 1 2 3 và {0: "☕", 1: "💻", 2: "🍷", 3: "🍫"}

Đáp án: A

Tìm Hiểu Sự Khác Biệt

• for...in lặp qua key của object (hoặc index của mảng).
• for...of lặp qua giá trị trực tiếp trong iterable.

Tóm Lại

Chọn loại vòng lặp đúng rất quan trọng cho hiệu suất code.

5. Tính Toán Trong Mảng

Output của đoạn code dưới đây là gì?

const list = [1 + 2, 1 * 2, 1 / 2]
console.log(list)

• A: ["1 + 2", "1 * 2", "1 / 2"]
• B: ["12", 2, 0.5]
• C: [3, 2, 0.5]
• D: [1, 1, 1]

Đáp án: C

Tóm Tắt

Khi khai báo mảng, các biểu thức được tính toán ngay lập tức. Hiểu điều này giúp bạn viết mã hiệu quả hơn.

Kết Luận

Thông qua 5 ví dụ trên, chúng ta đã tìm hiểu một số đặc điểm quan trọng của JavaScript từ Destructuring, Pure Functions đến Memoization và cách hoạt động của vòng lặp. Việc nắm vững những kiến thức này sẽ giúp phát triển kỹ năng lập trình của bạn.

Hy vọng bài viết này đã mang đến cho bạn những hiểu biết mới. Hãy tiếp tục khám phá và thực hành để nâng cao trình độ JavaScript của mình. Hẹn gặp lại trong các kỳ tiếp theo của series "JavaScript Nâng Cao"!
source: viblo