JavaScript void(0) là gì

JavaScript void(0) là gì? Tại sao liên quan đến undefined?

Anh NguyễnBạn nghĩ gì về bài viết này?

Bạn có bao giờ thắc mắc JavaScript void(0) là gì không? Mình cũng đã từng gặp khó khăn khi không hiểu đoạn code đó là gì. Bây giờ, hãy cùng mình tìm hiểu về JavaScript void(0) nhé!

Từ void có nghĩa là ‘không gian trống hoàn toàn’ theo từ điển. Thuật ngữ này, khi được sử dụng trong lập trình, đề cập đến việc trả về ‘không có gì’ – có thể gọi là một ‘giá trị trống’.

Từ khoá void là gì?

Khi một hàm là void, có nghĩa là hàm không trả về gì. Điều này tương tự với các hàm trong JavaScript trả về undefined một cách rõ ràng, như sau:

function und() {
  return undefined
}
und()Code language: JavaScript (javascript)

hoặc

function und() {
}
und()Code language: JavaScript (javascript)

Bất kể các biểu thức và câu lệnh trong các hàm trên (cộng 2 số với nhau, tìm trung bình cộng của 5 số, bất kỳ), không có kết quả nào trả về.

Bây giờ chúng ta biết từ khóa void là gì. Còn javascript void (0) thì sao?

JavaScript void(0) là gì?

Cụ thể, câu lệnh đó là:

javascript:void(0)Code language: JavaScript (javascript)

Nếu chúng ta tách nó ra, chúng ta có javascript: và void (0). Chúng ta hãy xem xét từng phần chi tiết hơn.

javascript:

Đây được gọi là URL giả. Khi trình duyệt nhận giá trị này dưới dạng giá trị của href trên thẻ liên kết, nó sẽ diễn giải mã JS theo sau dấu hai chấm (:) thay vì coi giá trị như một đường dẫn được tham chiếu.

Ví dụ:

<a href="javascript:console.log('javascript');alert('javascript')">Link</a>
Code language: HTML, XML (xml)

Khi nhấp vào ‘Liên kết’, đây là kết quả:

JavaScript void(0) là gì

Như đã thấy ở trên, trình duyệt không coi href là một đường dẫn được tham chiếu. Thay vào đó, nó coi nó như một số mã JavaScript bắt đầu sau ‘javascript:’ và được phân tách bằng dấu chấm phẩy.

void(0)

Toán tử void tính toán các biểu thức đã cho và trả về undefined.

Ví dụ:

const result = void(1 + 1);
console.log(result);
// undefinedCode language: JavaScript (javascript)

1 + 1 được tính toán nhưng undefined được trả về. Để xác nhận điều đó, đây là một ví dụ khác:

<body>
  <h1>Heading</h1>
  <script>
        void(document.body.style.backgroundColor = 'red',
             document.body.style.color = 'white'
        )
  </script>
</body>Code language: HTML, XML (xml)

Kết quả:

JavaScript void(0) là gì

Một ví dụ khác:

console.log(void(0) === undefined)
// trueCode language: JavaScript (javascript)

Kết hợp javascript: và void(0)

Đôi khi, bạn không muốn một liên kết điều hướng đến một trang khác hoặc tải lại một trang. Sử dụng javascript :, bạn có thể chạy mã mà không thay đổi trang hiện tại.

Điều này, được sử dụng với void(0) có nghĩa là, không làm gì cả – không tải lại, không điều hướng, không chạy bất kỳ mã nào.

Ví dụ:

<a href="javascript:void(0)">Link</a>Code language: HTML, XML (xml)

Từ ‘Link’ được trình duyệt coi như một liên kết. Ví dụ: nó có thể lấy tiêu điểm, nhưng nó không điều hướng đến một trang mới.

0 là một đối số được truyền tới void không có tác dụng gì và không trả về gì.

Mã JavaScript (như đã thấy ở trên) cũng có thể được chuyển làm đối số cho phương thức void. Điều này làm cho phần tử liên kết chạy một số mã nhưng nó vẫn duy trì cùng một trang.

Ví dụ:

<a id='link' href="javascript:void(
  document.querySelector('#link').style.color = 'green'
)">Link</a>Code language: HTML, XML (xml)

Khi nút được bấm, kết quả:

JavaScript void(0) là gì

Với void, nó nói với trình duyệt không trả lại bất kỳ thứ gì (hoặc trả về undefined).

Một trường hợp sử dụng khác của các liên kết có tham chiếu javascript: void(0) là đôi khi, một liên kết có thể chạy một số mã JavaScript trong nền và việc điều hướng có thể không cần thiết. Trong trường hợp này, các biểu thức sẽ được sử dụng làm các đối số được chuyển đến void.

Kết luận

Trong bài viết đơn giản này, chúng ta đã tìm hiểu toán tử void là gì, cách hoạt động và cách javascript: void(0) được sử dụng với javascript: URL giả cho các thuộc tính href của liên kết.

Điều này đảm bảo rằng một trang không điều hướng đến một trang khác hoặc tải lại trang hiện tại khi được nhấp vào.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận