Hướng dẫn immutable object in 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){
  
  num = num * num;
  console.log(num);
}

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


square(num);


console.log(num);

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){
  
  hoa = 'tulip' ;
  console.log(hoa);
}

let hoa = 'rose';
flower(hoa);


console.log(hoa);

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);

square(num_array);


console.log(num_array);

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);


change_price(price_array, 0.2);

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.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a>&nbsp;và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">

Bài viết liên quan

• Arguments trong javascript và cách lấy các giá trị truyền vào hàm

• Arrow function - hàm mũi tên trong JavaScript

• Function object trong JavaScript

• Hàm ẩn danh (Anonymous Function) trong JavaScript

• Callback trong JavaScript

• Hàm đệ quy (recursive function) trong JavaScript và cách gọi một hàm bên trong chính nó

• Truyền tham số vào hàm trong JavaScript

• Cắt chuỗi trong JavaScript (slice)