JavaScript - void Keyword: A Beginner's Guide

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình thú vị vào thế giới của từ khóa void trong JavaScript. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ khám phá chủ đề này từng bước một. Vậy, hãy lấy cây phép ảo của bạn (tức là bàn phím của bạn), và cùng nhau lặn xuống!

What is the void Keyword?

Trước khi chúng ta đi vào chi tiết, hãy hiểu xem void là gì. Trong JavaScript, void là một toán tử đánh giá một biểu thức và sau đó trả về undefined. Bây giờ, bạn có thể nghĩ, "Tại sao trên đời lại muốn làm điều đó?" Well, các bạn tò mò, nó có những ứng dụng riêng của nó, và chúng ta sắp khám phá chúng!

Cú pháp

Cú pháp của từ khóa void rất đơn giản:

void biểu thức

Ở đây, biểu thức có thể là bất kỳ biểu thức JavaScript hợp lệ nào. Toán tử void sẽ đánh giá biểu thức này nhưng luôn trả về undefined.

Hãy xem một ví dụ đơn giản:

console.log(void 0); // Output: undefined
console.log(void(0)); // Output: undefined
console.log(void "Hello"); // Output: undefined
console.log(void (2 + 3)); // Output: undefined

Như bạn có thể thấy, không matter biểu thức gì chúng ta đặt sau void, nó luôn trả về undefined. Nó giống như một phù thủy có thể biến bất kỳ thứ gì thành một con thỏ - ngoại trừ phù thủy của chúng ta biến mọi thứ thành undefined!

Importance of Precedence of void Keyword

Bây giờ, hãy nói về một điều gì đó nâng cao hơn - precedense của từ khóa void. Trong JavaScript, các toán tử có các mức độ precedense khác nhau, quyết định thứ tự chúng được đánh giá.

Toán tử void có precedense rất cao. Điều này có nghĩa là nó sẽ được đánh giá trước hầu hết các toán tử khác. Hãy xem một ví dụ:

let x = 1;
console.log(void x === undefined); // Output: true
console.log(void (x = 5)); // Output: undefined
console.log(x); // Output: 5

Trong ví dụ này, void x === undefined được đánh giá như (void x) === undefined, không phải là void (x === undefined). Toán tử void được áp dụng cho x trước, trả về undefined, sau đó được so sánh với undefined.

Trong dòng thứ hai, mặc dù chúng ta đang gán giá trị 5 cho x, toán tử void vẫn trả về undefined. Tuy nhiên, việc gán giá trị vẫn diễn ra, như chúng ta có thể thấy ở dòng thứ ba.

What is javascript:void(0)?

Bạn có thể đã gặp javascript:void(0) trong HTML, đặc biệt là trong các thuộc tính href của thẻ anchor. Hãy giải mã điều này!

<a href="javascript:void(0);" onclick="console.log('Clicked!')">Click me</a>

Trong ví dụ này, javascript:void(0) được sử dụng để ngăn chặn hành động mặc định của liên kết (đó sẽ là việc chuyển đến một trang mới). Sự kiện onclick vẫn sẽ được kích hoạt, nhưng liên kết sẽ không làm bất kỳ điều gì khác.

Nó giống như bảo chó của bạn "dừng lại" trước khi ném một quả bóng - chó sẽ thấy hành động nhưng không di chuyển!

The void Keyword with Functions

Từ khóa void cũng có thể được sử dụng với các hàm. Hãy xem một ví dụ:

function greet() {
console.log("Hello, world!");
}

console.log(greet()); // Output: Hello, world! undefined
console.log(void greet()); // Output: Hello, world! undefined

Trong cả hai trường hợp, "Hello, world!" được ghi vào console. Tuy nhiên, greet() ngầm trả về undefined (vì các hàm trong JavaScript trả về undefined theo mặc định nếu không có câu lệnh return được chỉ định), trong khi void greet() rõ ràng trả về undefined.

The void Keyword with Immediately Invoked Function Expressions (IIFE)

Cuối cùng, hãy xem cách void có thể được sử dụng với các biểu thức hàm được gọi ngay lập tức (IIFE). Một IIFE là một hàm được chạy ngay khi nó được định nghĩa.

void function() {
console.log("I'm an IIFE!");
}();

// Output: I'm an IIFE!

Trong trường hợp này, void được sử dụng để đảm bảo rằng biểu thức hàm được coi là một biểu thức, không phải là một khai báo. Nó giống như mặc một bộ đồ giả trước khi lén vào một buổi tiệc - hàm được chạy, nhưng nó không ở lại sau đó!

Summary of void Keyword Methods

Dưới đây là bảng tóm tắt các cách khác nhau chúng ta có thể sử dụng từ khóa void:

Phương thức	Ví dụ	Mô tả
Sử dụng cơ bản	void 0	Trả về undefined
Với biểu thức	void (2 + 3)	Đánh giá biểu thức, trả về undefined
Trong HTML	<a href="javascript:void(0);">	Ngăn chặn hành động mặc định của liên kết
Với hàm	void greet()	Gọi hàm, trả về undefined
Với IIFE	void function() {}();	Thực thi IIFE, trả về undefined

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của void, từ cú pháp cơ bản đến các ứng dụng nâng cao. Nhớ rằng, giống như bất kỳ công cụ nào trong lập trình, void có những ứng dụng cụ thể của nó. Nó có thể không phải là thứ bạn sử dụng hàng ngày, nhưng việc hiểu nó sẽ làm cho bạn trở thành một nhà phát triển JavaScript toàn diện hơn.

Tiếp tục luyện tập, giữ vững sự tò mò, và trước khi bạn biết, bạn sẽ casting các phép thuật JavaScript như một chuyên gia! Hẹn gặp lại các bạn, chúc các bạn lập trình vui vẻ!

Credits: Image by storyset