javascript - modify a property of an object in the functional way - Stack Overflow

admin管理员组

文章数量:1292123

In javascript programming in the functional way is a great benefit. I'm trying to modify a property of an object contained in an array of objects in the functional way that means that the item that is the object passed in the map function cannot be modified. If I do something like this:

const modObjects = objects.map((item) => {

   item.foo = "foo" + 3;

   return item;
});

this is not functional because item is modified inside the function. do you know any other approach to this problem?

In javascript programming in the functional way is a great benefit. I'm trying to modify a property of an object contained in an array of objects in the functional way that means that the item that is the object passed in the map function cannot be modified. If I do something like this:

const modObjects = objects.map((item) => {

   item.foo = "foo" + 3;

   return item;
});

this is not functional because item is modified inside the function. do you know any other approach to this problem?

• javascript
• dictionary
• functional-programming
• immutability

Share Improve this question Follow asked Jul 21, 2016 at 7:01 MazzyMazzy 14.2k4747 gold badges133133 silver badges217217 bronze badges 2

• you are mutating the original object. map is the wrong method. – Nina Scholz Commented Jul 21, 2016 at 7:06
• Make a copy of the item, change the property, return the copy. – thefourtheye Commented Jul 21, 2016 at 7:06

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

A new (ES6) way that is really immutable and in the spirit of functional programming:

// A. Map function that sets obj[prop] to a fixed value
const propSet = prop => value => obj => ({...obj, [prop]: value})

// B. Map function that modifies obj.foo2 only if it exists
const foo2Modify = obj =>
    obj.hasOwnProperty('foo2') ? {...obj, foo2: 'foo ' + obj.foo2} : obj

// Usage examples of A and B
const initialData = [{'foo': 'one'}, {'foo2': 'two'}, {'foo3': 'three'}]
const newData1 = initialData.map(propSet('foo2')('bar')) // Set value
const newData2 = initialData.map(foo2Modify) // Use a modify function 
console.log(initialData) // Initial data should not change
console.log(newData1) // Each object should contain the new fixed foo2
console.log(newData2) // Modify foo2 only if it exists in initial data

You could use Object.assign to create a copy of the item obj and return that from the map callback.

Object.assign()

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

Here is an example

let data = [
  {"foo": "one"},
  {"foo": "two"},
  {"foo": "three"}
]

let newData = data.map( item => {
  let itemCopy = Object.assign({}, item);
  itemCopy.foo = "foo " + item.foo;
  return itemCopy;
})

console.log(data)
console.log(newData)

You can also do it like this:

const modObjects = objects.map((item) => {

   return { ...objects, foo: "foo" + 3; };

});

The reason that this: objects.map((item) => { ...destSchema, foo: "foo" + 3; }); doesn't work is that they made it this way to make the JS interpreter understand whether it is a scope or an object. You MUST use return

In modern JavaScript you can use spread operator on object inside of an object literal for this:

const modObjects = objects.map(
  item => ({...item, foo: item.foo + 3})
)

Notice parentheses () around object literal. They are needed to disambiguate object literal {} from code block {} in lambdas. Another way is to use code block with return:

const modObjects = objects.map(
  item => { return {...item, foo: item.foo + 3} }
)

I have extended @Dimitrios Tsalkakis answer to change property with a callback function.

Example: https://repl.it/@robie2011/ts-set-property-functional

Typescript:

function mapProperty<T>(prop: string){
    return (cb: (propValue: any) => any) => (obj: any) => ({...obj, [prop]: cb(obj[prop])}) as (T)
}

本文标签： javascriptmodify a property of an object in the functional wayStack Overflow