JavaScript undefined là gì? Nguyên nhân và cách xử lý chi tiết

JavaScript undefined là một trong những giá trị mà bất kỳ lập trình viên nào cũng từng gặp, nhưng không phải ai cũng hiểu đúng bản chất của nó. Nếu bạn từng loay hoay với những lỗi kiểu “Cannot read property of undefined” hay “undefined is not a function” thì đó chính là lỗi về undefined. 

Đọc bài viết sau để được giải đáp chi tiết hơn về:

• Tổng quan định nghĩa về undefined trong JavaScript.
• Một số ví dụ cơ bản về undefined. 
• Khi nào nên dùng hay không nên dùng undefined trong JavaScript. 
• 3 cách kiểm tra giá trị biến gặp lỗi undefined trong JavaScript. 
• Sự khác biệt giữa undefined và null.

undefined trong JavaScript là gì?

undefined là một thuộc tính của đối tượng toàn cục (global object). Nói cách khác, đây là một biến tồn tại trong phạm vi toàn cục (global scope).

Trong tất cả các trình duyệt hiện đại (không tính các trình duyệt cũ), undefined là một thuộc tính không thể cấu hình lại (non-configurable) và không thể ghi đè (non-writable). Ngay cả khi môi trường cho phép ghi đè, bạn tuyệt đối không nên thay đổi giá trị của undefined, để tránh phát sinh lỗi và hành vi không mong muốn trong chương trình.

Khi nào JavaScript trả về undefined?

Một biến đã khai báo nhưng chưa được gán giá trị sẽ có kiểu dữ liệu là undefined. Ngoài ra một số câu lệnh, phương thức hoặc thao tác trong JavaScript sẽ trả về undefined khi:

• Gọi một hàm không có câu lệnh return, hoặc có return nhưng không kèm theo giá trị.
• Truy cập một biến đã được khai báo nhưng chưa được gán giá trị.
• Truy cập một thuộc tính không tồn tại trong một đối tượng (object).

Chẳng hạn như ví dụ dưới đây, sử dụng undefined kết hợp với toán tử so sánh nghiêm ngặt (=== và !==) để xác định xem một biến có được gán giá trị hay không. Biến x chưa được khởi tạo giá trị, vì vậy biểu thức điều kiện sẽ đánh giá là true.

let x;

if (x === undefined) {

  // các câu lệnh trong khối này sẽ được thực thi

} else {

  // các câu lệnh trong khối này sẽ không được thực thi

}

Bạn phải sử dụng toán tử so sánh nghiêm ngặt (===) thay vì so sánh thông thường (==). Lý do là vì:

• Toán tử == không phân biệt giữa undefined và null. Nghĩa là x == undefined sẽ trả về true cả khi x là null.
• Trong khi đó, toán tử === chỉ trả về true khi giá trị và kiểu dữ liệu hoàn toàn giống nhau, nên x === undefined sẽ không đánh đồng null với undefined.

Hoặc một ví dụ khác về trường hợp nếu một hàm không có câu lệnh return, thì khi gọi hàm đó, giá trị trả về sẽ là undefined.

function doSomething() {

  // không return gì cả

}

console.log(doSomething()); // undefined

Giải thích ví dụ trên

• function doSomething() { ... }: khai báo một hàm (function) trong JavaScript có tên là doSomething. Bên trong hàm không có giá trị return nào. 
• doSomething();: Khi bạn gọi hàm này, hàm sẽ được thực thi, nhưng vì bên trong không có return, nên hàm không trả về giá trị cụ thể nào.
• console.log(doSomething());: In ra giá trị mà biểu thức trong ngoặc trả về. Vì doSomething() không trả về gì, JavaScript sẽ tự động trả về undefined theo mặc định.

Phân biệt undefined và not defined

Ngoài ra, tuy nhìn có vẻ giống nhau, nhưng undefined và not defined trong JavaScript là hai khái niệm rất khác nhau trong JavaScript. 

• undefined là một giá trị hợp lệ trong JavaScript. Xuất hiện khi một biến đã được khai báo nhưng chưa được gán giá trị nào.
• not defined không phải là một giá trị mà là một lỗi (error). Khi bạn cố gắng truy cập một biến chưa từng được khai báo, JavaScript sẽ không hiểu đó là gì và ném lỗi: ReferenceError: <variable> is not defined.

Để hiểu rõ hơn về 2 khái niệm này, bạn có thể tham khảo ví dụ sau:

let a;

console.log(a); // in ra undefined

console.log(b); // lỗi ReferenceError: b is not defined

Trong đó:

