Các kiểu dữ liệu trong javascript là gì năm 2024

JavaScript cho phép bạn sử dụng kiểu nguyên thủy giống như object. Nghĩa là bạn có thể gọi các phương thức của kiểu nguyên thủy giống như gọi với object.

Nghe có vẻ vô lý nhưng đúng là như vậy. Trước khi đi vào chi tiết, bạn cần phân biệt rõ kiểu nguyên thủy và object.

► Kiểu nguyên thủy:

• Có 7 kiểu dữ liệu nguyên thủy là: string, number, bigint, boolean, symbol, null và undefined.
• Chỉ lưu một giá trị nguyên thủy.

► Object:

• Là tập hợp của các cặp key-value.
• Có thể khởi tạo object bằng cặp dấu {}, ví dụ { x: 1, y: 2 }.
• Một số loại object đặc biệt trong JavaScript như: function,

  let name = "Alex"; console.log(name.toUpperCase()); // ALEX

  0,

  let name = "Alex"; console.log(name.toUpperCase()); // ALEX

  1,

  let name = "Alex"; console.log(name.toUpperCase()); // ALEX

  2,...

Điều đặc biệt nhất của object là bạn có thể lưu hàm thành một thuộc tính trong object. Hàm đó gọi là phương thức của object, ví dụ:

let p = {
  x: 1,
  y: 2,
  displayLog() {
    console.log(`{x: ${this.x}, y: ${this.y}}`);
  },
};
p.displayLog(); // {x: 1, y: 2}

Có nhiều object mặc định của JavaScript giúp bạn thao tác với ngày tháng, trình duyệt, xử lý lỗi,... Mỗi đối tượng có những thuộc tính và phương thức khác nhau.

Điều này giúp việc lập trình trở nên dễ dàng hơn. Nhưng ngược lại, object tốn nhiều tài nguyên để lưu trữ hơn.

Trên đây là sự khác nhau giữa kiểu nguyên thủy và object. Vậy sử dụng các phương thức của kiểu nguyên thủy nghĩa là thế nào?

Một nghịch lý khi tạo ra JavaScript là:

• Có nhiều thứ cần làm với kiểu nguyên thủy - string và number. Nghĩa là cần có các phương thức để làm việc với kiểu nguyên thủy.
• Nhưng kiểu nguyên thủy phải đơn giản nhất có thể - nhẹ nhất và nhanh nhất.

Để giải quyết vấn đề này, JavaScript thực hiện như sau:

• Kiểu nguyên thủy vẫn chỉ lưu một giá trị duy nhất mà không lưu trữ các phương thức nào khác.
• Khi gọi phương thức của kiểu nguyên thủy, thực chất là JavaScript engine tự động tạo ra một "wrapper object" - đối tượng đóng gói. Object này chứa giá trị kiểu nguyên thủy và phương thức cần gọi. Sau khi gọi xong phương thức, "wrapper object" sẽ được giải phóng.

Những "wrapper object" ứng với các kiểu dữ liệu nguyên thủy là:

let name = "Alex";
console.log(name.toUpperCase()); // ALEX

3,

let name = "Alex";
console.log(name.toUpperCase()); // ALEX

4,

let name = "Alex";
console.log(name.toUpperCase()); // ALEX

5,

let name = "Alex";
console.log(name.toUpperCase()); // ALEX

6,

let name = "Alex";
console.log(name.toUpperCase()); // ALEX

7. Những đối tượng này cung cấp các phương thức khác nhau để bạn làm việc với kiểu nguyên thủy.

Ví dụ một phương thức của string là

let name = "Alex";
console.log(name.toUpperCase()); // ALEX

8. Phương thức này trả về giá trị string với các kí tự đều viết hoa.

let name = "Alex";
console.log(name.toUpperCase()); // ALEX

Quá trình xử lý hiểu đơn giản là:

• Ban đầu khởi tạo biến

  let name = "Alex"; console.log(name.toUpperCase()); // ALEX

  9 với giá trị kiểu string.
