You would often hear the most seasoned react developers suggest using the spread operator to copy an array instead of simply assigning it to a new variable. This has to do with specific data types being a reference type in JavaScript, hence being mutable. The concept of mutability and immutability in JavaScript is essential to understand to avoid errors. Let’s dive deeper into the idea of mutability vs. immutability in JavaScript. Primitive Types vs. Reference Types in JavaScript The data assigned to a JavaScript variable can be of two types, the primitive type and the reference type. There is a difference in how JavaScript treats these two data types. To know how they are treated differently, let’s first understand the difference between primitive and reference types. Primitive Types Primitive types are simple atomic pieces of data in JavaScript. Primitive types are always saved and accessed by the variable's value and not as a reference to another object. There are six primitive types in JavaScript: undefined null boolean number strings symbol Reference types Reference types are not simple atomic values but are objects that are made up of multiple properties assigned to them. They are stored as a reference in memory and not as independent values assigned to variables. There are three reference types in JavaScript: objects arrays functions How Primitive Types and Reference Types are Stored in Memory How primitive types and reference types are stored in the memory is the basis of how they are different from each other. Let’s look at a few examples and try to understand how they utilize memory differently. Memory Utilization by Primitive Types As highlighted earlier, primitive types are stored as a single atomic value assigned to a variable in the memory. Let’s see this example: name = ; name2 = name; let 'john' let Looking at the above example, I created a variable name and assigned it a value . Now JavaScript will save this as a single atomic value in the memory. Now, if i create a new variable and assign it a value of the variable name JavaScript will go ahead and create a new space in the memory and allocate the same value of the variable name and assign it to the variable . The new value assigned to the variable , is entirely separate from the variable and does not have any reference to it whatsoever. john name2 name2 name2 name Memory Utilization by Reference Types Reference values are objects stored in memory and references to objects instead of dedicated places in memory, unlike primitive types. Let’s look at the following example to understand better how the reference types are saved in memory by JavaScript. person = { : , : ,
}; person2 = person; let name 'john' age 22 let Let’s just declared a variable called which will contain an object containing the name and the age of the object. Now I will go ahead and create another variable named and assign it the same object. This is where things start getting different as compared to the primitive types. In this case, JavaScript will save the object simply as a reference to the object. person person person2 person person2 person If you look at this image, you will realize that JavaScript here is actually pointing to the same object in the memory. Though it has created a new variable, as a value, that variable just is referring to the same object that we created previously. person Understanding Immutability and Mutability of Primitive and Reference Types in JavaScript Since we are now clear with the primitive and reference types in JavaScript, we can easily understand the concept of mutability and immutability in JavaScript. Mutable can be changed or added to where immutable means something that cannot be changed or added. Primitive values in JavaScript cannot have anything added upon to them, they can only be re-assigned, and hence all primitive values in JavaScript are immutable. Let see this with an example. name = ; name2 = name; .log(name); .log(name2); name2 = ; .log(name); .log(name2); let 'john' let console console /*
 * john
 * john 
 */ let 'doe' console console /*
 * john
 * doe 
 */ Extending our previous example of primitive types, let’s print the values of both our variables, i.e. and to the console and see what we get. As expected, both the variables return the value john. Now let’s reassign to and then again print the values of both the variables to the console. Now you see that the value of only was re-assigned by JavaScript to , but the variable did not change. This show’s that JavaScript treats these 2 variables separately, although was originally copied from the variable . This proves that the primitive values in JavaScript, in this case, strings, are immutable. name name2 name2 doe name2 doe name name2 name Let’s try to replicate the same example for reference types as well. Picking up from our previous example, let’s print the values of both and objects to the console and see what we get. person person2 person = { : , : ,
}; person2 = person; .log(person); .log(person2); let name 'john' age 22 let console console /*
* {
* name: 'john',
* age: 22,
* }
*
* {
* name: 'john',
* age: 22,
* }
*/ We see two objects printed on the console with the same properties. Now I will change one of the properties of the object and print them to the console again. person2 person2.name = ; .log(person); .log(person2); let 'doe' console console /*
* {
* name: 'doe',
* age: 22,
* }
*
* {
* name: 'doe',
* age: 22,
* }
*/ You see that JavaScript has changed as well as . This is because the object was created by referencing the object. With reference types, JavaScript creates a reference to the same object, and the object remains mutable. Since the object is mutable, it can be changed, or a new property can be added. person person2 person2 person The Spread Operator The spread operator was introduced in ES6 ( ) and lets you copy your objects safely and create a new instance of the object instead of merely referencing the previous object. Let’s look at the same example and see how we can copy an object and save a new instance of the variable's object. more information on ES6 person = { : , : ,
}; person2 = {...person}; person2.name = ; .log(person); .log(person2); let name 'john' age 22 let let 'doe' console console /*
* {
* name: 'john',
* age: 22,
* }
*
* {
* name: 'doe',
* age: 22,
* }
*/ Let’s take the same person object, and instead of assigning it directly to a variable this time, let’s use the spread operator to copy it. The spread operator can be used by prefixing three dots … in front of the object that you want to copy and encapsulate it using the literal object syntax. This way, JavaScript creates a new object and stores it in the variable . Let’s try to change one of the properties of . I will change the name to . Now let’s print both the object to the console and see what we get. You see, this time, we only changed the name property of the object and not the object. This is because the was created and saved as a new object using the spread operator and not as a reference to the object. person2 person2 doe person2 person person2 person PS: I have created an extensive . It has been in a manner where it becomes easy for you to refer to each property and method for various JavaScript objects. It's absolutely free to download from the above link ☺️ JavaScript cheatsheet Previously published at https://cloudaffle.com/post/mutability-vs-immutability-javascript

Different

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - DEVELOPER.

2020 - Hacker Noon Contributor of the Year in DEVELOPER

Download My JavaScript CheatSheet

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Mutability And Immutability In JavaScript Explained In Detail

Too Long; Didn't Read

Companies Mentioned

Manik

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Mutability And Immutability In JavaScript Explained In Detail

Too Long; Didn't Read

Companies Mentioned

Manik

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES