Shallow Copy vs Deep Copy JS & Reference Part-1🚀
Tags: webdev, javascript, tutorial, programming
Published: 2023-01-20 11:28:44

Programming is all about handling data and data structure. JavaScript do the same thing. It is very crucial to know the data structures and the behavior of that data structure. Below is the topic to that will over in this post.

1. Primitive data types
2. Non-primitive data types
3. Data reference
4. Shallow Copy 
5. Deep copy

## Primitive Data Types

> In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods or properties. Some of the examples of primitive data type is below.

- string.
- number.
- bigint.
- boolean.
- undefined.
- symbol.
- null.

## Non-Primitive Data Type

> Non-primitive data types are the objects and arrays which has methods and objects. The value in these data types is primitive data type. We can say that non-primitive data types use to handle primitive data type.

- Array
- Object

## Data Reference
**What is data reference? aka (=)**
Data reference is a concept in which a address is assigned to a variable which contains any value. To deeply understand this concept first you'll need to understand 

> What is assign-by-value
> What is assign-by-reference

**What is assign by value?**
Assign by value means a value is directly assigned to a variable rather assigning a reference(address). Assign-by-value is mostly used when primitive data is assigned to a variable . See results below for better understanding.

```js

//YOU CAN DO
let a = 24; //24 assigned by value to a
console.log(a)
//output -> 24

let b = a;
console.log(a,b);
//output -> 24,24

b++
console.log(a,b);
//output -> 24,25

//YOU CANT DO
const a = 24;
console.log(a)
//output -> 24

const b = a;
//error: 'cannot assign to b because it's a constant

```
 The above lines might be confusing for beginners. Let me explain.

> Primitive values are assign by value means only the value assign to the variable. You can assign a variable to other which has primitive value and it will yield the same output. But these two variables has no relationship tp each other.
As you can see in the example a, b has same value since a is assigned to the b. But when b is increment the value of a remains the same.

**Why error for constant variables?**

> The answer is const variables can point toa single address and are immutable. Although you can change the value of it but not the address.

```js
const c  = 24;
console.log(c);

const d = c;
d++
console.log(a,b);

//const variables can only point to single memory address only.You can change the value but not the memory address that a const is pointing too.
//a const will return true from '===' operator if it points to the same primitive value.
//one cannot assign a const variable  having a premitive value to the another const because then they will point to the same memory which is not possible.
```
I hope the above explanation is clear on assign by value and const variable 'nature'. 


**Source**
[stackoverflow](https://stackoverflow.com/questions/23436437/why-can-i-change-a-constant-object-in-javascript#:~:text=This%20is%20because%20you%20cannot,the%20value%20of%20the%20address.&text=Save%20this%20answer.,-Show%20activity%20on)

[medium](https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0)

[medium](https://medium.com/@naveenkarippai/learning-how-references-work-in-javascript-a066a4e15600)

[dev.to](https://dev.to/amansethi00/shallow-copy-vs-deep-copy-in-javascript-11d6)

Thanks to @amanse
to be continued...