Một Câu Nói Vui Về JavaScript
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. Nó có nhiều điểm thú vị nhưng cũng khiến chúng ta phải đau đầu. Lý thuyết có thể dễ hiểu, nhưng khi thực hành thì lại là cả một vấn đề. Vậy nên, trong bài viết này, mình sẽ cùng các bạn đi sâu vào từng ví dụ cụ thể, phân tích và mổ xẻ chúng để hiểu rõ hơn về JavaScript nhé.
Chương trình này có thể sẽ khá dài và không biết sẽ có bao nhiêu kỳ. Tuy nhiên, để hỗ trợ các bạn nào chưa đọc các bài trước, mình sẽ giải thích lại toàn bộ kiến thức trong series này. Các lý thuyết mình sẽ giải thích lại nhiều lần (tùy hứng) để giúp các bạn nắm rõ hơn.
Ok, bắt đầu bài thôi nào... GÉT GÔ 🚀
Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại hãy bình luận dưới phần
comment
. Hoặc chỉ cần để lại mộtcomment 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. Tìm Hiểu Về Generator Functions và Từ Khóa yield
Hãy cùng xem đoạn code sau:
javascript
function* startGame() {
const answer = yield "Do you love JavaScript?";
if (answer !== "Yes") {
return "Oh wow... Guess we're gone here";
}
return "JavaScript loves you back ❤️";
}
const game = startGame();
console.log(/* 1 */); // Do you love JavaScript?
console.log(/* 2 */); // JavaScript loves you back ❤️
Câu hỏi: Output của đoạn code trên là gì?
- A:
game.next("Yes").value
vàgame.next().value
- B:
game.next.value("Yes")
vàgame.next.value()
- C:
game.next().value
vàgame.next("Yes").value
- D:
game.next.value()
vàgame.next.value("Yes")
Đáp án: C
Phân Tích Đoạn Code
- Khởi tạo generator:
const game = startGame();
. - Gọi
game.next().value
để in ra lúc đầu, truy xuấtyield
. Kết quả là "Do you love JavaScript?". - Gọi
game.next("Yes").value
sau đó sẽ in ra "JavaScript loves you back ❤️".
Generator Functions
Generator Functions là loại hàm đặc biệt trong JavaScript cho phép tạm dừng và tiếp tục thực thi hàm tại nhiều điểm khác nhau, nhờ vào từ khóa yield
. Từ khóa này giúp tạm dừng thực thi hàm và trả về giá trị được chỉ định.
2. Cách Sử Dụng String.raw và Chuỗi Template Literals
Xem đoạn code sau:
javascript
console.log(String.raw`Hello\nworld`);
Câu hỏi: Output của đoạn code trên là gì?
- A:
Hello world!
- B:
Hello
world
- C:
Hello\nworld
- D:
Hello\n
world
Đáp án: C
Giải Thích
String.raw
là một phương thức trong JavaScript dùng để làm việc với template literals mà không giải quyết các ký tự escape. Do đó, console.log(String.raw
Hello\nworld)
sẽ trả về "Hello\nworld" thay vì chuyển đổi \n
thành xuống dòng.
3. Hiểu Về Async/Await và Promises
Xem đoạn code dưới:
javascript
async function getData() {
return await Promise.resolve("I made it!");
}
const data = getData();
console.log(data);
Câu hỏi: Output của đoạn code trên là gì?
- A: "I made it!"
- B:
Promise {<resolved>: "I made it!"}
- C:
Promise {<pending>
} - D:
undefined
Đáp án: B
Phân Tích
Hàm getData()
luôn trả về một Promise. Khi gọi console.log(data);
, kết quả sẽ là một Promise chứ không phải giá trị đã resolve, vì chúng ta không đợi Promise hoàn thành.
4. Phương Thức Array và Giá Trị Trả Về
javascript
function addToList(item, list) {
return list.push(item);
}
const result = addToList("apple", ["banana"]);
console.log(result);
Câu hỏi: Output của đoạn code trên là gì?
- A:
['apple', 'banana']
- B:
2
- C:
true
- D:
undefined
Đáp án: B
Giải Thích
Phương thức push()
thêm một phần tử vào cuối mảng và trả về chiều dài mới của mảng. Do đó, khi thêm "apple" vào mảng ban đầu, chiều dài mới sẽ là 2, và console.log(result)
sẽ in ra 2.
5. Immutability và Object.freeze()
javascript
const box = { x: 10, y: 20 };
Object.freeze(box);
const shape = box;
shape.x = 100;
console.log(shape);
Câu hỏi: Output của đoạn code trên là gì?
- A:
{ x: 100, y: 20 }
- B:
{ x: 10, y: 20 }
- C:
{ x: 100 }
- D:
ReferenceError
Đáp án: B
Giải Thích
Khi đối tượng box
bị đóng băng bằng Object.freeze()
, nó không thể thay đổi thuộc tính. Kết quả in ra vẫn là { x: 10, y: 20 }
vì shape.x = 100;
không có tác dụng.
Kết Luận
Bài viết đã cùng các bạn tìm hiểu về:
- Generator Functions và cách sử dụng từ khóa
yield
. - Cách sử dụng
String.raw
với template literals. - Async/Await cùng Promises.
- Cách hoạt động của phương thức
push()
trong mảng Array. - Tính bất biến (immutability) với Object.freeze().
Hy vọng các bạn đã tìm thấy thông tin bổ ích trong bài viết này và có thể áp dụng vào chương trình JavaScript của mình. Hãy tiếp tục khám phá và rèn luyện kỹ năng lập trình của bạn nhé! Nếu có bất kỳ câu hỏi nào, hãy để lại comment dưới bài viết. Mình sẽ cố gắng phản hồi sớm nhất có thể! 👋
source: viblo