To begin with comparing mutable vs immutable data types, let us have a look on possible data types that we get to use in JS.
If you're thinking what about arrays and functions, let me tell clear the misconception.
Functions and Arrays are kind of a "subtype" of the data type object. It's just that functions have an internal [Call] property that allows it to be invoked (called) whereas arrays have access to a
.length property which returns their length.
Immutable, as the name suggests, means can't be mutated (or changed). So you think why on earth can a variable's value be mutated, I mean that's what variables are for, right?
But there's a catch, Immutability in our context means that when you assign a variable to another using the assignment operator (=) then you can't change the initial variable's value when you change the value of the latter. For instance.
var one = 1; var two = one; two = 2; console.log(one); // 1 console.log(two); // 2
They are also called Primitive Values.
As you might have guessed, Mutable data types are the ones whose initial values can be mutated (or changed) even after the variable is assigned to another variable.
Note: Object is the only mutable (non-primitive) value, however there are many subtypes of it, which you already know, like Array or Functions which also are Non-Primitive values. For instance.
var numbers = [1, 2, 3]; var digits = numbers; console.log(digits); // [1, 2, 3] digits.push(4, 5, 6); console.log(digits); // [1, 2, 3, 4, 5, 6] console.log(numbers); // [1, 2, 3, 4, 5, 6]
You can see, how when we push something to the
digits array, it also becomes available in the
numbers array. Why so?
When you create a variable (say
a) and assign it an object or array it gets stored at a particular memory location. However, when you create another variable (say
b) and equate it to variable
b = a) then it gets the memory location of
a variable instead of a new copy of the object (or array). This is why objects are called Reference Types.
This is the reason, when you change
digits array on our example, it also changes
numbers array and vice versa. Its because our digits array point to the same location in memory that
numbers array refers to. This is why these are called Mutable Types.
They are also called Non-Primitive Values.
To conclude the above, we can say that Immutable data types are the ones which on being assigned to a new variable it returns a copy of the value, and the original value won't be changed if you fiddle with the new variable.
And Mutable types are the opposite, they are Reference Types (Non-primitive) which is why their original value gets changed once you change the value of its assigned variable.
So, now you've understood the concept, go around and google your curiosity out and also feel free to start a thread to discuss your understanding!