TYPESCRIPT
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Sự khác nhau giữa Null và Undefined trong TypeScript

Việc hiểu rõ sự khác biệt giữa hai giá trị "Null" và "Undefined" là một phần quan trọng của việc phát triển ứng dụng chất lượng và tránh được nhiều lỗi phổ biến. Mặc dù cả hai giá trị này thường được sử dụng để biểu thị sự vắng mặt của giá trị, nhưng chúng có ý nghĩa và cách sử dụng riêng biệt.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Trong bài viết này,mình sẽ đi vào chi tiết về sự khác biệt giữa Null và Undefined trong TypeScript. Mình sẽ tìm hiểu về định nghĩa, ý nghĩa và cách sử dụng của hai giá trị này. Điều này sẽ giúp bạn tránh những lỗi thường gặp và viết mã TypeScript chính xác hơn. Hãy cùng khám phá.

Khái niệm về Null và Undefined

Null

  • Null là một giá trị đặc biệt trong TypeScript, thường được sử dụng để biểu thị rằng biến hoặc thuộc tính không có giá trị hoặc không tồn tại.
  • Khi một biến được gán giá trị Null, điều này có nghĩa rằng nó đang rõ ràng chỉ định là không có giá trị nào cả.
  • Null là một giá trị có kiểu dữ liệu là "null."

Undefined

Bài viết này được đăng tại [free tuts .net]

  • Undefined cũng là một giá trị đặc biệt trong TypeScript, thường được sử dụng khi một biến hoặc thuộc tính tồn tại nhưng chưa được gán giá trị.
  • Undefined biểu thị rằng biến chưa được khởi tạo hoặc chưa có giá trị được gán.
  • Undefined là một giá trị có kiểu dữ liệu là "undefined."

Ví dụ cụ thể:

let nullValue: null = null;
let undefinedValue: undefined = undefined;

let noValue; // Biến noValue sẽ có giá trị undefined mặc định

Trong ví dụ trên, mình đã định nghĩa biến nullValue với giá trị Null và biến undefinedValue với giá trị Undefined. Biến noValue chưa được gán giá trị, do đó nó có giá trị mặc định là Undefined.

Sự khác nhau giữa Null và Undefined

Null: Biểu thị rằng biến hoặc thuộc tính tồn tại nhưng không có giá trị, thường được gán một cách tường minh bởi người lập trình để chỉ định rõ rằng không có giá trị nào.

Undefined: Biểu thị rằng biến hoặc thuộc tính tồn tại nhưng chưa được gán giá trị, thường là giá trị mặc định của biến chưa khởi tạo.

Sử dụng trong TypeScript

  • Null và Undefined là hai kiểu dữ liệu cơ bản trong TypeScript, và chúng có thể được sử dụng để chỉ định trạng thái của biến hoặc thuộc tính.

Sự khác biệt trong kiểm tra kiểu dữ liệu:

  • Khi kiểm tra kiểu dữ liệu của Null hoặc Undefined, mình sử dụng toán tử typeof.
  • typeof null sẽ trả về "object," đây là một trong những điểm khác biệt giữa Null và Undefined.
  • typeof undefined sẽ trả về "undefined," chỉ định rằng giá trị chưa được gán.

Ví dụ minh họa:

let nullValue: null = null;
let undefinedValue: undefined = undefined;

console.log(typeof nullValue); // "object"
console.log(typeof undefinedValue); // "undefined"

let noValue; // Biến noValue có kiểu dữ liệu undefined

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

Trong ví dụ trên, mình đã sử dụng typeof để kiểm tra kiểu dữ liệu của Null và Undefined, và mình cũng đã thấy sự khác biệt trong việc kiểm tra kiểu dữ liệu giữa hai giá trị này.

Khi nào nên sử dụng Null và Undefined

Trường Hợp Sử Dụng Null

  • Sử dụng Null khi bạn muốn chỉ định rằng một biến hoặc thuộc tính tồn tại nhưng không có giá trị.
  • Thường được sử dụng khi bạn cần đặt một biến thành một trạng thái không có giá trị cụ thể.

Ví dụ:

let customerName: string | null = null;
if (customerName === null) {
    console.log("Không có tên khách hàng.");
}

Trường Hợp Sử Dụng Undefined:

  • Sử dụng Undefined khi bạn muốn chỉ định rằng một biến hoặc thuộc tính tồn tại nhưng chưa được gán giá trị.
  • Thường xảy ra khi biến được khai báo nhưng không được khởi tạo.