• let a;: Bạn khai báo biến a bằng từ khóa let, nhưng chưa gán giá trị. Trong JavaScript, nếu biến được khai báo nhưng không có giá trị, thì giá trị mặc định của nó là undefined.
• console.log(a);: Biến a đã được khai báo, nên không bị lỗi. Vì bạn chưa gán giá trị nào cho a, nên giá trị của nó là undefined.
• console.log(b);: Biến b chưa từng được khai báo ở đâu cả. Khi JavaScript gặp biến chưa khai báo mà bạn cố dùng nó, nó không biết b là gì, và sẽ báo lỗi.

Một số ví dụ cơ bản về undefined trong JavaScript

Giá trị undefined trong biến (variable)

Khi một biến được khai báo nhưng chưa được gán giá trị, JavaScript sẽ tự động gán cho biến đó giá trị undefined.

Chẳng hạn ví dụ dưới đây, biến name được khai báo nhưng không được gán bất kỳ giá trị nào, do đó nó nhận được giá trị Undefined

let newVar;

console.log(newVar);

Ở đây, biến newVar chỉ được khai báo bằng từ khóa let nhưng không được gán giá trị nào cả. Do đó, khi gọi console.log(newVar), trình thông dịch JavaScript sẽ trả về undefined vì nó chưa có bất kỳ giá trị nào cụ thể.

Undefined trong hàm (function)

Một hàm hoặc biểu thức cũng có thể trả về undefined trong những trường hợp sau: 

• Khi một hàm không có câu lệnh return
• Hàm chỉ có return mà không kèm giá trị
• Biến nhận giá trị từ hàm đó, thì biến cũng sẽ là undefined

Chẳng hạn như ví dụ dưới đây:

function sayhi(name) {

    console.log(`hi ${name}`);

}

x = sayhi('hike');

console.log(`value in x= ${x}`);

Kết quả hiển thị của đoạn code trên, hàm sẽ trả về giá trị undefined

hi hike

undefined

Hàm sayhi(name) chỉ thực hiện in ra chuỗi “hi hike” nhưng không có câu lệnh return nào. Do đó, khi gán x = sayhi('hike'), biến x nhận giá trị trả về mặc định là undefined. Dòng console.log("value in x= ", x) sẽ hiển thị: 

hi hike

value in x= undefined

Dòng đầu tiên là kết quả từ console.log bên trong hàm. Dòng thứ hai cho thấy biến x đã nhận giá trị undefined vì hàm không trả về gì.

Giá trị undefined trong thuộc tính của đối tượng (Object)

Khi bạn truy cập vào một thuộc tính không tồn tại trong đối tượng, JavaScript sẽ trả về undefined. Ví dụ:

const person = { name: "Alice" };

console.log(person.age);

Đối tượng person chỉ có thuộc tính name. Khi bạn cố truy cập vào person.age, một thuộc tính không tồn tại thì JavaScript sẽ không báo lỗi, mà đơn giản trả về undefined. Điều này rất phổ biến khi làm việc với dữ liệu động hoặc các đối tượng được xây dựng từ API, vì vậy bạn nên kiểm tra kỹ tính tồn tại của thuộc tính trước khi sử dụng.

Các trường hợp undefined trong mảng (Array)

JavaScript cũng cho phép mảng chứa phần tử undefined theo hai cách phổ biến

• Phần tử trong mảng có giá trị là undefined (được khai báo rõ ràng).
• Slot trống (Empty slot / Sparse array). 

Để hiểu rõ hơn về 2 cách này, bạn có thể tham khảo qua ví dụ như sau:

const arr = [1, undefined, 3];

console.log(arr[1]); // undefined

Trong đó:

• phần tử thứ hai (arr[1]) được khai báo và có giá trị là undefined.
• Slot này tồn tại trong mảng.

Một ví dụ khác về slot trống như sau:

const arr = [1, , 3];

console.log(arr[1]); // undefined

Trong đó:

• Mảng trên có một khoảng trống (slot trống) ở vị trí thứ hai (arr[1]).
• Kết quả vẫn là undefined, nhưng khác với phần tử có giá trị là undefined.
• Slot này không thực sự có phần tử, chỉ là một vị trí trống.

Khi nào nên dùng và không nên dùng undefined?

Trong JavaScript, undefined là một giá trị đặc biệt thường được sử dụng để biểu thị rằng một biến chưa được gán giá trị. Tuy nhiên, việc sử dụng undefined cần được cân nhắc kỹ lưỡng để tránh gây hiểu nhầm hoặc lỗi không mong muốn trong quá trình phát triển phần mềm. Dưới đây là những trường hợp nên và không nên sử dụng undefined trong thực tiễn lập trình.

Để hiểu rõ hơn, bạn có thể tham khảo qua 2 ví dụ như sau. Đầu tiên, trường hợp nên dùng undefined với tình huống là bạn muốn khai báo trước 1 biến, sau đó mới gán giá trị tùy theo điều kiện logic:

