Javascript Array.map copy without changing original

Question

I've noticed that deleting object properties when using Array.map() affects the original array, I assume since each iteration's item is still referencing the original array:

var objects = [{name: 'a', password: 'x'}, {name: 'b', password: 'x'}];

var clean = objects.map(user => {delete user.password; return user;});

console.log(JSON.stringify(objects));
> [{"name":"a"},{"name":"b"}]

Is there a way to use map or filter without it modifying the original? I can think to loop through each item and create a clone but curious if there's a simpler way.

Mark · Accepted Answer · 2018-08-03 15:24:54Z

4

You can reference everything except password with dereferencing. Then use map to build a new object with everything else. This is nice if you have other properties on the object other than name and want to include everything except password.

var objects = [{name: 'a', password: 'x'}, {name: 'b', password: 'x'}];

var clean = objects.map(({password, ...user}) => user);

console.log(objects);  // untouched

console.log(clean);    // no password

answered Aug 3, 2018 at 15:24

Mark

92.7k8 gold badges116 silver badges156 bronze badges

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

Comments

Olian04 · Accepted Answer · 2018-08-03 15:34:07Z

This is not a problem with map or filter, these methods always return a new array. This is a problem with objects always being passed by reference in Javascript.

Consider the following:

const a = { foo: 1 }
const b = { foo: 2 }

const arr1 = [ a, b ];

const arr2 = arr1.map(v => {
  v.foo = 0;
  return v;
});

console.log(arr1);
console.log(arr2);
console.log(JSON.stringify(arr1) === JSON.stringify(arr2)) // true

If you want to create a copy of each object in an array while doing a map you could use the spread operator:

const a = { foo: 1 }
const b = { foo: 2 }

const arr1 = [ a, b ];

const arr2 = arr1.map(v => {
  return {...v, foo: 0};
});

console.log(arr1);
console.log(arr2);
console.log(JSON.stringify(arr1) === JSON.stringify(arr2)) // false

It's worth noting that the spread operator is a shallow clone, this means that objects within objects will still be passed by reference.

const c = { foo: 3 }
const a = { foo: 1, biz: c }
const b = { foo: 2, biz: c }

const arr1 = [ a, b, c ];

const arr2 = arr1.map(v => {
  return {...v, foo: 0};
});

console.log(arr1);
console.log(arr2);
console.log(JSON.stringify(arr1) === JSON.stringify(arr2)) // false

Dan · Accepted Answer · 2018-08-03 15:32:53Z

1

You can map over all of the items and return only the name.

const objectsWithNames = objects.map(({name}) => ({name}));

edited Aug 3, 2018 at 15:32

answered Aug 3, 2018 at 15:23

Dan

8,9229 gold badges46 silver badges82 bronze badges

3 Comments

Dan Over a year ago

Array.map() returns a new array.

d-_-b Over a year ago

I guess I just need to avoid using delete then? and return a new object? If I want to change the values I would need to change them in the new return value too.

Dan Over a year ago

Yeah your use of delete is where your problem lies.

clabe45 · Accepted Answer · 2018-08-03 15:29:49Z

0

The original array isn't being modified, but rather the items in the array (the objects) are. Since javascript objects are passed by reference, when you modify the objects in the new array, the references in the old array show the same modifications.

So, as you said, you can loop through each item and create a clone. Of course, you could perform a deep copy of the entire array too.

answered Aug 3, 2018 at 15:29

clabe45

2,47418 silver badges27 bronze badges

Collectives™ on Stack Overflow

Javascript Array.map copy without changing original

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related