Khám Phá Khái Niệm Biến Trong JavaScript

Trong JavaScript, biến là những thành phần quan trọng giúp quản lý dữ liệu. Biến có thể lưu trữ hai loại dữ liệu cơ bản: kiểu nguyên thủy và kiểu tham chiếu. Việc hiểu rõ sự khác biệt giữa hai loại dữ liệu này là rất cần thiết để vận dụng hiệu quả trong việc quản lý bộ nhớ, chia sẻ, lưu trữ và thay đổi dữ liệu. Bài viết này sẽ giúp bạn khám phá sâu hơn về khái niệm này thông qua các ví dụ thực tế và phương pháp xử lý phù hợp.

Xem thêm bài viết: 5 cách tốt nhất để viết mã JavaScript sạch

1. Kiểu Nguyên Thủy

Kiểu nguyên thủy là những kiểu dữ liệu đơn giản nhất trong JavaScript. Chúng lưu trữ trực tiếp giá trị và không thể thay đổi giá trị đã lưu trữ. Các kiểu nguyên thủy bao gồm:

• string: "hello"
• number: 42
• boolean: true hoặc false
• null
• undefined
• symbol
• bigint

Đặc điểm chính:

• Bất biến: Giá trị của kiểu nguyên thủy không thể thay đổi được sau khi được gán.
• Lưu trữ theo giá trị: Mỗi biến kiểu nguyên thủy chứa giá trị riêng biệt.

2. Kiểu Tham Chiếu

Ngược lại, kiểu tham chiếu lưu trữ vị trí bộ nhớ của các đối tượng thay vì lưu trữ giá trị thực. Những biến kiểu tham chiếu bao gồm:

• object: { name: 'Alice' }
• array: [1, 2, 3]
• function: function() { console.log('hello'); }
• Date: new Date()

Đặc điểm chính:

• Có thể thay đổi: Nội dung bên trong kiểu tham chiếu có thể được sửa đổi.
• Lưu trữ theo tham chiếu: Biến kiểu tham chiếu chỉ giữ lại địa chỉ vị trí bộ nhớ.

3. Ví Dụ Thực Tế

Ví dụ về Kiểu Nguyên Thủy

let a = 10;
let b = a;
b = 20;
console.log(a); // Kết quả: 10

• Giải thích: Gán giá trị của a cho b tạo ra một bản sao độc lập. Thay đổi b không ảnh hưởng đến a.

Ví dụ về Kiểu Tham Chiếu

let obj1 = { name: 'Alice' };
let obj2 = obj1;
obj2.name = 'Bob';
console.log(obj1.name); // Kết quả: 'Bob'

• Giải thích: obj1 và obj2 đều trỏ đến cùng một vị trí bộ nhớ. Khi thay đổi obj2, obj1 cũng bị ảnh hưởng.

4. Hình dung Khái Niệm

• Kiểu Nguyên Thủy: Hãy tưởng tượng mỗi biến như một chiếc hộp nhỏ riêng biệt, chứa giá trị. Khi sao chép, sẽ có thêm một hộp mới với giá trị độc lập.
• Kiểu Tham Chiếu: Hãy nghĩ về biến như nhãn dán trên một thùng chứa, nơi tất cả nhãn đều chỉ đến cùng một thùng. Khi nội dung thùng thay đổi, tất cả nhãn đều bị ảnh hưởng.

5. Thay Đổi (Mutation) vs Gán (Assignment)

Thay Đổi (Mutation)

Sửa đổi nội dung của đối tượng hiện có.

let arr = [1, 2, 3];
let arr2 = arr;
arr2.push(4);
console.log(arr); // Kết quả: [1, 2, 3, 4]

Gán (Assignment)

Thay đổi tham chiếu đến một đối tượng mới.

let arr = [1, 2, 3];
let arr2 = arr;
arr2 = [4, 5, 6];
console.log(arr); // Kết quả: [1, 2, 3]

6. Sao Chép Đối Tượng Và Mảng

Sao Chép Nông (Shallow Copy)

Để tạo một bản sao riêng biệt của một đối tượng hoặc mảng, bạn có thể sử dụng:

let original = { name: 'Alice' };
let copy = { ...original };
copy.name = 'Bob';
console.log(original.name); // Kết quả: 'Alice'

Sao Chép Sâu (Deep Copy)

Đối với các đối tượng lồng nhau, phương pháp sao chép sâu là cần thiết. Một cách phổ biến là sử dụng:

let nested = { person: { name: 'Alice' } };
let deepCopy = JSON.parse(JSON.stringify(nested));
deepCopy.person.name = 'Bob';
console.log(nested.person.name); // Kết quả: 'Alice'

7. Truyền Dữ Liệu Theo Giá Trị và Tham Chiếu

Kiểu Nguyên Thủy (Truyền Theo Giá Trị)

Khi kiểu nguyên thủy được truyền cho một hàm, một bản sao của giá trị được gửi đi.

function modifyValue(x) {
  x = 20;
}
let num = 10;
modifyValue(num);
console.log(num); // Kết quả: 10

Kiểu Tham Chiếu (Truyền Theo Tham Chiếu)

Khi truyền kiểu tham chiếu, địa chỉ bộ nhớ của đối tượng được gửi.

function modifyObject(obj) {
  obj.name = 'Bob';
}
let person = { name: 'Alice' };
modifyObject(person);
console.log(person.name); // Kết quả: 'Bob'

8. Kiểu Bao Đóng Nguyên Thủy (Primitive Wrapper Types)

Mặc dù kiểu nguyên thủy không thay đổi, JavaScript tạm thời bao đóng chúng trong đối tượng.

let str = 'hello';
console.log(str.length); // Kết quả: 5

9. Các Thực Tiễn Tốt Nhất

• Sử dụng const cho Kiểu Tham Chiếu: Khai báo đối tượng với const ngăn việc gán lại mà vẫn cho phép thay đổi nội dung.
  javascript Copy

  const obj = { name: 'Alice' };
  obj.name = 'Bob'; // Được phép
  obj = { age: 25 }; // Lỗi: Gán cho biến hằng.

• Tránh Thay Đổi Không Mong Muốn: Hãy đảm bảo bạn tạo bản sao khi cần thiết để tránh thay đổi dữ liệu không mong muốn.
• Biết Khi Nào Sử Dụng Sao Chép Sâu: Đối với các đối tượng lồng nhau, sử dụng sao chép sâu để đảm bảo độ độc lập.
• Tận Dụng Tính Bất Biến: Dùng thư viện như Immutable.js để giảm thiểu lỗi.

10. Những Cạm Bẫy Thường Gặp

• Nhầm lẫn giữa Gán và Thay Đổi: Kiểm tra kỹ xem bạn đang sửa đổi đối tượng hay gán lại tham chiếu.
• Sửa Đổi Tham Chiếu Chung: Cẩn thận khi thay đổi đối tượng được chia sẻ.
• Giả Định Tất Cả Bản Sao Đều Độc Lập: Nhớ rằng sao chép nông không bảo vệ trước sự thay đổi trong cấu trúc lồng nhau.

Kết Luận

Việc phân biệt giữa kiểu nguyên thủy và kiểu tham chiếu là kiến thức nền tảng trong JavaScript. Điều này ảnh hưởng đến cách bạn truyền dữ liệu, quản lý biến và giảm thiểu các tác dụng phụ không mong muốn. Bằng cách nắm vững và áp dụng các khái niệm này, bạn có thể phát triển mã JavaScript hiệu quả và dễ bảo trì hơn.
source: viblo