Unexpected output in testing some basic javascript code

Question

I am learning about different array functions in Javascript and I am not able to comprehend the output of a basic code that I wrote to test array.map().

let contacts = [{
  "firstName": "Jim",
  "lastName": "Smith"
}, {
  "firstName": "Laura",
  "lastName": "Bush"
}, {
  "firstName": "Adam",
  "lastName": "Shaw"
}];

let tempJson = {};

const newContacts = contacts.map(contact => {
//tempJson = {}
tempJson[contact.firstName] = contact.lastName
console.log(tempJson);
return tempJson;
});

console.log(newContacts);

Expected output

//tempJson
{ "Jim": "Smith" }
{ "Jim": "Smith", "Laura": "Bush" }
{ "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" }

//newContacts
[ { "Jim": "Smith", }, 
  { "Jim": "Smith", "Laura": "Bush"}, 
  { "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" } ]

Actual output

//tempJson
{ "Jim": "Smith" }
{ "Jim": "Smith", "Laura": "Bush" }
{ "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" }

//newContacts
[ { "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" }, 
  { "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" }, 
  { "Jim": "Smith", "Laura": "Bush", "Adam": "Shaw" } ]

Shouldn't the new contacts array only consist of the object returned by map function?

I am missing something and I am not sure what it is.

Answer 1

You are returning the reference to tempJson because of which your final results in tempJson are reflected newContacts , instead clone your tempJson and then return the cloned Object.

 let contacts = [{ "firstName": "Jim", "lastName": "Smith" }, { "firstName": "Laura", "lastName": "Bush" }, { "firstName": "Adam", "lastName": "Shaw" }]; let tempJson = {}; const newContacts = contacts.map(contact => { let clonedObj = {}; tempJson[contact.firstName] = contact.lastName Object.assign(clonedObj, tempJson); return clonedObj; }); console.log(newContacts); 

PS: reduce is more appropriate as pointed by others.

 let contacts = [{ "firstName": "Jim", "lastName": "Smith" }, { "firstName": "Laura", "lastName": "Bush" }, { "firstName": "Adam", "lastName": "Shaw" }]; const output = contacts.reduce((accu, {firstName, lastName}, i) => { accu.push({...accu[i-1], [firstName]: lastName }); return accu; }, []); console.log(output); 

Answer 2

The .map() function is intended to be used to take an array and transform each element into a corresponding element value for a new array. It seems that what you want to do is build up a new object from the elements of an array, so that's not really a job for .map() . The more general .reduce() function would be better: it allows you to accumulate results into any sort of value as iteration proceeds through the elements of an array.

In this case, you could use .reduce() as follows:

const newContacts = contacts.reduce(function(result, contact) {
  result[contact.firstName] = contact.lastName;
  return result;
}, {});

That second argument {} to .reduce() is the starting value. It's passed as the first argument to the callback function on each iteration, and the callback is responsible for returning the updated value.

Answer 3

Use reduce instead:

 let contacts = [{ "firstName": "Jim", "lastName": "Smith" }, { "firstName": "Laura", "lastName": "Bush" }, { "firstName": "Adam", "lastName": "Shaw" }]; const newContacts = Object.entries(contacts.reduce((acc, { firstName, lastName }) => { acc[firstName] = lastName; return acc; }, {})).map(([k, v]) => ({[k]: v})); console.log(newContacts);