So I was reading an article to clone an object and array. All of them mentioned that Object.assign() can be used to copy an object but no one mentioned that Object.assign() will also work to shallow copy an array.
Could anybody explain how it works?
Code to Explain is in JS Bin : https://jsbin.com/kaqocixize/edit?js,console
JS is prototype-oriented language. That means that every construct in JS is in reality - an object! :)
Objects differ in some metadata, e.g. specific properties. These are usually readonly and there is no easy way of overriding them (e.g. length, name, arguments and many more).
In your case, array can be interpreted as a specific object where length relates to number of array elements and each array element relates to property on the object that uses index as a key:
const array = {
'0': 'a',
'1': 'b',
'2': 'c',
'length': 3,
};
(that's simplification, as we're still missing generator for iterating over that is usually kept as a Symbol).
The way JS hides these special properties is usually by using Symbols - more on them here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol
Because of prototypic nature of JS, however, when using Object.assign, Array is treated as an object and hence, by doing:
Object.assign([],a,['x']);
you're actually creating a new array AND overriding element 0 with 'x'. That's how this line can be interpreted in object world:
Object.assign({}, {
'0': 'a',
'1': 'b',
'2': 'c',
}, {
'0': 'x'
});
And that's how x landed as the first index of a new array!
There are, however, some differences in Array implementation between ES5 and ES6 - more on that here: http://2ality.com/2014/05/es6-array-methods.html
As the comment from Mark Meyer says, arrays are objects.
Specifically an array is an object whose keys are strings representing small integers. There is some magic to handle how length is updated as values are added or removed and how values are removed as length is updated. Other than that, it's an Object at its core.
So in this code (please include such code in your question rather than pointing to an external site):
var a = ['a','b','c'];
var b = Object.assign([], a, ['x']);
all that happens is that it takes the initial value passed, [] and then adds the properties from a onto it, the properties whose keys are '0', '1', and '2', with respective values of 'a', 'b', and 'c', then adds the properties from ['x'] onto it, the only one being key '0' with value 'x', yielding ['x', 'b', 'c'].
So it's simple object handling.
Note that if you did
Object.assign([], a, [, 'x']);
you would get ['a', 'x', 'c'], and if you did
Object.assign([], a, [, , , , 'x']);
you would get ["a", "b", "c", undefined, "x"]
Arrays are indeed objects in Javascript with a few differences and traits of their own, so Object.assign is able to account for and handle this. Here's another question with some pretty solid answers that should help make sense of this for you.
