Shallow Copy and Deep Copy
Tags: javascript, beginners, webdev, codenewbie
Published: 2022-06-06 13:23:11

## Table of Contents
1. [Introduction](#introduction)
2. [Shallow Copy](#shallow-copy)
3. [Deep Copy](#deep-copy)
4. [Summary](#summary)
5. [References](#references)

## Introduction
Good day, folks! 
Often times we want to create copies of variables for different purposes. There can be two different kinds of copies created - Shallow copy and Deep copy. We commonly encounter shallow copy and deep copy understanding and differences during interviews. So, let's go over the terminologies and related examples.
## Shallow Copy
> Shallow copy method creates a copy where the source and the copied variable reference remain the same. This means that modifications made in one place would affect both places. 

Here's an example to get a better understanding:
```
const first_person = {
name: "Jack",
age: 24,
}

const second_person = first_person;

second_person.age = 25;

console.log(first_person.age); // output: 25
console.log(second_person.age); // output: 25
```
Changing the *age* property value of `second_person` object, changes the `first_person` object's *age* property too.

Now let's look at another example: 
```
const first_person = {
  name: "Jack",
  age: 24
};
let second_person = first_person;
second_person = {
  name: "Jack",
  age: 23
};

console.log(first_person.age); // Output: 24
console.log(second_person.age); // Output: 23
```
Uh, what happened here? 🤔 Why aren't the values same?
Well, here we are not changing the values of a specific property rather we are assigning a new object. 

## Deep Copy
> Deep copy method creates a copy where the source and the copied variable reference are completely different. This means that modifications made in one place would only affect the variable where we are making a change. 

Now let's look at the examples:

If the objects/arrays are not nested, then we can achieve deep copy by using
### Spread (...) operator  
Using the spread syntax, we can create a deep copy if there is no nesting.
```
const first_person = {
name: "Jack",
age: 24,
}

const second_person = { ...first_person };

second_person.age = 25;

console.log(first_person.age); // output: 24
console.log(second_person.age); // output: 25
```
Let's take a look when there is nesting.
```
const first_person = {
  name: "Jack",
  age: 24,
  address: {
    apartment: "A",
    city: "London"
  }
};

const second_person = { ...first_person };

second_person.age = 25;
second_person.address.apartment = "N";
console.log(first_person.address.apartment); // output: N
console.log(second_person.address.apartment); // output: N
```
In case of nesting, the spread operator creates a shallow copy.

If the objects/arrays are nested, then we can achieve deep copy by using

### JSON.parse() and JSON.stringify()

```
const first_person = {
  name: "Jack",
  age: 24,
  address: {
    apartment: "A",
    city: "London"
  }
};

const second_person = JSON.parse(JSON.stringify(first_person));

second_person.age = 25;
second_person.address.apartment = "N";
console.log(first_person);
console.log(second_person);
```
Output:
![Output of JSON.parse and JSON.stringify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do4hnojf8xtbsohg446r.png)

Combining these two creates a deep copy even when there is nesting involved.

## Summary
- Shallow copy method creates a copy where the source and the copied variable reference remain the same. Changing one, would change the other as well.
- Deep copy method creates a copy where the source and the copied variable reference are entirely different. Changing one, would not affect the other one.
- Common methods like Array.concat(), Array.from(), Object.assign(), etc creates a shallow copy.
- Spread(...) operator, creates a deep copy when there is no nesting.
- One of the ways to create a deep copy is by using JSON.parse() and JSON.stringify().

## References
- https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy
- https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy