Update the attribute value of an object using the map function in ES6

Question

I am trying to code this in ES6. Below is what I am trying to achieve. Let's say I have an array of objects called schools.

let schools = [     {name: 'YorkTown', country: 'Spain'},     {name: 'Stanford', country: 'USA'},     {name: 'Gymnasium Achern', country: 'Germany'} ]; 

Now, I want to write a function called editSchoolName which will take 3 parameters, schools (which is the array I have defined above), oldName and name.

I will pass the name of the school in the parameter oldName and that name should be updated with the value in the parameter name.

I don't want to change the state of the variable schools so I am using a map function which will return a new array with the changes.

The editSchoolName function will be called like this -

var updatedSchools = editSchoolName(schools, "YorkTown", "New Gen"); 

Here, the name YorkTown should be replaced with the name New Gen. So the expected value of the array updatedSchools should be -

let updatedSchools = [     {name: 'New Gen', country: 'Spain'},     {name: 'Stanford', country: 'USA'},     {name: 'Gymnasium Achern', country: 'Germany'} ]; 

This is how my editSchoolName function looks like -

const editSchoolName = (schools, oldName, name) =>     schools.map(item => {         if (item.name === oldName) {           /* This is the part where I need the logic */         } else {           return item;         }     }); 

Need help in making the change in the editSchoolName function to achieve the above mentioned desired result.

Answer 1

try this, ES6 Object.assign() to create copy of array element and update new object.

let schools = [{         name: 'YorkTown',         country: 'Spain'     },     {         name: 'Stanford',         country: 'USA'     },     {         name: 'Gymnasium Achern',         country: 'Germany'     } ];  const editSchoolName = (schools, oldName, name) => {     return schools.map(item => {         var temp = Object.assign({}, item);         if (temp.name === oldName) {             temp.name = name;         }         return temp;     }); }  var updatedSchools = editSchoolName(schools, "YorkTown", "New Gen"); console.log(updatedSchools); console.log(schools);

Using destructuring

const schools = [   {     name: "YorkTown",     country: "Spain",   },   {     name: "Stanford",     country: "USA",   },   {     name: "Gymnasium Achern",     country: "Germany",   }, ]; const editSchoolName = (schools, oldName, newName) =>   schools.map(({ name, ...school }) => ({     ...school,     name: oldName === name ? newName : name,   })); const updatedSchools = editSchoolName(schools, "YorkTown", "New Gen"); console.log(updatedSchools);