• Khi gọi

  let zero = 0; console.log(typeof zero); // number let objZero = new Number(0); console.log(typeof objZero); // object

  0, JavaScript tạo một "wrapper object" chứa giá trị của

  let name = "Alex"; console.log(name.toUpperCase()); // ALEX

  9 và phương thức

  let zero = 0; console.log(typeof zero); // number let objZero = new Number(0); console.log(typeof objZero); // object

  2.
• Phương thức

  let zero = 0; console.log(typeof zero); // number let objZero = new Number(0); console.log(typeof objZero); // object

  3 gọi xong trả về giá trị string mới (với tất cả các chữ cái được viết hoa), rồi hiển thị ra console.
• Sau đó, "wrapper object" được giải phóng, lúc này chỉ còn biến

  let name = "Alex"; console.log(name.toUpperCase()); // ALEX

  9 - kiểu nguyên thủy.

Đó là cách gọi phương thức của kiểu nguyên thủy mà vẫn đảm bảo kiểu nguyên thủy đơn giản và nhẹ nhất có thể.

Các hàm khởi tạo

let name = "Alex";
console.log(name.toUpperCase()); // ALEX

3,

let name = "Alex";
console.log(name.toUpperCase()); // ALEX

4 và

let name = "Alex";
console.log(name.toUpperCase()); // ALEX

6 được JavaScript Engine sử dụng nội bộ.

Bạn có thể chủ động sử dụng các hàm khởi tạo này với toán tử

let zero = 0;
console.log(typeof zero); // number
let objZero = new Number(0);
console.log(typeof objZero); // object

8 để tạo ra "wrapper object". Nhưng thực tế là bạn không nên, vì có nhiều trường hợp gây khó hiểu.

let zero = 0;
console.log(typeof zero); // number
let objZero = new Number(0);
console.log(typeof objZero); // object

Bạn thấy rằng,

let zero = 0;
console.log(typeof zero); // number
let objZero = new Number(0);
console.log(typeof objZero); // object

9 là kiểu number nhưng

let objZero = new Number(0);
if (objZero) {
  console.log("zero là truthy!"); // zero là truthy!
}

0 lại là kiểu object. Mà object thì luôn là truthy.

Ví dụ sử dụng

let objZero = new Number(0);
if (objZero) {
  console.log("zero là truthy!"); // zero là truthy!
}

0 với câu lệnh

let objZero = new Number(0);
if (objZero) {
  console.log("zero là truthy!"); // zero là truthy!
}

2:

let objZero = new Number(0);
if (objZero) {
  console.log("zero là truthy!"); // zero là truthy!
}

Điều này đôi khi khá khó hiểu và dễ gây nhầm lẫn.

Vì vậy, lời khuyên là bạn không nên dùng

let objZero = new Number(0);
if (objZero) {
  console.log("zero là truthy!"); // zero là truthy!
}

3,

let objZero = new Number(0);
if (objZero) {
  console.log("zero là truthy!"); // zero là truthy!
}

4 hay

let objZero = new Number(0);
if (objZero) {
  console.log("zero là truthy!"); // zero là truthy!
}

5 với toán

let zero = 0;
console.log(typeof zero); // number
let objZero = new Number(0);
console.log(typeof objZero); // object

8 để khởi tạo.

Nhưng nếu sử dụng các hàm này mà không dùng toán tử

let zero = 0;
console.log(typeof zero); // number
let objZero = new Number(0);
console.log(typeof objZero); // object

8 thì sao?

Việc không sử dụng toán tử

let zero = 0;
console.log(typeof zero); // number
let objZero = new Number(0);
console.log(typeof objZero); // object

8 với các hàm trên lại khá hữu ích. Chúng sẽ chuyển đổi kiểu dữ liệu về kiểu nguyên thủy tương ứng.

Ví dụ sử dụng hàm

