Functional programming for Array.map()

Question

I've been reading recently about Functional Programming and Immutable Objects in Javascript. What is the functional programming way of using map method?

Say I want to double values in an array. I can do:

var arr1 = [{a: 1}, {a: 2}, {a: 3}];
arr1.map(function(el){
    el.a = el.a*2;
    return el;
});

// arr1 => [{a: 2}, {a: 4}, {a: 6}]

But this seems to break the rules of functional porgramming and immutability the callback will modify directly elements of the array. Is the following the 'correct' way to do this?

var arr1 = [{a: 1}, {a: 2}, {a: 3}];
var arr2 = angular.copy(arr1);

var arr2 = angular.copy(arr1).map(function(el){
  el.a = el.a*2;
  return el;
});

arr1 = arr2;

// arr1 => [{a: 2}, {a: 4}, {a: 6}]

Or am I simply overthinking this? Fiddle is here.

But this seems to break the rules of functional porgramming and immutability. How? since map will not modify the existing array, it will return a new one. — gurvinder372
– gurvinder372, Commented Oct 14, 2016 at 10:56
@gurvinder372 map itself won't modify, but -> el.a = el.a * 2 will. — Keith
– Keith, Commented Oct 14, 2016 at 10:58
If you don't want arr1 to be mutated, then simply return el.a*2; and taking output in arr2 will do the job. — gurvinder372
– gurvinder372, Commented Oct 14, 2016 at 11:02

Bergi · Accepted Answer · 2016-10-14 11:17:52Z

3

You will need to use a pure function that does not mutate its arguments. So if you want objects with the doubled values, you have to create new objects:

 var arr1 = [{a: 1}, {a: 2}, {a: 3}];
 console.log(arr1);
 var arr2 = arr1.map(function(el) {
    return {a: el.a*2};
 });
 console.log(arr2);

edited Oct 14, 2016 at 11:17

answered Oct 14, 2016 at 11:10

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nina Scholz · Accepted Answer · 2016-10-14 11:26:33Z

2

You may use a pure function, which does not mutate the input object, by simple return something and not assigning something to an element of data.

var arr1 = [{a: 1}, {a: 2}, {a: 3}],
    arr2 = arr1.map(function (el) {
        return  el.a * 2;
    });

console.log(arr2);
console.log(arr1);

Return an array with new objects

var arr1 = [{a: 1}, {a: 2}, {a: 3}],
    arr2 = arr1.map(function (el) {
        return  { a: el.a * 2 };
    });

console.log(arr2);
console.log(arr1);

edited Oct 14, 2016 at 11:26

answered Oct 14, 2016 at 11:08

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

4 Comments

Redu Over a year ago

I suppose it should map back to the item objects with doubled a properties.

Keith Over a year ago

I think the OP made things slightly confusing here, as he said the results were // arr1 => [2, 4, 6] , when in fact there [{a:2},{a:4},{a:6}], easy change of course just wrap in a new object literal.

Nina Scholz Over a year ago

it is a bit unclear, but for changing values inside of the array's objects, i would take forEach and not map and assign the new value in situ.

Mark Over a year ago

@Keith Correct, should be [{a: 2}, {a: 4}, {a: 6}]

Mulan · Accepted Answer · 2016-10-14 11:23:25Z

1

Destructuring assignment would make this pretty nice. Either way tho, you have to make a new object otherwise objects in arr1 will be modified.

let arr1 = [{a: 1}, {a: 2}, {a: 3}];
let arr2 = arr1.map(({a}) => ({a: a * 2}))

console.log(arr1); // [{a: 1}, {a: 2}, {a: 3}]
console.log(arr2); // [{a: 2}, {a: 4}, {a: 6}]

answered Oct 14, 2016 at 11:23

Mulan

136k35 gold badges240 silver badges276 bronze badges

Collectives™ on Stack Overflow

Functional programming for Array.map()

3 Answers 3

Comments

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Related