Sự khác biệt giữa undefined vs null JavaScript thông qua ví dụ đơn giản

Trong JavaScript hay các ngôn ngữ khác, undefined và null là hai giá trị rất khác nhau. Trong bài viết này mình xin giải thích những điểm khác biệt giữa undefined và null, cách sử dụng chúng thông qua các ví dụ cụ thể nhé🥰.

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 các bạn có thể hiểu là empty. Null là một giá trị chúng ta dùng để gán cho biến, tùy từng trường hợp các bạn muốn gán giá trị khởi tạo cho một biến, chúng ta có thể dùng null.

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

Cảm ơn các bạn đã đọc bài viết này, hi vọng bài viết sẽ giúp ích cho các bạn.

Chúc các bạn học tốt ^^.

Một số bài viết nên đọc:

1. Set vs WeakSet Javascript ES6 là gì? tìm hiểu qua ví dụ đơn giản
2. Khác nhau giữa Target vs currentTarget Javascript
3. Khác nhau giữa watch() vs useWatch() trong React Hook Form
4. Khác nhau giữa Background vs Background-Color trong CSS
5. Sự khác biệt giữa React.Component vs React.PureComponent