#non-mutating

[obscurejavascript]

Non Mutating List Operations

Array operations in JavaScript can be annoying because they modify the base list. Which can lead to potentially confusing side effects like this:

var list = [2,1,3,4]; var doSomething = function(newList) { return newList.reverse(); }; console.log(doSomething(list));// [4, 3, 1, 2] console.log(list);// [4, 3, 1, 2]

Fortunately, this can be easily avoided by a little trick. By doing an [Array.slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) which returns a shallow copy of the list and not a reference of it. It just returns the whole list when passed no arguments:

list = [2,1,3,4]; doSomething = function(newList) { return newList.slice().reverse(); } console.log(doSomething(list)); // [4, 3, 1, 2] console.log(list);// [2, 1, 3, 4]

It has the same effect for sort too lists too:

list = [2,1,3,4]; var sortedList = list.slice().sort(); console.log(sortedList); // [1, 2, 3, 4] console.log(list);// [2, 1, 3, 4]

Just keep in mind slice does not clone; If a list property is an object, then modifying a property on one list will affect the other.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2016/nonMutatedLists.js

[obscurejavascript]

Non Mutating Assign In JavaScript

Awhile ago I had explained how to implement the assign function from Lodash. Although, that post implements an assign function that just returns the result, the Lodash assign actually does an in place modification to the first object sent in and also returns that object. In most cases, the results will be the same, but the in place modification can lead to annoying soft copying bugs:

var personA = { name: 'Tom', age: 25 } var personAWithTravel = assign(personA, { vehicle: 'bicycle', distance: 20000 }); var personAWithDisanceOnly = assign(personA, { distance: 20000 }); console.log(personAWithTravel); // { name: 'Tom', age: 25, vehicle: 'bicycle', distance: 20000 } console.log(personAWithDisanceOnly); // { name: 'Tom', age: 25, vehicle: 'bicycle', distance: 20000 }

personAWithDisanceOnly should not have the vehicle field, but does because personA was modified in the first example. Fortunately, the fix is quite simple; Just send in an empty source object. It will be modified with 2 customizing objects with those objects being left untouched:

var personAWithTravel = assign({}, personA, { vehicle: 'bicycle', distance: 20000 }); var personAWithDisanceOnly = assign({}, personA, { distance: 20000 }); console.log(personAWithTravel); // { name: 'Tom', age: 25, vehicle: 'bicycle', distance: 20000 } console.log(personAWithDisanceOnly); // { name: 'Tom', age: 25, distance: 20000 }

The new assign function that now mimics the source object (first argument) modification:

var assign = function(/* objects */) { var objects = Array.prototype.slice.call(arguments); objects.forEach(function(obj) { for (var property in obj) { objects[0][property] = obj[property]; } }); return objects[0]; };

For simplicity this function omits the 4th thisArg this binding argument and a customizer function that the Lodash assign implements.

I have found that by eliminating as much mutation to objects as possible with strategies similar to the above, it helps make code more maintainable. This is because it can be hard to see what a mutated object is and it can lead to hard to spot soft copying bugs.

Github Location: https://github.com/Jacob-Friesen/obscurejs/blob/master/2015/nonMutatingAssign.js

[postorbital]

Held in the viral envelope, spools of non-mutating junk DNA. The blueprint for a non-terrestrial lifeform, if we could clone it.