3

I'm currently in the learning process of JavaScript and really get confused about immutable values. What I understand is, when a value is created (stings/numbers/booleans), it can never be changed.

Now my question is, the variable that I assign values, the value of that variable is changeable. I can assign new values to that variable. So why immutability is important?

Also, when I assign a new value to a variable, what happen to the previous value? Does it stay in memory and block some spaces? Does it lost its pointer from that variable? Actually what happen?

Please help me to understand what is the actual use of the concepts "Mutable" and "Immutable" in JavaScript. Thanks in advance.

Provash
  • 1,892
  • 3
  • 20
  • 28
  • I think this question is similar like below link
    [understatnding immutable variable](http://stackoverflow.com/questions/16115512/understanding-javascript-immutable-variable)     – Nadimul De Cj Mar 28 '16 at 03:57
  • Maybe this [q&a](http://stackoverflow.com/q/36095779/5536315) helps –  Mar 29 '16 at 10:17

1 Answers1

8

What You Seem Confused About

Assignment of a variable has nothing to do with immutable or mutable objects. A variable is simply an alias: it refers to an object in memory. When you change a variable's value, all you've done is tell the compiler to stop associating that object with this variable and associate it with another object instead. Assignment does not affect the underlying object - the object never changes, you just no longer have a way to access it anymore.

Usually, when all references to an object are lost, they are garbage collected i.e. the memory allocated for the object is released and the object is lost forever. However, this also has nothing to do with the difference between immutable and mutable objects.

The Real Difference Between Immutable and Mutable Objects

Immutable objects do not modify the object in place (i.e change what it looks like) - they return a new copy of the data with the variables changed.

Mutable objects in Javascript do not return a copy, but let you change the object itself.

I liken it to the difference between array.splice() and array.slice(). splice() will change the original array by removing/inserting elements where needed - slice() will create a new array with just the elements you want. They can be made to do the same things - but one mutates the array in place, the other one creates a copy.

An immutable object is forced to always return a new copy when changed - it will not by itself be changed. A mutable object can - but does not have to - be mutated in place. Primitive types in Javascript are mostly immutable - you cannot change the form of a string once created (if you call replace on the JS string, you will receive a new string with the values you asked for replaced, not the same string with the value changed). Objects are mostly mutable: for instance you can do object[key] = value and change the object everywhere it is referenced.

tl;dr

When you change a mutable object, it is changed everywhere it is referenced. When you change an immutable object, it isn't changed at all - a new object is created, and all the old references to the object will give you the original object with nothing different about it.

Akshat Mahajan
  • 9,543
  • 4
  • 35
  • 44
  • 1
    The distinction of reassignment and mutation is crucial here. Mutation: `var s = "abc"; s[0] = "x"` yields `"abc"`. Reassignment: `var s = "abc"; s = "xbc"` yields `"xbc"`. If Strings were mutable in Javascript, both expressions would yield `"xbc"`. –  Mar 29 '16 at 10:34
  • @IvenMarquardt I think you meant `s[0] = "x"` yields `"xbc"`. – Akshat Mahajan Mar 29 '16 at 16:53
  • 2
    `s` is a string and thus immutable in Javascript. That's why the mutation fails and yields `"abc"`. **Assumed strings were mutable in Javascript**: `var s = "abc", t = s; s[0] = "x";`. Now `s` would contain `"abx"` and `t` would contain `"abc"`, because `s` and `t` are value types and these are always copied by value. –  Mar 29 '16 at 18:21