let result;

if (someCondition) {

  result = "Success";

}

console.log(result); // undefined nếu someCondition là false

Giải thích ví dụ trên:

• undefined ở đây phản ánh đúng trạng thái: biến đã tồn tại nhưng chưa được định nghĩa giá trị cụ thể.
• Là hành vi mặc định của JavaScript, không gây nhầm lẫn và dễ xử lý tiếp bằng logic kiểm tra undefined.

Tiếp theo, trường hợp không nên dùng undefined trong tình huống sử dụng undefined để biểu thị một giá trị rỗng. 

const user = {

  name: "Alice",

  age: 25

};

// Xóa dữ liệu

user.age = undefined; // Không nên

Giải thích ví dụ:

• Khi bạn gán undefined, bạn không phân biệt được: liệu giá trị bị xoá, chưa được gán, hay cố tình để undefined.
• Gây khó hiểu trong quá trình kiểm tra dữ liệu.

Cách viết đúng sẽ là:

delete user.age; // hoặc:

user.age = null; // Rõ ràng hơn khi bạn muốn biểu thị "không có giá trị"

3 cách kiểm tra giá trị một biến có phải là undefined trong JavaScript

Dưới đây, ITviec sẽ hướng dẫn 3 phương pháp và cách tiếp cận khác nhau có thể sử dụng để xác định xem một biến có undefined thuộc JavaScript hay không. Điều này sẽ cần thiết nếu bạn muốn tránh mã của mình phát sinh lỗi khi thực hiện một thao tác với một biến chưa xác định.

So sánh trực tiếp (Direct comparison)

Một trong những cách đơn giản và phổ biến nhất để kiểm tra xem một giá trị có phải là undefined hay không là sử dụng so sánh trực tiếp. Phương pháp này kiểm tra giá trị trả về và so sánh nó với undefined bằng toán tử so sánh nghiêm ngặt (===). Cách làm rất rõ ràng và dễ hiểu.

let user = {

    name: "John Doe",

    age: 14

};

if (user.hobby === undefined) {

    console.log("This is undefined");

}

Trong đoạn mã trên, thuộc tính hobby không tồn tại trong đối tượng user, nên khi kiểm tra user.hobby === undefined, điều kiện đúng và thông báo được in ra. Phương pháp này cũng hoạt động tương tự với mảng:

let scores = [12, 34, 66, 78];

if (scores[10] === undefined) {

    console.log("This is undefined");

}

Ở đây, chỉ số thứ 10 của mảng scores chưa được khai báo, vì vậy truy cập vào scores[10] sẽ trả về undefined. Ngoài ra, bạn cũng có thể áp dụng cách này cho biến thông thường:

let name;

if (name === undefined) {

    console.log("This is undefined");

}

Biến name được khai báo nhưng chưa được gán giá trị, vì thế giá trị mặc định của nó là undefined, và điều kiện kiểm tra sẽ trả về đúng.

Phương pháp so sánh trực tiếp này hoạt động tốt trong hầu hết các tình huống. Tuy nhiên, để đảm bảo an toàn tuyệt đối trong các phiên bản JavaScript cũ (nơi giá trị undefined có thể bị ghi đè), bạn có thể kết hợp với typeof hoặc sử dụng void 0.

Sử dụng typeof

Bạn cũng có thể sử dụng kiểu dữ liệu (typeof) của biến để kiểm tra xem nó có phải là undefined hay không. Trong JavaScript, undefined vừa là một giá trị, vừa là một kiểu dữ liệu dành riêng cho những biến chưa được gán giá trị. Ví dụ:

let name;

console.log(typeof name); // "undefined"

Dựa vào đặc điểm này, bạn có thể kiểm tra biến có phải là undefined hay không bằng cách so sánh kiểu dữ liệu. Cách kiểm tra này hoạt động an toàn và hiệu quả trong nhiều trường hợp:

if (typeof user.hobby === "undefined") {}

if (typeof scores[10] === "undefined") {}

if (typeof name === "undefined") {}

Tuy nhiên, bạn nên lưu ý so sánh với chuỗi “undefined” thông qua typeof giúp tránh lỗi ReferenceError khi truy cập vào biến hoặc thuộc tính không tồn tại. Đồng thời đảm bảo mã chạy an toàn kể cả khi strict mode. 

Toán tử void (void operator)

Toán tử void thường được sử dụng để tạo ra giá trị nguyên thủy undefined. Bạn có thể thực hiện điều này bằng cách viết void(0) hoặc void 0, cả hai đều sẽ trả về undefined như ví dụ dưới đây:

console.log(void 0);    // undefined

