Let’s look at the problem….

var obj1 = { key: 'some value' };

var obj2 = obj1;
obj2.key = 'another value';

console.log( obj1 === obj2) // true
console.log( obj1.key ) // 'another value'

When we changed obj2’s key property, it also changed obj1’s key property. No bueno!
The solution:

var obj1 = { key: 'some value' };

var obj2 = Object.assign( {}, obj1, { key: 'another value' });

console.log( obj1 === obj2) // false
console.log( obj1.key ) // 'some value'
console.log( obj2.key ) // 'another value'

As you can see we changed obj2’s key property and it left obj1’s state intact! Now that’s immutable!
Object.assign takes objects as its parameters and passing in an empty object as the ‘target’ keeps our ‘source’ objects intact.

Object.assign is widely supported by desktop and mobile browsers, please check Mozilla for more info.

The post Immutable Objects using Object.assign appeared first on Trim Agency.