Updating object properties and adding them in a new Arr with Reduce Javascript

Question

I am trying to use reduce within addKeyAndValue function on an array of objects with properties of key-value pairs, add within each object a new key-value pair and return that on a new array. The addKeyAndValue func receives three arguments the arr, the key and the value to be added together within each object in the array. I then use push within Reduce callback to push the objects in the array to the new array in the accumulator with the updated new key and value using the bracket notation.

var arr = [{name: 'Alonso'}, {name: 'James'}, {name: 'Chris'}, {name: 'Steve'}]

function addKeyAndValue(arr, key, value){
    return arr.reduce(function(acc, nextValue, idx){
        console.log(next);
        acc.push(nextValue[key] = value);
        return acc;
    },[]);
}

and the expected result should be:

addKeyAndValue(arr, 'title', 'Instructor') // 
      [
        {title: 'Instructor', name: 'Alonso'}, 
        {title: 'Instructor', name: 'James'}, 
        {title: 'Instructor', name: 'Chris'}, 
        {title: 'Instructor', name: 'Steve'}
       ]

however, the results that I get in my Chrome dev console is:

(4) ["Instructor", "Instructor", "Instructor", "Instructor"]
0:"Instructor"
1:"Instructor"
2:"Instructor"
3:"Instructor"
length:4
__proto__:Array(0)

I am wondering why is the Value passed through nextValue[key] overriding the whole object and returning just as a string. When I try to just push the existing objects in the new array it works fine but when pushing the nextValue[key] it turns undefined and when doing the above nextValue[key] = value it overrides the objects resulting into a new array with just instructor strings. I am a bit confused since I was expecting a different result.

Using the bracket notations nextValue[key] on nextValue which is each object within the array being iterated by the callback in the reduce method I thought that would add a new key property in this case "title" with the assigned value of "instructor".

Any help would be appreciated, Thanks :).

Answer 1

Your push argument only results in the value being pushed, not the object. You can solve this with the comma operator if your really want this in one expression:

acc.push((nextValue[key] = value, nextValue));

But it may be more readable if you do it separately:

nextValue[key] = value;
acc.push(nextValue);