In JavaScript, when use .map() function to iterate array with primitive types and with object

Question

If the array is [true, false] , and use .map() to iterate it, the array itself is not changed

array.map(item => {
   item = false
})

array is still [true, false]

But if the items of array are object, then the array would be changed Initially, array is [{checked: true}, {checked: false}] , and iterate over the map,

array.map(item => {
    item.checked = false
})

then array becomes [{checked: false}, {checked: false}]

can anyone tell me what the difference is between the two?

Answer 1

Your examples are not the correct usage for .map() . map() returns a new array based on iterating the original one (which it does not alter). You get elements into that new array by returning them and then capturing the overall return value from map() .

var newArray = array.map(item => {
    return item === false;
});

The only reason you falsely believed that using objects made .map() work differently is because you were modifying the object's property values, which are stored within the object, but not the array directly.

In your case, you just need to be iterating the array, so you should be using .forEach() .

Answer 2

Array#map doesn't do what you think it does. It loops through the array and calls the function you passed with each value, and a new array is created with the return values.

For example:

 function doAction(str) { try { const array = JSON.parse(str); return JSON.stringify( // Pay attention to this line: array.map(item => item + 1) ); } catch (e) { return 'Error: ' + e; } } 

 <p>Input an array of numbers then press "Map it!" to double each of them.</p> <input id="arrayIn" /> <button onclick="arrayOut.value = doAction(arrayIn.value)">Map it!</button> <input id="arrayOut" disabled /> 

Answer 3

.map() returns a new array explanation:

This means that var array is not mutated (or changed at all by map, by a new array is created to hold the mapped values and returned.

Consider this:

var array = [true, false];
var newArray = array.map(item => {
   return item = false;
});
console.log(array);    // logs out [true, false]
console.log(newArray); // logs out [false, false]

In short, it works but you need to use the value returned by .map()

---

Answer 4

In short: JavaScript functions receive variables passed by value, but objects passed by reference.

In your first example, item inside the function body is simply a new reference created on the spot that contains the value of whatever is passed as the item parameter. This means you can do whatever you want with it, the variable outside the function body will not change unless you explicitly set it.

In your second example however, the item inside the function body is a reference to the actual object outside the function passed as parameter. This means that any changes you make to it inside the function will also change the external object referenced by item .

A more thorough explanation on passing variables by value vs by reference can be found in this thread .