Kiểu dữ liệu trong Javascript - JavaScript Data Types

Trong bài viết hướng dẫn này, chúng ta sẽ cùng tìm hiểu về các kiểu dữ liệu khác nhau (data types) trong JavaScript thông qua các ví dụ nhé 😄.

JavaScript Data Types

Có nhiều loại dữ liệu khác nhau mà chúng ta có thể sử dụng trong một chương trình JavaScript.

const number = 2;
const text = "Homiedev";

Ở ví dụ trên, chúng ta có giá trị 2 là kiểu integer. Homiedev là kiểu string. Chúng ta cùng tìm hiểu các kiểu dữ liệu khác trong Javascript nhé.

Sau đây là danh sách các kiểu dữ liệu Javascript:

Sau đây chúng ta cùng tìm hiểu chi tiết về các kiểu dữ liệu này nhé.

JavaScript String

String - Chuỗi được sử dụng để lưu trữ đoạn văn bản. Trong JavaScript, các chuỗi được chứa trong cặp dấu:

1. Single quotes (Nháy đơn): 'Xin chào'
2. Double quotes (Nháy kép): "Homiedev"
3. Backticks: `Đây là string`

Ví dụ:

const name = 'Trang';
const old = 12;
const result = `Mình tên ${name} và mình ${old} tuổi`;

Dấu nháy đơn và dấu nháy kép là giống nhau và bạn có thể sử dụng một trong hai.

backtick thường được sử dụng khi bạn cần thêm các biến hoặc biểu thức vào một chuỗi. Chúng ta thực hiện bằng cách bọc các biến hoặc biểu thức với ${biến hoặc biểu thức} như trên.

Kết quả chúng ta được:

console.log(result); // Mình tên Trang và mình 12 tuổi

JavaScript Number

Kiểu dữ liệu Number có thể là số nguyên (integer) hoặc số dấu phẩy động (floating number).

const number1 = 3;
const number2 = -999;
const number3 = 2e3 // 2 * 10^3

Giá trị của nó cũng có thể là +Infinity (Dương vô cực), -Infinity (Âm vô cực) và NaN (không phải là số - Not A Number).

Ví dụ:

const number1 = 5/0;
console.log(number1); // Infinity

const number2 = -5/0;
console.log(number2); // -Infinity

// string không chia được cho số
const number3 = "homiedev" / 2; 
console.log(number3);  // NaN

JavaScript BigInt

Trong JavaScript, Kiểu Number chỉ có thể đại diện cho các số nhỏ hơn (2⁵³ - 1) và lớn hơn - (2⁵³ - 1). Tuy nhiên, nếu bạn cần sử dụng một số lớn hơn thế, bạn có thể sử dụng kiểu dữ liệu BigInt.

Một số BigInt được tạo bằng cách thêm n vào cuối một số nguyên.

Ví dụ:

// BigInt value
const value1 = 2n;

// cộng 2 số big integers
const result1 = value1 + 1n;
console.log(result1); // 3n

const value2 = 1n;

const result2 = value2 + 1; 
console.log(result2); // Lỗi

Kết quả ta được như sau:

3n
Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

JavaScript Boolean

Kiểu dữ liệu này đại diện cho sự logic. Boolean đại diện cho một trong hai giá trị: true hoặc false.

Ví dụ:

const isMale = true;
const isEmpty = false;

JavaScript undefined

Kiểu dữ liệu undefined đại diện cho giá trị không được chỉ định. Nếu một biến được khai báo nhưng ta không gán giá trị cho biến, thì giá trị của biến đó sẽ là undefined.

Ví dụ:

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

Ta có thể gán undefined cho một biến như bình thường:

let text = undefined;
console.log(text); // undefined

JavaScript null

Trong JavaScript, null là một giá trị đặc biệt đại diện cho giá trị empty hoặc unknown value.

const number = null;

