I just noticed something weird with cloning and pushing items. Here's example:
let a = { foo: [1,2] };
let b = Object.assign({}, a) // cloning object and getting new reference
a === b // gives false which is what I want
now I do push on object a:
a.foo.push(3)
now a.foo is [1,2,3] but b.foo is also [1,2,3]
but if I do
a.foo = a.foo.concat(4)
a.foo is [1,2,3,4] and b.foo is [1,2,3]
Question is: Why is that?
a.foo and b.foo are pointing to the same reference,but .concat() returns a new array so they now are pointing 2 different array reference
Object.assign does something that is called shallow cloning or shallow copying. If the source value is a reference to an Object, it only copies that reference value.
Check the docs here and read Warning for Deep Clone.
That is also why a push affects both Objects a and b, because it is in fact the same array on which the operation takes place.
The Array.prototype.concat method returns a new Array Object, which you assign to a.foo (a.foo = a.foo.concat(4)), so both foo references will now point to 2 different array objects.
The
concat()method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
Why is that?
Object.assign({}, a) does shallow copy of your object a
const foo = {bar: []}
const baz = Object.assign({}, foo)
console.log(foo.bar === baz.bar)But Array.prototype.concat creates new array
const foo = []
const bar = foo.concat()
console.log(foo === bar)
Because in your case a.foo and b.foo reference the same array. so a change in one side will affect the other one, and Array.prototype.concat returns a new array and doesn't alter the first array that's why you got differents results in the second call, as opposed to array.prototype.push which will alter the initial array.
The
concat()method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.
The
push()method adds one or more elements to the end of an array and returns the new length of the array.
You may also need to read What is the most efficient way to deep clone an object in JavaScript?, because Object.assign() will just copy the reference to the exisiting objects.
read here
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
assign dont do a deep copy, so a.foo and b.foo point to same array so when you push it gets added to same array
but when you do concat it actually returns new array and now both arrays are different
a.foois[1,2,3,4]andb.foois[1,2,3]is thatconcat()returns a whole new array which will replacea.foo