let objZero = new Number(0);
if (objZero) {
  console.log("zero là truthy!"); // zero là truthy!
}

3 để chuyển đổi kiểu dữ liệu về number:

let num = Number("123");
console.log(num); // 123
console.log(typeof num); // number

Gọi phương thức của

let num = Number("123");
console.log(num); // 123
console.log(typeof num); // number

0 và

let num = Number("123");
console.log(num); // 123
console.log(typeof num); // number

1 đều bị lỗi như sau:

console.log(null.toUpperCase());
// Uncaught TypeError:
// Cannot read properties of null (reading 'toUpperCase')
console.log(undefined.toUpperCase());
// Uncaught TypeError:
// Cannot read properties of undefined (reading 'toUpperCase')

Có thể gọi phương thức của kiểu nguyên thủy (trừ

let num = Number("123");
console.log(num); // 123
console.log(typeof num); // number

0 và

let num = Number("123");
console.log(num); // 123
console.log(typeof num); // number

1).

Cơ chế hoạt động là: JavaScript tạo ra một "wrapper object" chứa giá trị nguyên thủy và phương thức sử dụng. Sau khi phương thức gọi xong thì "wrapper object" được giải phóng.

Các bài viết sau mình sẽ đi vào chi tiết các phương thức hữu ích của:

let objZero = new Number(0);
if (objZero) {
  console.log("zero là truthy!"); // zero là truthy!
}

3 và

let objZero = new Number(0);
if (objZero) {
  console.log("zero là truthy!"); // zero là truthy!
}

4.

Cho đoạn code sau:

let str = "Hello";
str.prop = 1;
console.log(str.prop);

Kết quả hiển thị là gì?

Xem đáp án

Kết quả là:

let num = Number("123");
console.log(num); // 123
console.log(typeof num); // number

1.

Giải thích:

• Khi gọi

  let num = Number("123"); console.log(num); // 123 console.log(typeof num); // number

  7, JavaScript tạo ra một "wrapper object" chứa giá trị

  let num = Number("123"); console.log(num); // 123 console.log(typeof num); // number

  8 và thuộc tính mới thêm vào

  let num = Number("123"); console.log(num); // 123 console.log(typeof num); // number

  9.
• Nhưng sau câu lệnh đó, "wrapper object" bị hủy và chỉ còn lại giá trị nguyên thủy

  let num = Number("123"); console.log(num); // 123 console.log(typeof num); // number

  8.
• Vì vậy, kết quả là

  let num = Number("123"); console.log(num); // 123 console.log(typeof num); // number

  1.

Chú ý:

Nếu sử dụng strict mode thì bạn sẽ bị lỗi Uncaught TypeError: Cannot create property 'prop' on string 'Hello'

Number là kiểu dữ liệu gì?

2. Kiểu dữ liệu Number. Kiểu dữ liệu number được sử dụng để biểu thị các số dương hoặc âm có hoặc không có vị trí thập phân hoặc các số được viết bằng ký hiệu số mũ, ví dụ: 1,5e-4 (tương đương 1,5x10-4).

Object là kiểu dữ liệu gì?

Object là 1 kiểu dữ liệu phức tạp - reference type có thể chứa nhiều kiểu dữ liệu khác nhau thông qua cặp key, value. Value có thể là kiểu dữ liệu bất kỳ: number, string, boolean, array, function, object…

NaN trong lập trình là gì?

Trong tin học, NaN, (viết tắt của từ tiếng Anh not a number - không phải số), là một giá trị của kiểu dữ liệu số, biểu diễn một giá trị không xác định hoặc không thể biểu diễn, nó thường gặp trong các phép tính dấu phẩy động.

Instanceof trong JS là gì?

Toán tử instanceof trong Java là một toán tử được sử dụng để kiểm tra xem đối tượng này có phải là instance của một class hay interface nào đó hay không? Kết quả trả về của toán tử này sẽ là true nếu đối tượng đó là thể hiện của class mà các bạn đang check, ngược lại thì false.