Các bạn có thể thấy kiểu giá trị null và undefined nhìn khá giống nhau. Để so sánh sự khác nhau giữa undefined và null trong Javascript mình đã viết một bài về nội dung này, các bạn có thể tìm đọc thêm: Sự khác biệt giữa undefined vs null JavaScript.

Chúng ta không nên gán undefined cho một biến làm giá trị khởi tạo. Thông thường, null được sử dụng để gán giá trị "không xác định" hoặc "giá trị trống" cho một biến.

JavaScript Symbol

Kiểu dữ liệu này đã được giới thiệu trong phiên bản JavaScript (ES2015).

Symbol trong Javascript là một giá trị nguyên thủy (primitive value) và là duy nhất (unique).

Ví dụ:

const value1 = Symbol('color');
const value2 = Symbol('color');

Mới nhìn vào chúng ta nghĩ value1 và value2 có giá trị giống nhau. Nhưng chúng ta đang sử dụng kiểu giá trị Symbol nên thực chất hai giá trị này khác nhau.

JavaScript Object

Object là một kiểu dữ liệu cho phép chúng ta lưu trữ các tập hợp dữ liệu (có thể chứa các giá trị với kiểu dữ liệu khác nhau).

Ví dụ:

const person = {
    name: 'Hà',
    old: 18,
    class: null,
    hasBoyFriend: false
};

JavaScript là một ngôn ngữ rất dễ chịu 😆. Nó tự động xác định kiểu dữ liệu của biến cho bạn. Có nghĩa là một biến có thể trở thành một kiểu dữ liệu khác kiểu dữ liệu lúc đầu.

Ví dụ:

let number = null; // kiểu null

number = 29; // kiểu number

number = "Học JS cơ bản"; // kiểu string

JavaScript typeof

Để xem một biến có kiểu dữ liệu là gì, chúng ta có thể sử dụng toán tử typeof.

Ví dụ:

const name = 'Tú';
console.log(typeof name); // "string"

const number = 2n;
typeof(number); // "bigint"

const isFemale = true;
console.log(typeof isFemale); // "boolean"

const data = null;
console.log(typeof data); // "object" 😬

typeof data đã trả về "object" thay vì kiểu null. Đây là một vấn đề các bạn nên lưu ý trong JavaScript. Bạn có thể coi đó là một bug của JavaScript ^^.

primitive vs non-primitive data types javascript

Ở bảng trên tất cả các kiểu dữ liệu ngoại trừ Object là kiểu dữ liệu nguyên thủy (primitive data type), còn Object là không nguyên thủy (non-primitive).

Primitive data type - kiểu dữ liệu nguyên thủy là khi ta sao chép giá trị biến này cho biến khác thì giá trị của 2 biến này độc lập và không liên quan với nhau.

Non-primitive data type (reference data type: kiểu dữ liệu tham chiếu) là khi gán hoặc sao chép dữ liệu thuộc kiểu Object thì biến đó chỉ lưu địa chỉ của giá trị đó trên vùng nhớ. Nó không lưu giá trị được gán.

Chúng ta cùng xem ví dụ bên dưới, mình sẽ khai báo biến có kiểu giá trị Object và gán giá trị biến đó cho một biến khác.

let object1 = {
  name:'Trang',
  age:18
};

let object2 = object1; 

object1.age = 20; // Cập nhật lại age = giá trị là 20 của object1

console.log(object2); // {name: 'Trang', age: 20} 😲

Sau khi console.log() thì điều bất ngờ đã xảy ra đó là object2 cũng bị thay đổi age. Đó là bởi vì 2 object này nằm trong cùng một vùng nhớ. Khi bạn thay đổi giá trị trong {} của biến nào thì cũng chính là thay đổi giá trị của biến kia.

Mình đã giới thiệu cho các bạn về các kiểu dữ liệu trong Javascript cũng như các vấn đề liên quan. Hy 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 😋.

Nếu thấy hay các bạn có thể chia sẻ bài viết nhé 😄. Hẹn các bạn trong các bài viết sắp tới.