JavaScript Nâng Cao - Kỳ 26

Giới Thiệu

Trong cộng đồng lập trình, có một câu nói vui rằng: "Trên đời chỉ có thứ nhiều người chửi và thứ không ai thèm dùng." JavaScript là một ví dụ điển hình. Dù có nhiều điểm thú vị, nhưng nó cũng không ít lần khiến chúng ta đau đầu. Để làm sáng tỏ những khái niệm này, bài viết hôm nay sẽ đi sâu vào một số ví dụ thực tiễn để hiểu rõ hơn về JavaScript.

👍 Hãy cùng bắt đầu nhé! GÉT GÔ 🚀

Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại bình luận dưới bài viết này. Một bình luận đơn giản chào mình cũng là động lực lớn để mình hoàn thành series này. Cảm ơn mọi người rất nhiều! 🤗

1. Intl.NumberFormat và Định Dạng Số

Đầu Tiên là Bài Tập

Hãy xem output của đoạn code dưới đây:

function getFine(speed, amount) {
  const formattedSpeed = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'mile-per-hour' }).format(speed);
  const formattedAmount = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount);
  return `The driver drove ${formattedSpeed} and has to pay ${formattedAmount}`;
}

console.log(getFine(130, 300));

Các lựa chọn:

• A: The driver drove 130 and has to pay 300
• B: The driver drove 130 mph and has to pay $300.00
• C: The driver drove undefined and has to pay undefined
• D: The driver drove 130.00 and has to pay 300.00

Giải Thích

Đáp án: B

Khi gọi hàm getFine(130, 300), nó trả về chuỗi: "The driver drove 130 mph and has to pay $300.00". Điều này là nhờ vào Intl.NumberFormat, giúp định dạng số theo ngôn ngữ và quy ước cụ thể.

Lý Thuyết Về Intl.NumberFormat

Intl.NumberFormat là đối tượng cho phép ta định dạng số, tiền tệ và phần trăm theo vùng miền và ngôn ngữ cụ thể, giúp tăng tính thân thiện trong việc hiển thị số liệu.

2. Destructuring và Manipulation Mảng

Câu Hỏi Thực Hành

Hãy xem đoạn mã sau:

const spookyItems = ["👻", "🎃", "🕸"];
({ item: spookyItems[3] } = { item: "💀" });
console.log(spookyItems);

Lựa chọn:

• A: ["👻", "🎃", "🕸"]
• B: ["👻", "🎃", "🕸", "💀"]
• C: ["👻", "🎃", "🕸", { item: "💀" }]
• D: ["👻", "🎃", "🕸", "[object Object]"]

Kết Quả

Đáp án: B

Sử dụng destructuring assignment, phần tử mới "💀" được thêm vào mảng spookyItems, dẫn đến kết quả là ["👻", "🎃", "🕸", "💀"].

3. Number.isNaN vs isNaN

Bài Tập Tiếp Theo

Xem đoạn mã sau:

const name = "Lydia Hallie";
const age = 21;

console.log(Number.isNaN(name));
console.log(Number.isNaN(age));
console.log(isNaN(name));
console.log(isNaN(age));

Lựa chọn:

• A: true, false, true, false
• B: true, false, false, false
• C: false, false, true, false
• D: false, true, false, true

Kết Quả

Đáp án: C

Number.isNaN() chỉ kiểm tra xem giá trị có phải là NaN, trong khi isNaN() lại cố gắng chuyển đổi giá trị thành số trước khi kiểm tra. Điều này gây ra sự khác biệt trong kết quả.

4. Temporal Dead Zone (TDZ)

Câu Hỏi Khác

Xem đoạn mã sau:

const randomValue = 21;

function getInfo() {
 console.log(typeof randomValue);
 const randomValue = "Lydia Hallie";
}

getInfo();

Lựa chọn:

• A: "number"
• B: "string"
• C: undefined
• D: ReferenceError

Kết Quả

Đáp án: D

Biến randomValue tại getInfo đang trong Temporal Dead Zone, dẫn đến lỗi ReferenceError khi cố gắng truy cập trước khi khởi tạo.

5. Async/Await, Try/Catch/Finally

Bài Tập Cuối

Xem đoạn mã dưới đây:

const myPromise = Promise.resolve("Woah some cool data");

(async () => {
 try {
  console.log(await myPromise);
 } catch {
  throw new Error(`Oops didn't work`);
 } finally {
  console.log("Oh finally!");
 }
})();

Lựa chọn:

• A: "Woah some cool data"
• B: "Oh finally!"
• C: "Woah some cool data" và "Oh finally!"
• D: "Oops didn't work" và "Oh finally!"

Kết Quả

Đáp án: C

Do myPromise đã được resolve ngay, nên kết quả sẽ in ra đồng thời cả "Woah some cool data" và "Oh finally!".

Kết Luận

Qua 5 ví dụ trên, bài viết đã trang bị cho bạn những kiến thức quan trọng về JavaScript nâng cao. Việc hiểu rõ Intl.NumberFormat, destructuring, kiểm tra NaN, Temporal Dead Zone, và cách sử dụng async/await sẽ giúp bạn phát triển ứng dụng JS một cách hiệu quả và an toàn hơn. Hy vọng bài viết này sẽ hữu ích cho bạn! Hẹn gặp lại trong kỳ tiếp theo của series "JavaScript Nâng Cao"!
Cảm ơn các bạn đã theo dõi và đừng quên để lại câu hỏi nếu có nhé! 🤗
source: viblo