Shallow copy and deep copy are terms thrown around in Javascript that can be confusing if you have never heard them before. It is quite common to h...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for sharing! I didn't know the structuredClone() method... never used it before!
Thanks
Thank you for sharing :)
"This can give the illusion that these two arrays are copies and act independently of each other - but that's not the case either."
This is a false claim. They are copies. When you slice, the array is copied to another section (the values and the pointer references). Each array has its own section of memory that do not overlap with the other section.
What you are talking about are pointer references to objects, which are also stored in another section of the memory. When you slice, those pointer references are copied, so the element 0 in both arrays point to the same object, but that pointer in the element 0 is stored in different parts of the memory, hence copied. When you do arr[0].X, the .X means to follow the pointer to the object and access the property X, hence both arrays will access the same object as each array has the same pointer reference in the position 0, but you can modify that pointer reference in one array with arr[0] = obj2 and it will not affect the other array because the position 0 is stored in different parts of the memory. Now each array will point to a different object in the position 0 because you modified the memory that stores the pointer in the position 0 only in one of the arrays.
correct yes, i am referring to them being both copies and acting independently as being false. being copies alone is true.
Right on! slice's doing a deep copy, cuz a shallow copy would be pointers pointing to the start, and the end indices are given to the slice function, that way you have direct access to the array where the beginning and the end of it are different than the original start (0) & end (length -1).
The ES6 version add the spread function :
Let arr = [1,2,3]
Let arr2 = [...arr]
Arr.push(4)
Console.log(arr) // 1,2,3,4
Console.log(arr2) // 1,2,3
the spread syntax still only makes a shallow copy.
It's a deep copy if the data is not nested, if it is nested those are shallow:
const arr = [1,2,[1,2]]const arr2 = [...arr]
arr[2].push(3)
console.log(arr2) // 1,2,[1,2,3]
no spread syntax creates a shallow copy of data with the same ref in memory. That's the main differentiator between a deep and shallow copy - their ref in memory. In fact pretty much all array methods create shallow copies.
FWIW the way of using JSON methods is not the best one, you might loose some data in cloned objects
Correct, I've added that note.
Sometimes bugs were found when implementing spread operator, it happens to me as storms all the time.
Basically, if you create shallow copy and use mutating function or smth on it, it should change the original as well?
In ideal circumstances, yes - unless you do something like the example above where you
slicethe array and then update using the square bracket notation.