Update if exists or add new element to array of objects - elegant way in javascript + lodash

Question

So I have an array of objects like that:

var arr = [   {uid: 1, name: "bla", description: "cucu"},   {uid: 2, name: "smth else", description: "cucarecu"}, ] 

uid is unique id of the object in this array. I'm searching for the elegant way to modify the object if we have the object with the given uid, or add a new element, if the presented uid doesn't exist in the array. I imagine the function to be behave like that in js console:

> addOrReplace(arr, {uid: 1, name: 'changed name', description: "changed description"}) > arr [   {uid: 1, name: "bla", description: "cucu"},   {uid: 2, name: "smth else", description: "cucarecu"}, ] > addOrReplace(arr, {uid: 3, name: 'new element name name', description: "cocoroco"}) > arr [   {uid: 1, name: "bla", description: "cucu"},   {uid: 2, name: "smth else", description: "cucarecu"},   {uid: 3, name: 'new element name name', description: "cocoroco"} ] 

My current way doesn't seem to be very elegant and functional:

function addOrReplace (arr, object) {   var index = _.findIndex(arr, {'uid' : object.uid});   if (-1 === index) {     arr.push(object);   } else {     arr[index] = object;   } }  

I'm using lodash, so I was thinking of something like modified _.union with custom equality check.

Answer 1

In your first approach, no need for Lodash thanks to findIndex():

function upsert(array, element) { // (1)   const i = array.findIndex(_element => _element.id === element.id);   if (i > -1) array[i] = element; // (2)   else array.push(element); } 

Example:

const array = [   {id: 0, name: 'Apple', description: 'fruit'},   {id: 1, name: 'Banana', description: 'fruit'},   {id: 2, name: 'Tomato', description: 'vegetable'} ];  upsert(array, {id: 2, name: 'Tomato', description: 'fruit'}) console.log(array); /* => [   {id: 0, name: 'Apple', description: 'fruit'},   {id: 1, name: 'Banana', description: 'fruit'},   {id: 2, name: 'Tomato', description: 'fruit'} ] */  upsert(array, {id: 3, name: 'Cucumber', description: 'vegetable'}) console.log(array); /* => [   {id: 0, name: 'Apple', description: 'fruit'},   {id: 1, name: 'Banana', description: 'fruit'},   {id: 2, name: 'Tomato', description: 'fruit'},   {id: 3, name: 'Cucumber', description: 'vegetable'} ] */ 

(1) other possible names: addOrReplace(), addOrUpdate(), appendOrUpdate(), insertOrUpdate()...

(2) can also be done with array.splice(i, 1, element)

Note that this approach is "mutable" (vs "immutable"): it means instead of returning a new array (without touching the original array), it modifies directly the original array.

Answer 2

You can use an object instead of an array:

var hash = {   '1': {uid: 1, name: "bla", description: "cucu"},   '2': {uid: 2, name: "smth else", description: "cucarecu"} }; 

The keys are the uids. Now your function addOrReplace is simple like this:

function addOrReplace(hash, object) {     hash[object.uid] = object; } 

---

UPDATE

It's also possible to use an object as an index in addition to the array.
This way you've got fast lookups and also a working array:

var arr = [],     arrIndex = {};  addOrReplace({uid: 1, name: "bla", description: "cucu"}); addOrReplace({uid: 2, name: "smth else", description: "cucarecu"}); addOrReplace({uid: 1, name: "bli", description: "cici"});  function addOrReplace(object) {     var index = arrIndex[object.uid];     if(index === undefined) {         index = arr.length;         arrIndex[object.uid] = index;     }     arr[index] = object; } 

Take a look at the jsfiddle-demo (an object-oriented solution you'll find here)