Undefined và Null trong JavaScript: Sự khác biệt thông qua ví dụ đơn giản

Trong lập trình JavaScript và các ngôn ngữ khác, undefined và null là hai giá trị có sự khác biệt quan trọng. Trong phần này, chúng ta cùng giải thích những điểm đặc biệt giữa undefined và null, đồng thời cung cấp các ví dụ cụ thể để minh họa cách chúng được sử dụng.

Undefined trong JavaScript là gì?

Undefined trong Javascript các bạn có thể hiểu là một biến đã được khai báo nhưng chưa được gán giá trị.

Dưới đây là một ví dụ:

let website;
console.log(website); // undefined

Như các bạn thấy ở trên, chúng ta đã declared một biến website và chưa gán giá trị cho nó. Chính vì thế, biến này là undefined.

Chúng ta có thể check biến trên thuộc type nào bằng cách sử dụng typeof:

console.log(typeof website); // undefined

Chúng ta cũng thường hay bắt gặp undefined khi truy xuất các thuộc tính không tồn tại trong một object:

const website = {'name': 'homiedev.com'};

console.log(website.name); // homiedev.com
console.log(website.url); // undefined

Trong trường hợp chúng ta cố gắng truy xuất một biến mà chưa được khai báo, chúng ta sẽ nhận được lỗi ReferenceError. Vậy biến phải được khai báo và chưa gán giá trị sẽ là undefined.

console.log(post); // Uncaught ReferenceError: post is not defined

Lỗi post is not defined khác hoàn toàn với undefined.

Null trong JavaScript là gì?

Null trong JavaScript đơn giản là một cách để biểu diễn giá trị rỗng hoặc không tồn tại. Khi chúng ta gán giá trị null cho một biến, đồng nghĩa với việc biến đó không giữ bất kỳ giá trị cụ thể nào. Điều này thường được sử dụng khi chúng ta muốn khởi tạo một biến nhưng chưa có giá trị cụ thể nào được gán.

Khi sử dụng null nghĩa là biến được nhận một giá trị khởi tạo, còn undefined thì không có ^^.

let name = null;
console.log(name); // null

Bây giờ chúng ta thử dùng typeof để xem type của name thử nhé:

let name = null;
console.log(typeof name);

Bạn đoán thử xem type chúng ta nhận được ở đây là gì? Ồ 🦭 khá thú vị khi type chúng ta nhận được là object.

console.log(typeof name); // object

Các bạn có thể nhầm lẫn khi typeof name là object nhưng thực ra null là một primitive value như undefined và cả hai đều là falsey values. Các bạn có thể tìm hiểu về vấn đề này tại: Why is null an object.

So sánh undefined và null

Chúng ta có thể nhận biết 2 giá trị giống hay khác nhau thông qua ===. Cùng so sách thử undefined và null nhé:

console.log(undefined === null) // false
console.log(undefined !== null) // true

Tránh sử dụng == để kiểm tra giữa hai giá trị.

Kiểm tra undefined và null

Chúng ta sẽ sử dụng strict equality operator (===) để kiểm tra xem một biến là undefined hay null.

let website, author = null;

if (website === undefined) {
 console.log(`website is undefined`);
}

if (author === null) {
 console.log(`The value of author is null`);
}

Vì undefined và null đều là falsy values, ta có thể kiểm tra như sau:

if (!author && !website) {
 // ...
}

Summary

Sau đây mình xin tóm gọn lại một số điểm khác biệt, giống nhau (bonus 😁) giữa undefined và null:

• undefined và null là các primitive values và chúng là các giá trị falsy.
• undefined là khi một biến được khai báo nhưng không được gán với bất kỳ giá trị nào.
• null thường được gán cho biến khi chúng ta muốn giá trị khởi tạo là empty.
• undefined và null không bằng nhau (!==).

Kết luận

Trong JavaScript, undefined và null có những ngữ cảnh sử dụng khác nhau. Sự hiểu biết về sự khác biệt giữa chúng là quan trọng để viết mã chương trình hiệu quả và tránh lỗi không mong muốn.