Understanding how Immutable vector library works!!
Immutable.js
provides us the data structures and utilities that we need to start introducing this powerful concept of immutability into our applications.
###Objects & Arrays are mutable
JavaScript arrays & objects are mutable data. If you create an object, reference it as a different variable, and modify it, both references point to a changed value.
var myself = { name: 'Tom' };
var someoneElse = myself;
myself.name = 'Thomas';
// both myself & someoneElse are now equal to { name: 'Thomas' }
Mutability applies to arrays too: common array operations like .sort(), .push(), and .pop() all change arrays in place.
var numbers = [3, 2, 1];
var sorted = numbers.sort();
// both numbers & sorted are equal to [1, 2, 3]
// because calling .sort() sorts the array in-place
###Immutable.js
Luckily, the Immutable.js makes immutable data simple, by providing custom and efficient datastructures for unchanging data.
var myself = Immutable.Map({ name: 'Tom' });
Instead of changing myself in-place like I would with vanilla JavaScript, Immutable provides methods that yield new modified objects.
var someoneElse = myself.set('name', 'Thomas');
If you've dealt with this problem before, you might notice that there's another way of approaching this problem, by cloning objects:
var myself = { name: 'Tom' };
// clone myself, to ensure that changing someoneElse doesn't
// mutate it.
var someoneElse = JSON.parse(JSON.stringify(myself));
myself.name = 'Thomas';
Immutable improves upon this hack with a guarantee and an optimization:
- Immutable's methods like .set() can be more efficient than cloning because they let the new object reference data in the old object: only the changed properties differ. This way you can save memory and performance versus constantly deep-cloning everything.
- It's nearly impossible to accidentally mutate an Immutable object, and remarkably easy to accidentally forget to clone a normal object. Immutable objects give a strong guarantee that nowhere does anyone mutate data in-place.
For see the difference between them, please take a look to the example:
Party - Example
Immutable.js has the following data structures:
- List,
- Stack,
- Map,
- OrderedMap,
- Set,
- OrderedSet,
- Record,
- lazy Seq.
$ sudo npm install
Open index.html file in any browser