Why does modifying values of let x = arr.filter(...) alter the values of arr?

Question

I am struggling to understand the behavior of the following lines of code:

// I'd like to keep this value constant
let allObjects = [{value: null}, {value: 'Hello World'}]
// Here is a shorter list of objects matching some criteria
let someObjects = allObjects.filter(object => object.value)
// Here we work with the the values for some of the objects
someObjects[0].value = {hmm: 'test'}
// Kind of expecting allObjects[1].value to be 'Hello World' at this point
// Display all the objects
console.log(allObjects)

And the output:

[
  {
    "value": null
  },
  {
    "value": {
      "hmm": "test"
    }
  }
]

Here is a codepen.

What I do not understand is when the value of someObjects is modified it affects the value of allObjects and expect that allObjects[1].value will return Hello World.

Could someone explain to me why this is actually happening and how we are supposed create a sorter version of the array that does not mutate the original array when it is modified?

Answer 1

In JavaScript all primitive variables are passed by value however all objects are passed by a copy of its reference More Info. In your case, the array contains objects. Each index in the array contains a simple pointer to the memory location of an object. When you filter the array you are creating a new array with fewer values however the pointers are still pointing to the same internal objects. The filtered array, someObjects, contains a single pointer that points to the object { value: 'Hello World' }. You are overwriting the value property of this object with another object, { hmm: 'test' }. If you instead wanted to replace the object in the new filtered array rather than changing the value property of the old object you would do someObjects[0] = { hmm: 'test' }

const obj = { foo: 'bar' };
const copy = obj;
console.log(obj);
copy.foo = 'changed';
console.log(obj);