Map over an object and change one properties value using native JS

Solution 1:

You can use Object.assign(target, ...sources) (here) of which you want to change only one value by keeping other values intact.

For example:

const object1 = {
 a: 1,
 b: 2,
 c: 3
};

Now suppose you want to change the value of b to 22, you can do this by:

const object2 = Object.assign({}, object1, {b: 22});

console.log(object1);  // { a: 1, b: 2, c: 3 } 
console.log(object2);  // { a: 1, b: 22, c: 3 } 

Notice, this does not change the value of object1, it creates a new empty object as defined in the first parameter of Object.assign() and it adds further parameters to the empty object, and if it encounters the same key again then it updates the value of the key.

In this way you can change one or even multiple values of an Object.

A BETTER WAY

Airbnb's JavaScript Style Guide() {} says that:

Prefer the object spread operator over Object.assign to shallow-copy objects.

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` ಠ_ಠ
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

You can see the full documentation here

Solution 2:

.map() isn't the usual way to modify properties an existing array of objects. You can do that, but it's not what .map() is normally used for. Instead, it's a way to create a new array. A .map() callback returns a value, and those returned values get pushed into a new array, which .map() finally returns.

Your .map() callback is implicitly returning task.start_date after assigning the formatted date into it. This means you're creating an array of formatted dates only, without the rest of the original task objects. If you wanted to use .map() here it would need to return task after making the assignment to task.start_date.

But instead you may want to use .forEach() in your .then() callback. This is the method made for this job: it simply iterates over the array and lets you modify each element in place:

tasks.forEach( task => task.start_date = task.start_date.format("YYYY-MM-DD") );
return tasks;

Also, as Dustin mentioned, returning a value from .then() may not do what you want here. The safest bet would be to do something with tasks right there, or to call another function and pass tasks as an argument. (I'm a little rusty on promises, though...)

Solution 3:

you can make a generic function which take array of objects and return array with modified-props objects using map() and Object.assign().

const users = [
    { name: 'Jhon', logged: 'Tue Feb 04 2020 14:16:10 GMT+0200 (Eastern European Standard Time)'  },
    { name: 'Doe', logged: 'Tue Feb 04 2020 14:20:10 GMT+0200 (Eastern European Standard Time)'  }
];


const handleDates = (list, prop) => {
    return list.map(item => {
      const obj = Object.assign({}, item);
      obj[prop] = new Date(obj[prop]).toLocaleDateString();
      return obj;
    });
}

console.log(users)
console.log(handleDates(users, 'logged'))