console.log(void(0));   // undefined

Về bản chất, điều này hoạt động tương tự như việc so sánh trực tiếp với undefined. Tuy nhiên, thay vì sử dụng từ khóa undefined, bạn có thể thay thế bằng void(0) hoặc void 0.

if (typeof user.hobby === void 0) {}

if (typeof scores[10] === void 0) {}

if (typeof name === void 0) {}

Hoặc:

if (typeof user.hobby === void(0)) {}

if (typeof scores[10] === void(0)) {}

if (typeof name === void(0)) {}

Việc sử dụng void 0 thường thấy trong các đoạn mã cũ hoặc khi muốn đảm bảo rằng không có nguy cơ từ việc giá trị undefined bị ghi đè trong các phiên bản JavaScript cũ (ví dụ như ES3). Trong hầu hết các phiên bản mới, việc sử dụng trực tiếp undefined là an toàn, nhưng void 0 vẫn được một số lập trình viên ưa thích vì tính “bất biến” và rõ ràng trong mục đích.

Khác biệt giữa undefined với null là gì?

Trong JavaScript, cả undefined và null đều biểu thị sự vắng mặt của một giá trị có ý nghĩa, nhưng chúng có mục đích khác nhau và được sử dụng trong các bối cảnh riêng biệt. 

• undefined: Một giá trị nguyên thủy (primitive value) được tự động gán cho các giá trị trong các trường hợp như biến chưa được khởi tạo, hàm trả về bị thiếu hay thuộc tính của đối tượng (object), phần tử mảng (array elements) không tồn tại. 
• null: Giá trị đặc biệt trong JavaScript biểu thị cho sự vắng mặt có chủ đích của bất kỳ giá trị đối tượng nào, thường được sử dụng để chỉ định “không có giá trị” (no value), đặt lại hoặc xóa biến. 

Để hiểu rõ hơn về sự khác biệt giữa hai thuộc tính này, bạn có thể theo dõi bảng so sánh dưới đây. 

Xem chi tiết: Sự khác biệt giữa undefined và null trong JavaScript

Các câu hỏi thường gặp về undefined trong JavaScript

Tại sao hàm JavaScript bị undefined?

Có một số nguyên nhân phổ biến khiến hàm của bạn bị undefined như:

• Hàm gán vào biến nhưng gọi trước khi gán giá trị: Nếu bạn khai báo hàm dưới dạng biểu thức (function expression) với var, biến sẽ được hoisting nhưng chưa có giá trị. Gọi hàm trước khi gán sẽ khiến biến có giá trị là undefined, và nếu cố gọi sẽ bị lỗi TypeError. 
• Hàm không có lệnh return, dẫn đến trả về undefined: Khi một hàm không trả về giá trị cụ thể, mặc định nó sẽ trả về undefined.
• Hàm có return nhưng không kèm giá trị: Ngay cả khi bạn viết return, nếu không đi kèm giá trị nào, thì kết quả trả về vẫn là undefined.

Làm sao để tránh lỗi undefined trong JavaScript?

Để hạn chế lỗi undefined, bạn có thể áp dụng những cách sau đây. Mỗi cách sẽ giúp bạn kiểm soát giá trị biến tốt hơn và viết code an toàn hơn:

• Nên khở tạo biến ngay khi khai báo nếu bạn biết chắc chắn giá trị ban đầu: Điều này sẽ tránh lỗi do undefined ngoài ý muốn. Tuy nhiên, nếu logic yêu cầu biến tạm thời chưa có giá trị, hãy đảm bảo kiểm tra kỹ khi sử dụng. 
• Sử dụng toán tử typeof để kiểm tra biến trước khi dùng: Giúp bạn tránh truy cập vào các biến chưa được khai báo hoặc bị undefined.
• Dùng toán tử an toàn như ?. (optional chaining): Truy cập sâu vào object mà không lo bị lỗi nếu một phần nào đó bị undefined.
• Kiểm tra và xử lý đầy đủ các đối số trong hàm: Giúp đảm bảo các tham số luôn có giá trị khi sử dụng.

Tổng kết

JavaScript undefined không chỉ đơn thuần là một giá trị mặc định khi biến chưa được gán, mà còn là chìa khóa để hiểu rõ cơ chế hoạt động của ngôn ngữ này. Việc phân biệt undefined với null, đồng thời biết cách kiểm tra và xử lý chúng đúng cách sẽ giúp bạn viết code an toàn hơn, rõ ràng hơn và ít lỗi hơn. Hy vọng bài viết đã cung cấp cho bạn kiến thức toàn diện, thực tiễn và dễ áp dụng về undefined nhé.

Xem chi tiết: JavaScript Developer là gì? Các hướng phát triển của JavaScript Developer