Why Object.assign works with an array?

Question

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?

var a = ['a','b','c']; 
var b = Object.assign([],a,['x']);

// Checking the Type of Variable a
console.log(Array.isArray(a))
// Checking the Type of Variable b
console.log(Array.isArray(b))

console.log('Output of B:', b)
// variable b is a clone of variable a and also have differnet memory allocation.
a[1] = 'changed again';
// Checking Changes of variable b
console.log('Output of B:', b)
// Checking Changes of variable a
console.log('Output of A:', a)

You should really post the code in the question and not another site.... Stackoverflow has runnable snipplets. — epascarello
– epascarello, Commented Nov 16, 2018 at 17:22

SzybkiSasza · Accepted Answer · 2018-11-16 17:15:38Z

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

Scott Sauyet · Accepted Answer · 2018-11-16 17:05:16Z

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"]

Andrew Natoli · Accepted Answer · 2018-11-16 16:54:43Z

2

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.

Are Javascript arrays primitives? Strings? Objects?

answered Nov 16, 2018 at 16:54

Andrew Natoli

462 bronze badges

Collectives™ on Stack Overflow

Why Object.assign works with an array?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related