Ví dụ:

let temperature: number | undefined;
// Trong trường hợp này, biến temperature tồn tại nhưng chưa có giá trị cụ thể.

Trong cả hai trường hợp, việc sử dụng Null và Undefined giúp bạn biểu thị trạng thái của biến hoặc thuộc tính một cách rõ ràng, đồng thời giúp tránh lỗi thời gian chạy do truy cập biến chưa được khởi tạo.

Ví dụ minh họa

function printLength(value: string | null) {
    if (value !== null) {
        console.log(value.length);
    } else {
        console.log("Giá trị là Null.");
    }
}

let name: string | null = "John";
printLength(name); // Kết quả: 4

let address: string | null = null;
printLength(address); // Kết quả: Giá trị là Null.

Trong ví dụ trên, việc hiểu rõ sự khác nhau giữa Null và Undefined cho phép kiểm tra trước khi truy cập thuộc tính "length," giúp tránh lỗi thời gian chạy.

Kết bài

Trong bài viết này, mình đã tìm hiểu về sự khác nhau giữa Null và Undefined trong TypeScript. Null và Undefined là hai giá trị đặc biệt được sử dụng để biểu thị sự thiếu vắng của dữ liệu, nhưng chúng có sự khác biệt trong cách chúng được sử dụng và kiểm tra.

Mình đã biết rằng Null là một giá trị được gán rõ ràng cho một biến, trong khi Undefined đại diện cho việc biến chưa được gán giá trị hoặc thuộc tính không tồn tại. Ta đã thấy cách kiểm tra kiểu dữ liệu của Null và Undefined, và cách sử dụng chúng trong các tình huống khác nhau.

Ta cũng đã thấy rằng hiểu rõ sự khác nhau giữa Null và Undefined giúp tránh lỗi và tăng tính ổn định của mã nguồn. Việc viết mã rõ ràng và hiệu quả hơn cũng trở nên dễ dàng hơn khi ta hiểu cách sử dụng mỗi giá trị này.

Hy vọng rằng bài viết này đã giúp bạn hiểu rõ hơn về sự khác nhau giữa Null và Undefined trong TypeScript và cách áp dụng chúng trong việc viết mã nguồn.

Cùng chuyên mục:

Bài tập TypeScript: Classes và Inheritance trong Typescript

Bài tập TypeScript: Classes và Inheritance trong Typescript

Bài tập TypeScript: Các kiểu dữ liệu mảng và tuple.

Bài tập TypeScript: Các kiểu dữ liệu mảng và tuple.

Bài tập TypeScript: Kiểu Generic Types trong Typescript

Bài tập TypeScript: Kiểu Generic Types trong Typescript

Bài tập TypeScript: Lập trình Hướng đối tượng trong TypeScript

Bài tập TypeScript: Lập trình Hướng đối tượng trong TypeScript

Bài tập TypeScript: Các dạng bài tập cơ bản

Bài tập TypeScript: Các dạng bài tập cơ bản

Phân tích JSON trong TypeScript

Phân tích JSON trong TypeScript

Property trong TypeScript

Property trong TypeScript

Phần 2: Biến trong TypeScript

Phần 2: Biến trong TypeScript

Phần 1: Biến trong TypeScript

Phần 1: Biến trong TypeScript

Triple-Slash Directives trong TypeScript là gì?

Triple-Slash Directives trong TypeScript là gì?

Phân biệt Modules và Namespaces trong TypeScript

Phân biệt Modules và Namespaces trong TypeScript

Tìm hiểu Branded Type trong TypeScript

Tìm hiểu Branded Type trong TypeScript

Namespaces trong Typescript

Namespaces trong Typescript

Declaration Merging trong TypeScript

Declaration Merging trong TypeScript

Cách sử dụng @ts-expect-error trong typescript

Cách sử dụng @ts-expect-error trong typescript

5 ký hiệu khó hiểu cần biết trong TypeScript

5 ký hiệu khó hiểu cần biết trong TypeScript

Dependency Injection trong Typescript

Dependency Injection trong Typescript

Mapped Types trong TypeScript

Mapped Types trong TypeScript

5 Cách giúp bạn loại bỏ

5 Cách giúp bạn loại bỏ "any" trong TypeScript

10 mẹo và thủ thuật hay nhất trong TypeScript

10 mẹo và thủ thuật hay nhất trong TypeScript

Top