Javascript tuyển tập - Phần 5
- ##
Các kiểu dữ liệu trong Javascript
- ##
Phân biệt sự khác nhau giữa Primitive và Reference Types
- ##
Cảm ơn các bạn đã đọc
Chào các bạn, lại là mình đây! Trong phần 5 của series “Javascript tuyển tập”, chúng ta sẽ cùng nhau khám phá một chủ đề cực kỳ quan trọng: các kiểu dữ liệu trong JavaScript. Nắm vững các kiểu dữ liệu và cách chúng hoạt động, đặc biệt là sự khác biệt giữa kiểu nguyên thủy (Primitive) và kiểu tham chiếu (Reference), là nền tảng vững chắc để bạn tránh được nhiều lỗi phổ biến và viết code hiệu quả hơn.
Các kiểu dữ liệu trong Javascript
Trong JavaScript, có các kiểu dữ liệu cơ bản như số, chuỗi, boolean, null và undefined, cũng như các kiểu dữ liệu phức tạp như Object và mảng, và các kiểu dữ liệu đặc biệt như Symbol, function và BigInt.
Kiểu dữ liệu: Number
Kiểu dữ liệu số (Number): Đại diện cho các giá trị số. Có thể là các số nguyên, số thập phân hoặc số âm.
Ví dụ:
let age = 30; // số nguyên
let price = 9.99; // số thập phân
let temperature = -5; // số âm
Kiểu dữ liệu: String
Kiểu dữ liệu chuỗi (String): Đại diện cho các chuỗi ký tự. Chuỗi được đặt trong dấu nháy đơn (‘’) hoặc dấu nháy kép (“”).
Ví dụ:
let name = 'Alice';
let greeting = "Hello World";
Kiểu dữ liệu: Boolean
Kiểu dữ liệu boolean (Boolean): Đại diện cho hai giá trị true (đúng) hoặc false (sai).
Ví dụ:
let isLoggedIn = true;
let hasPermission = false;
Kiểu dữ liệu: Null
Kiểu dữ liệu null: Đại diện cho giá trị null, tức là không có giá trị hoặc không tồn tại Object.
Lưu ý về kiểu dữ liệu null: Khi sử dụng
typeof nulltrong JavaScript, nó sẽ trả về ‘object’. Đây là một lỗi lịch sử của ngôn ngữ.
Ví dụ:
let user = null; // Biến user không tham chiếu đến đối tượng nào
Kiểu dữ liệu: Undefined
Kiểu dữ liệu undefined: Đại diện cho biến chưa được gán giá trị hoặc không tồn tại.
Ví dụ:
let declaredVariable; // Biến được khai báo nhưng chưa gán giá trị, giá trị mặc định là undefined
let obj = {};
console.log(obj.nonExistentProperty); // Truy cập thuộc tính không tồn tại cũng trả về undefined
Kiểu dữ liệu: Object
Kiểu dữ liệu Object (Object): Đại diện cho một Object chứa nhiều thuộc tính và phương thức. Object được định nghĩa bằng cặp ngoặc nhọn {}.
Ví dụ:
let person = {
name: 'Bob',
age: 25,
};
Kiểu dữ liệu: Array
Lưu ý: Trong Javascript, Array không phải một kiểu dữ liệu riêng biệt. Array trong Javascript vẫn thuộc kiểu dữ liệu Object.
Array: Đại diện cho một tập hợp các phần tử. Mảng được định nghĩa bằng cặp ngoặc vuông [].
Ví dụ:
let numbers = [1, 2, 3, 4];
let fruits = ['apple', 'banana', 'cherry'];
Kiểu dữ liệu Symbol
Kiểu dữ liệu Symbol: Đại diện cho một Symbol. Symbol là một giá trị duy nhất không thể thay đổi và được sử dụng làm tên thuộc tính của Object.
Ví dụ:
const id = Symbol('id');
let user = {
name: 'Alice',
[id]: 123,
};
Kiểu dữ liệu function
Kiểu dữ liệu function: Đại diện cho một function. Function là một khối mã có thể được gọi bằng cách sử dụng tên của nó.
Ví dụ:
function greet() {
console.log('Hello!');
}
let sayHi = function () {
// function được gán cho biến
console.log('Hi!');
};
Kiểu dữ liệu BigInt
Kiểu dữ liệu BigInt: Đại diện cho các số nguyên lớn hơn 2^53 - 1. BigInt được định nghĩa bằng cách thêm chữ n vào cuối một số nguyên.
Ví dụ:
const bigNumber = 123456789012345678901234567890n;
Lưu ý khi làm việc với kiểu dữ liệu
Khi làm việc với các kiểu dữ liệu, hãy nhớ rằng JavaScript là một ngôn ngữ linh hoạt và cho phép chuyển đổi kiểu dữ liệu tự động trong một số trường hợp.
Phân biệt sự khác nhau giữa Primitive và Reference Types
Đây là một khái niệm cốt lõi cần nắm vững trong JavaScript: cách biến lưu trữ và xử lý các giá trị tùy thuộc vào kiểu dữ liệu của chúng.
Khi làm việc với kiểu dữ liệu nguyên thủy (Primitive types), giá trị được sao chép và các biến độc lập với nhau. Một biến không ảnh hưởng đến giá trị của biến khác.
Trong khi đó, khi làm việc với kiểu dữ liệu tham chiếu (Reference types), giá trị không được sao chép mà chỉ tham chiếu đến Object ban đầu. Do đó, khi thay đổi một biến, biến khác cùng tham chiếu sẽ bị ảnh hưởng.
Điều này có ý nghĩa khi thực hiện các thao tác trên mảng và Object. Khi một mảng hoặc Object được chuyển từ một biến sang biến khác, thì cả hai biến sẽ tham chiếu đến cùng một Object trong bộ nhớ.
Ví dụ:
let num1 = 10;
let num2 = num1; // Giá trị 10 được sao chép
num2 = 20;
console.log(num1); // Output: 10 (num1 không bị ảnh hưởng)
let arr1 = [1, 2, 3];
let arr2 = arr1; // Tham chiếu đến cùng một mảng trong bộ nhớ
arr2.push(4); // Thay đổi mảng thông qua arr2
console.log(arr1); // Output: (arr1 bị ảnh hưởng vì cả hai cùng trỏ tới một mảng)
let obj1 = { title: 'Duong Nguyen' };
let obj2 = obj1; // Tham chiếu đến cùng một object trong bộ nhớ
obj2.title = 'Fullstack developer'; // Thay đổi object thông qua obj2
console.log(obj1); // Output: { title: 'Fullstack developer' } (obj1 bị ảnh hưởng vì cả hai cùng trỏ tới một object)
Lưu ý: Khi sao chép giá trị của một biến tham chiếu, chỉ sao chép tham chiếu, không phải tạo một bản sao độc lập của Object.
Để tạo một bản sao độc lập của một mảng hoặc Object, chúng ta có thể sử dụng các phương pháp như slice() cho mảng và Object.assign() hoặc spread operator (...) cho Object.
Ví dụ về tạo bản sao độc lập:
let arr1 = [1, 2, 3];
let arr2 = arr1.slice(); // Tạo một bản sao độc lập của mảng arr1
arr2.push(4); // Sự thay đổi chỉ áp dụng cho arr2
console.log(arr1); // Output: (arr1 không bị ảnh hưởng)
console.log(arr2); // Output:
let obj1 = { title: 'Duong Nguyen' };
let obj2 = Object.assign({}, obj1); // Tạo một bản sao độc lập của Object obj1
obj2.title = 'Fullstack developer'; // Sự thay đổi chỉ áp dụng cho obj2
console.log(obj1); // Output: { title: 'Duong Nguyen' } (obj1 không bị ảnh hưởng)
console.log(obj2); // Output: { title: 'Fullstack developer' }
let obj3 = { name: 'Nguyen Duong' };
let obj4 = { ...obj3 }; // Sử dụng spread operator để tạo một bản sao độc lập của Object obj3
obj4.name = 'Fullstack developer'; // Sự thay đổi chỉ áp dụng cho obj4
console.log(obj3); // Output: { name: 'Nguyen Duong' } (obj3 không bị ảnh hưởng)
console.log(obj4); // Output: { name: 'Fullstack developer' }
Kiểu dữ liệu nguyên thủy (Primitive types)
Kiểu dữ liệu nguyên thủy (Primitive types) bao gồm số, chuỗi, boolean, null và undefined, cùng với Symbol và BigInt (dựa trên các định nghĩa trước đó). Khi gán giá trị của kiểu dữ liệu nguyên thủy cho biến khác, giá trị được sao chép.
Ví dụ:
let a = 5;
let b = a; // b = 5
b = 10;
console.log(a); // 5
console.log(b); // 10
Kiểu dữ liệu tham chiếu (Reference types)
Kiểu dữ liệu tham chiếu (Reference types) bao gồm Object, mảng và function. Khi gán giá trị của kiểu dữ liệu tham chiếu cho biến khác, tham chiếu đến Object được chuyển, không phải giá trị thực tế.
Ví dụ:
let objA = { value: 10 };
let objB = objA; // objB tham chiếu đến cùng object với objA
objB.value = 20; // Thay đổi object qua objB
console.log(objA.value); // 20 (objA bị ảnh hưởng)
Việc hiểu và phân biệt giữa kiểu dữ liệu nguyên thủy và kiểu dữ liệu tham chiếu là rất quan trọng khi làm việc với JavaScript để tránh gặp phải những vấn đề liên quan đến tham chiếu và sao chép giá trị.
Cảm ơn các bạn đã đọc
Chào các bạn! Vậy là chúng ta đã cùng nhau đi qua phần 5 của series “Javascript tuyển tập”, nơi chúng ta đã khám phá các kiểu dữ liệu trong JavaScript, từ kiểu cơ bản như Number, String, Boolean, Null, Undefined, đến các kiểu phức tạp như Object và Array, và các kiểu đặc biệt như Symbol, Function, BigInt. Đặc biệt, chúng ta đã tìm hiểu kỹ về sự khác nhau quan trọng giữa kiểu dữ liệu nguyên thủy (Primitive) và kiểu dữ liệu tham chiếu (Reference) và cách chúng ảnh hưởng đến việc gán và sao chép giá trị, cũng như cách tạo bản sao độc lập cho kiểu tham chiếu. Nắm vững kiến thức này thực sự là nền tảng vững chắc giúp bạn viết code tốt hơn và tránh các lỗi phổ biến liên quan đến tham chiếu.
Cảm ơn các bạn rất nhiều vì đã dành thời gian đọc bài viết này!
Trong phần tiếp theo (Phần 6), chúng ta sẽ không đi lan man nữa mà sẽ đi sâu hơn vào một kiểu dữ liệu cụ thể: kiểu dữ liệu Number. Chúng ta sẽ tìm hiểu chi tiết về cách làm việc với số, các phép toán phổ biến, những giới hạn cần biết và các hàm tích hợp sẵn liên quan đến số.
Hẹn gặp lại các bạn ở phần 6 nhé!