Map method change old array

Question

Why map is changin' the old array numbers ? I don't want to change the old array, I want to edit it (key * 2) and put it in new array roots. Can someone explain what the problem is?

var numbers = [{key:1,prop:"ok"}, {key:2,prop:"ok"}, {key:3,prop:"ok"}];
var roots = numbers.map(index => {
  index.key = index.key * 2
  return index
})

console.log('numbers', numbers)
console.log('roots', roots)

Just for you: Your "array" is a json object, not a good plain array. :-) And which Javascript framework did you use? — Reporter
– Reporter, Commented Jul 25, 2016 at 14:04
@reporter I think you wrote that backwards. There's no json here — castletheperson
– castletheperson, Commented Jul 25, 2016 at 14:05
@reporter dude are you serious ? THIS IS A PLAIN JAVASCRIPT — Doom
– Doom, Commented Jul 25, 2016 at 14:07
map doesn't protect you from modifying reference types. Only primitive types. — castletheperson
– castletheperson, Commented Jul 25, 2016 at 14:10

score 2 · Accepted Answer · 2016-07-25 16:06:20Z

2

In your case, the simplest approach would be

var numbers = [{key:1,prop:"ok"}, {key:2,prop:"ok"}, {key:3,prop:"ok"}];
var roots = numbers.map(elt => ({
  key: elt.key * 2,
  prop: elt.prop
}));

In other words, return new objects from map.

Or if you prefer, you can destructure the parameter:

var roots = numbers.map(({key, prop}) => ({key: key * 2, prop}));

edited Jul 25, 2016 at 16:06

answered Jul 25, 2016 at 14:24

user663031

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

1 Comment

castletheperson Over a year ago

I would also rename index to object

Murat Karagöz · Accepted Answer · 2016-07-25 14:06:52Z

1

Seems like there is no straight-forward way to copy a array without references. But this works tho:

var numbers = [{key:1,prop:"ok"}, {key:2,prop:"ok"}, {key:3,prop:"ok"}];
var roots = JSON.parse(JSON.stringify(numbers)); 
roots.map(index => {
  index.key = index.key * 2
  return index
})

console.log('numbers', numbers)
console.log('roots', roots)

answered Jul 25, 2016 at 14:06

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

7 Comments

Doom Over a year ago

It works Yeah, can explain why, I didnt understand why I need to parse it sense numbers isnt a string

Murat Karagöz Over a year ago

It's because roots and numbers point out to the same object.

castletheperson Over a year ago

If you aren't going to capture the result of the map, you might as well use forEach so you don't create a 3rd, unused array.

Doom Over a year ago

@4castle well I was using forEach firstly but I want to play with map a bit, btw love your comment on top

Reporter Over a year ago

@4castle why did you remove the json tag, from question? Murat K. used JSON.parse(JSON.stringify(numbers)).

|

Collectives™ on Stack Overflow

Map method change old array

2 Answers 2

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related