How to use JavaScript spread syntax on array and object together?

Question

I'm solving a problem where the task is to merge multiple objects from the input array and return a single object with all the keys and values merged. In case a key exists in one or more objects in the input array, the most recent value for that key should be stored in the final returned object.

An example -

var a={1:'1',2:'2',3:'3'},
    b={3:'4',5:'6',6:'7',7:'8'},
    c={5:'9',8:'9',6:'12',23:'35'}
    o=[a,b,c];

The returned object should be -

{ '1': '1','2': '2','3': '4','5': '9','6': '12','7': '8','8': '9','23':'35' }

As an example of the duplicate key case, key 3 exists in both objects a and b, so in the final result the value is {3:'4'} because that is the most recent.

I want to use the spread syntax for Objects in this problem, but that solves only a part of it. What I mean is, if I use spread for each object individually, that works, like -

function foo() {
  var a={'1':'1','2':'2','3':'3'},
    b={'3':'4','5':'6','6':'7','7':'8'},
    c={'5':'9','8':'9','6':'12','23':'35'},
    arr = [a,b,c];
    
   return {...arr[0], ...arr[1],  ...arr[2]}
}

console.log(foo());

For this to work, I need to write out each array element with spread, as in the above snippet - ...arr[0], ...arr[1], ...arr[2]. However, the input array can contain any number of objects, so writing out each element is not feasible.

Normally, using spread on an iterable like an array, allows you to expand the array elements, like so-

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
console.log(lyrics)

Is it possible to use spread on the input array to collect all the individual objects, on which spread can be applied again, to get the final object?

Robby Cornelissen · Accepted Answer · 2017-09-15 03:49:51Z

1

You could just use Object.assign():

return Object.assign(...arr);

Here's a complete snippet:

function foo() {
  var a={'1':'1','2':'2','3':'3'},
    b={'3':'4','5':'6','6':'7','7':'8'},
    c={'5':'9','8':'9','6':'12','23':'35'},
    arr = [a,b,c];
    
    return Object.assign(...arr);
}

console.log(foo());

Note that this implicitly modifies the first object in your array. If you don't want that, pass a new empty object as the first argument to Object.assign():

return Object.assign({}, ...arr);

edited Sep 15, 2017 at 3:49

answered Sep 15, 2017 at 3:44

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hassan Imam · Accepted Answer · 2017-09-15 06:45:52Z

You can directly use spread syntax on object to merge them.

function foo() {
  var a={'1':'1','2':'2','3':'3'},
      b={'3':'4','5':'6','6':'7','7':'8'},
      c={'5':'9','8':'9','6':'12','23':'35'}; 
  return {...a, ...b, ...c};
}

console.log(foo());

If you have an array, then you can use array#reduce and Object#assign.

var a={'1':'1','2':'2','3':'3'},
    b={'3':'4','5':'6','6':'7','7':'8'},
    c={'5':'9','8':'9','6':'12','23':'35'},
    arr = [a,b,c];
var result = arr.reduce(function(r,o){
  return Object.assign(r,o);
},Object.create(null));

console.log(result);

NOTE : The Rest/Spread Properties for ECMAScript proposal (stage 3) adds spread properties to object literals. It copies own enumerable properties from a provided object onto a new object.

Collectives™ on Stack Overflow

How to use JavaScript spread syntax on array and object together?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related