JS map return object

JavascriptDictionary

Javascript Problem Overview


I got this array,

var rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

What do I need to do to return an array mapped, that adds 10 to each

> launches

value, here my first approach,

var launchOptimistic = rockets.map(function(elem){
  // return  elem.launches+10;
     return (elem.country, elem.launches+10);


});
console.log(launchOptimistic);

Javascript Solutions


Solution 1 - Javascript

Use .map without return in simple way. Also start using let and const instead of var because let and const is more recommended

const rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

const launchOptimistic = rockets.map(elem => (
  {
    country: elem.country,
    launches: elem.launches+10
  } 
));

console.log(launchOptimistic);

Solution 2 - Javascript

You're very close already, you just need to return the new object that you want. In this case, the same one except with the launches value incremented by 10:

var rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

var launchOptimistic = rockets.map(function(elem) {
  return {
    country: elem.country,
    launches: elem.launches+10,
  } 
});

console.log(launchOptimistic);

Solution 3 - Javascript

If you want to alter the original objects, then a simple Array#forEach will do:

rockets.forEach(function(rocket) {
    rocket.launches += 10;
});

If you want to keep the original objects unaltered, then use Array#map and copy the objects using Object#assign:

var newRockets = rockets.map(function(rocket) {
    var newRocket = Object.assign({}, rocket);
    newRocket.launches += 10;
    return newRocket;
});

Solution 4 - Javascript

The cleanest solution is destructuring.

const rockets = [
        { country:'Russia', launches:32 },
        { country:'US', launches:23 },
        { country:'China', launches:16 },
        { country:'Europe(ESA)', launches:7 },
        { country:'India', launche`enter code here`s:4 },
        { country:'Japan', launches:3 }
    ];
    const updated = rockets.map(rocket=>{
    return {...rocket,launches:rocket.launches+10}
    });

Solution 5 - Javascript

map rockets and add 10 to its launches:

var rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];
rockets.map((itm) => {
    itm.launches += 10
    return itm
})
console.log(rockets)

If you don't want to modify rockets you can do:

var plusTen = []
rockets.forEach((itm) => {
    plusTen.push({'country': itm.country, 'launches': itm.launches + 10})
})

Solution 6 - Javascript

Considering objects can have many properties, It would be better to spread the object's content and to reassign specific properties, to achieve code that is more succinct.

const rockets = [
    { country:'Russia', launches:32 },
    { country:'US', launches:23 },
    { country:'China', launches:16 },
    { country:'Europe(ESA)', launches:7 },
    { country:'India', launches:4 },
    { country:'Japan', launches:3 }
];

const launchOptimistic = rockets.map(function(elem) {
  return {
    ...elem,
    launches: elem.launches+10,
  } 
});

console.log(launchOptimistic);

Solution 7 - Javascript

Solution (One Liner) With a Fresh Example

Suppose the clients in your bank (including you, of course) got a bonus.

let finance = [
    {funds:10050, client_id: 1020},
    {funds:25000, client_id: 77},
    {funds:90000, client_id: 442}
];

finance = finance.map(({funds, client_id}) => {funds = funds + 2000; return {funds, client_id}});

↑ Test & copy as is to Chrome / Firefox / Edge DevTools console ↑

This technique called Destructuring Assignment

> The destructuring assignment syntax is a JavaScript expression that > makes it possible to unpack values from arrays, or properties from > objects, into distinct variables.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmanuelBetancurtView Question on Stackoverflow
Solution 1 - JavascriptHemadri DasariView Answer on Stackoverflow
Solution 2 - JavascriptCRiceView Answer on Stackoverflow
Solution 3 - Javascriptibrahim mahrirView Answer on Stackoverflow
Solution 4 - JavascriptEmreView Answer on Stackoverflow
Solution 5 - JavascriptNir AlfasiView Answer on Stackoverflow
Solution 6 - Javascriptnir segevView Answer on Stackoverflow
Solution 7 - JavascriptStas SorokinView Answer on Stackoverflow