Data type in JavaScript has been analyze to 2 type Primitive and Reference. By default, reference data types are mutable including function, array, object..

 

1. What is Mutable in JavaScript?

Let's consider the following example:

let arr1 = [2, 3, 4];

let arr2 = arr1;

arr2[0] = "javascript";

console.log(arr1);

// ['javascript', 3, 4]

 

Variable arr1 has data type Array, variable arr2 is created from variable arr1. But when we change the value of variable arr2, variable arr1 is also changed. So, if a data type is mutable it will allow you to modify existing values without creating new values.

When the array or object is created, a pointer is added to the stack and this pointer points to a value on the Heap.

When we create the variable arr2, another pointer is added to the stack, but both point to the same object on the heap. When doing let arr2 = arr1; Reference data does not copy values on the heap, but only pointers on the stack.

 

2. How to copy values Object, Array are mutable?

The solution is to always create a reference for each new object when you want to clone an object. There are many ways to clone an Object, now I will only introduce the two ways that are considered the most practical: using the Object.assign() method and the rest operator (...).

Here's the syntax:

Object.assign(target, source)

    • The target: clone the source properties into the target and return the final result.
    • The source: is the place where the original drugs are stored.

Note: The target can be an empty object {}.

For example:

const obj1 = { name: "Java", age: 20 }

const obj2 = Object.assign({}, obj1);

obj2.age = 40;

console.log(obj1.age); // 20

console.log(obj2.age); // 40

 

The value of obj2.age has been converted to 40 and does not affect the value of obj1.

The rest operator (...) is quite simple to use, just add the sign ... in front of the name of the object to be copied.

For example:

const obj1 = { name: "Java", age: 20 }

const obj2 = { ...obj1};

obj2.age = 40;

console.log(obj1.age); // 20

console.log(obj2.age); // 40

 

 

3. How to create immutable Objects in JavaScript?

Normally Objects in javascript are mutable. However, you can also create immutable Objects. In this article, we will cover the usage of Object.defineProperty.

To create an immutable Object with Object.defineProperty, just define the property with writable as false (the default value of writable is false so you can ignore this).

const object1 = {};

Object.defineProperty(object1, 'property1', { value: 10, writable: false });

object1.property1 = 20; // throws an error in strict mode

console.log(object1.property1); // 10

Once we have defined an Object with Object.defineProperty, we will not be able to change the values of the properties in the Object.

 

4. Conclusion

Through this article, you will understand mutable properties in JavaScript. This will help you avoid errors regarding this feature during programming.

Objects are mutable but in some cases can still prevent the ability to change. Let's continue exploring JavaScript.

 

[Reference Source]

  • https://www.freecodecamp.org/news/mutability-vs-immutability-in-javascript/
  • https://www.pexels.com/

Leave a comment

*