Array method 'map' modifying the array it is called on?

Question

In JavaScript , I am using Array method 'map' and observed that it is modifying the array on which it is called. But the documentation I read it should NOT be the case?

"Note that map() returns a new array: it does not modify the array it is invoked on" - JavaScript - The definitive Guide 6th Edition.

var arr = [{x:1},{y:2},{z:3}]

var arr1 = arr.map(function(obj) {
    for (var prp in obj) {
        obj[prp] *= obj[prp];
    }
    return obj;
})

// function to print the array
printArray = function(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (prp in arr[i]) {
            console.log(prp, arr[i][prp])
        }
    }
}

Output

printArray(arr1)
x 1
y 4
z 9


printArray(arr)
x 1
y 4
z 9

As we can see the original array 'arr' is also modified?

Function you passed to map is modifying value & then returning it. — Ninad
– Ninad, Commented Jul 2, 2014 at 6:33

thefourtheye · Accepted Answer · 2014-07-02 06:12:15Z

2

The data structure what you have is called Array and you have objects in it. Objects are mutable. So, you can change the value of the objects. In your case, you are squaring the values of the objects and storing the result back in the original object itself and returning the same objects. So, map creates a new array with the same objects.

To be clear, the array is new, but the objects in the new array are the same as in the original array.

answered Jul 2, 2014 at 6:12

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

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

2 Comments

Pradeep Over a year ago

So it is ok to state that 'map' method can/may modify the contents of the array it is called upon, if it has elements as 'Objects' ?

thefourtheye Over a year ago

@Pradeep_Evol we have two different arrayshere. It is not modifying the array, it is creating a new array but with objects from the original array.

Mritunjay · Accepted Answer · 2014-07-02 07:32:55Z

0

You are returning the same object which you are getting from array, that's why original values are getting changed

I Think this should work for you.

var arr = [{x:1},{y:2},{z:3}];
var newArr = arr.map(function (obj) {
    var newObj = {};
    for(var prop in obj){
        newObj[prop] = obj[prop] * obj[prop];
    }
    return newObj;
});

edited Jul 2, 2014 at 7:32

answered Jul 2, 2014 at 6:15

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

jontewks · Accepted Answer · 2014-07-02 15:43:03Z

0

The objects in the original array are the same objects that are being referred to in the new array. If you do the following code without the objects, you will see that map doesn't change the values:

var arr = [1,2,3]

var arr1 = arr.map(function(val) {
    return val *= val;
})

You should have the function you write add the properties to a newly created object, then return that object instead.

edited Jul 2, 2014 at 15:43

answered Jul 2, 2014 at 6:16

jontewks

4583 silver badges7 bronze badges

Comments

Das_Geek · Accepted Answer · 2019-10-11 23:13:23Z

0

let t = [1, 2, 3, 4, 5];

let x = t.map(nbre => (nbre *= nbre));

console.log(t);

console.log(x);

The results:

 [1, 2, 3, 4, 5] (t)

 [1, 4, 9, 16, 25] (x)

edited Oct 11, 2019 at 23:13

Das_Geek

2,8557 gold badges23 silver badges27 bronze badges

answered Oct 10, 2019 at 20:27

El Hadji Bassirou Toure

212 bronze badges

Collectives™ on Stack Overflow

Array method 'map' modifying the array it is called on?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related