Mutable, Immutable Objects và sự biến đổi của giá trị trong hàm JavaScript | Laptrinhcanban.com

Mutable, Immutable Objects và sự biến đổi của giá trị trong hàm JavaScript

Hướng dẫn cách sử dụng Mutable và Immutable Objects trong hàm JavaScript. Khi gọi một hàm trong JavaScript, chúng ta truyền các giá trị vào hàm thông qua tham số. Có 2 kiểu dữ liệu có thể truyền vào hàm trong JavaScript là Mutable (đối tượng biến đổi) và Immutable(đối tượng bất biến). Tùy thuộc vào kiểu dữ liệu của giá trị này mà chúng có thể bị thay đổi trước và sau khi được truyền vào hàm trong JavaScript.

Có 2 kiểu dữ liệu có thể truyền vào hàm trong JavaScript như sau:

  • Mutable Objects: các đối tượng có thể thay thế giá trị của chúng sau khi được tạo ra, ví dụ như mảng trong JavaScript
  • Immutable Mutable: các đối tượng không thể thay thế giá trị của chúng sau khi được tạo ra, ví dụ như số hoặc chuỗi trong JavaScript

Sử dụng Immutable Objects trong hàm JavaScript

Khi chúng ta truyền vào hàm JavaScript các giá trị Immutable(đối tượng bất biến) như chuỗi, số chẳng hạn, nếu chúng ta có thay đổi các giá trị này bên trong hàm đi chăng nữa thì giá trị ban đầu của chúng cũng sẽ không bị thay đổi.

Ví dụ, giá trị của biến num thuộc kiểu số ( giá trị Immutable) sau đây trước và sau khi được sử dụng trong hàm cũng sẽ không bị thay đổi:

function square(num){
//thay đổi giá trị num bên trong hàm square()
num = num * num;
console.log(num);
}

let num = 10;
console.log(num);
//> 10

square(num);
//> 100

console.log(num);
//> 10

Khi chúng ta gọi hàm trên và truyền vào hàm giá trị của biến num, biến này sẽ được gán một giá trị mới là lũy thừa của chính nó bên trong hàm. Do đó hàm console.log() trong hàm square() sẽ in ra kết quả lũy thừa của biến num. Tuy nhiên kể cả khi chúng ta đã gán giá trị mới cho num bên trong hàm chăng nữa, thì giá trị ban đầu của num không đổi và sẽ vẫn bằng 10 như trên.

Tương tự với chuỗi cũng là giá trị Immutable, giá trị của một chuỗi trước và sau khi được sử dụng trong hàm cũng sẽ không bị thay đổi, kể cả khi chúng ta đã thay đổi giá trị của nó trong hàm như sau:

function flower(hoa){
//thay đổi giá trị hoa bên trong hàm flower()
hoa = 'tulip' ;
console.log(hoa);
}

let hoa = 'rose';
flower(hoa);
//> tulip

console.log(hoa);
//> rose

Sử dụng Mutable Objects trong hàm JavaScript

Ngược với Immutable Objects thì các Mutable Objects như mảng trong hàm JavaScript sẽ bị thay đổi giá trị ban đầu nếu chúng ta thay đổi giá trị của chúng bên trong hàm JavaScript.

Ví dụ, giá trị của mảng sau đây sẽ bị thay đổi trước và sau khi truyền nó vào hàm trong JavaScript:

function square(num_array){
for (let i = 0 ; i < num_array.length ; i++){
num_array[i] = num_array[i] * num_array[i];
}
console.log(num_array);
}

let num_array = [1, 2, 3];
console.log(num_array);
//> [ 1, 2, 3 ]
square(num_array);
//> [ 1, 4, 9 ]

console.log(num_array);
//> [ 1, 4, 9 ]

Khi chúng ta gọi hàm square() ở trên, mảng được gán trong biến num_array sẽ được truyền vào hàm thông qua việc gán giá trị của nó vào tham số num_array trong hàm. Bên trong hàm, các phần tử trong mảng sẽ được thay thế bởi lũy thừa của chính nó trước khi được in lần lượt ra màn hình. Và giống như thế, bất kỳ thay đổi nào đối với mảng bên trong hàm cũng sẽ làm thay đổi luôn giá trị ban đầu của nó.

Chú ý khi sử dụng Mutable Objects trong hàm JavaScript

Như Kiyoshi đã phân tích ở trên, nếu bạn sử dụng Mutable Objects trong hàm JavaScript và tiến hành các xử lý thay đổi giá trị của nó bên trong hàm, thì giá trị ban đầu của nó cũng sẽ bị thay đổi theo.

Do đó khi sử dụng và truyền các giá trị Mutable Objects trong hàm JavaScript, bạn hãy chú ý để tránh việc thay đổi ngoài ý muốn các giá trị của biến được gán các giá trị Mutable trước và sau, trong và ngoài hàm JavaScript.

Ví dụ, chúng ta có chương trình tính giá tiền của các mặt hàng, và có một đợt giảm giá ngắn trong vòng 1h đồng hồ để thu hút khách hàng. Để làm được điều này, chúng ta cần phải thay đổi giá các mặt hàng bằng một hàm trong JavaScript như sau:

function change_price(price_array, discount){
for (let i = 0 ; i < price_array.length ; i++){
price_array[i] = price_array[i] * (1 - discount);
}
console.log(price_array);
}

let price_array = [1000, 2000, 3000];
console.log(price_array);
//> [ 1000, 2000, 3000 ]

change_price(price_array, 0.2);
//>[ 800, 1600, 2400 ]

Sau 1h, đợt giảm giá kết thúc. Sẽ không có vấn đề gì nếu bạn có thêm xử lý chuyển đổi các giá trên về lại giá ban đầu. Tuy nhiên nếu như bạn không nắm rõ giá trị các biến trước và sau khi gọi hàm như thế nào và có kế hoạch chuyển lại giá về giá ban đầu, rất có thể các mặt hàng sẽ bị báo giá nhầm gây nên thiệt hại lớn cho cửa hàng của khách hàng.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn về cách sử dụng Mutable và Immutable Objects trong hàm JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.