Is JavaScript Array.push() a Deep or Shallow Copy?

Let’s discuss one interesting JavaScript topic today. Even beginners of JavaScript will be aware of array and adding and removing values from it. But most of us do not try to understand internal implementation of all array functions (Sometimes it is not possible also, to understand implementation of every function !!).

So today let us discuss about array.push method. If your are not aware, how array.push works then here is the official link for it.

Source — Wikipedia

Let’s start with easy example: Can you guess the output of below snippet?

let arr = [];
let x = 10;
arr.push(x);
x = 20;
console.log(arr); 
console.log(x);

It’s pretty straight forward arr will print 10 and x will be printed as 20.

Now lets slightly complicate it. Try to guess the code without executing it.

var array = [];
var y = {name: "test", type: "data", data: "2-27-2009"};
array.push(y);
y.name = "foo";
console.log(array);

If your from Java, c# background you would guess the output will be:

[{name: “test”, type: “data”, data: “2–27–2009”}]

But the actual output is:

[ { name: “foo”, type: “data”, data: “2–27–2009” } ]

Now let’s tweak it again, guess the output of this without executing,

var array = [];
var y = {name: "test", type: "data", data: "2-27-2009"};
array.push(y);
array[0].name = "foo";
console.log(y);
console.log(array);

So, the output is:

// y
{ name: ‘foo’, type: ‘data’, data: ‘2–27–2009’ }
// array
[{ name: ‘foo’, type: ‘data’, data: ‘2–27–2009’ }]

By now you might have understood when we push an object into an array, rather adding the contents of the object the reference is copied. So, if you change the object or the array where it is pushed, it will modify the same reference. So both array and object gets updated at the same time.

Now the next question: Does array.push() does deep copy or shallow copy?

For those of you, who do not know what is deep and shallow copy, here is the quick definition.

Shallow copy

Shallow copy is a bit-wise copy of an object. A new object is created that has an exact copy of the values in the original object. If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied. So, if you change any object both get’s changed due to sharing of common reference.

Deep copy

A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers. So, if you change any object only that object gets changed as both will have different reference.

So answering above question, It depends upon what you’re pushing. Objects and arrays are pushed as a pointer to the original object. Built-in primitive types like numbers or booleans are pushed as a copy.

Now let’s extend the above example further,

var array = [];
var y = {name: "test", type: "data", data: "2-27-2009"};
array.push(y);
y = {}; 
y.name = 'bar';
console.log(array);
console.log(y);

Output is:

// array 
[ { name: ‘test’, type: ‘data’, data: ‘2–27–2009’ } ]
// y
{ name: ‘bar’ }

Here array value didn’t change after changing ‘y.name’ because, when we initialise

y = {}

y points to new reference, now previous reference which was copied to array is only pointed by array. So, by changing value of y, array value will not change.

What are the best practices to deep copy a variable so that we will not face this problem?

I will discuss that in my next article. Till then happy reading.

More articles from the same author:

1. How everything is Object in JavaScript?
2. The Problem with Returning Values from Async Await Functions
3. Hoisting in JavaScript : Hot topic for Interview
4. Memoization in JavaScript — Hot topic for Interview

Read all articles by the author here.

More content at plainenglish.io