# Shallow vs Deep Clone

In general, when we copy things and whenever we make changes, we expect the original thing to stay the same, whereas the copy changes.

**Copy Primitive Data Types**

When you make a copy, it will be a real copy

```javascript
const a = 5
let b = a
b = 6
console.log(b) // 6
console.log(a) // 5
```

**Copy Objects**

When we assign variable to an object, it just creates a pointer (reference) to that value. So if make a copy b = a, changes in "b" will also impact "a" as well since "a" and "b" actually point to the same thing.

```javascript
let obj = {one: 1, two: 2};
let obj2 = obj;
console.log(
  obj,  // {one: 1, two: 2};
  obj2  // {one: 1, two: 2};
)

obj2.three = 3;
console.log(obj); // {one: 1, two: 2, three: 3}; <-- 😱
console.log(obj2); // {one: 1, two: 2, three: 3}; <-- ✅
```

So, there are three ways to copy an object:

```javascript
1. Spread Operator
let obj = {one: 1, two: 2};
let obj2 = {...obj};

obj2.three = 3;
console.log(obj); // {one: 1, two: 2}; <-- ✅
console.log(obj2); // {one: 1, two: 2, three: 3}; <-- ✅

2. Object Assign
let obj = {one: 1, two: 2};
let obj2 = Object.assign({}, obj);

obj2.three = 3;
console.log(obj); // {one: 1, two: 2}; <-- ✅
console.log(obj2); // {one: 1, two: 2, three: 3}; <-- ✅

3. JSON
let obj = {one: 1, two: 2};
let obj2 = JSON.parse(JSON.stringify(obj))

obj2.three = 3;
console.log(obj); // {one: 1, two: 2}; <-- ✅
console.log(obj2); // {one: 1, two: 2, three: 3}; <-- ✅
```

**Shallow Clone vs Deep Clone of Nested Object**

A deep clone means that all of the values of the new variable are copied and disconnected from the original variable, for example, JSON. A shallow clone means that certain (sub-)values are still connected to the original variable, for example, spread operator.

```javascript
const nestedObject = {
  country: '🇨🇦',
  city: {
    town: 'vancouver'
  }
};

const shallowClone = { ...nestedObject };
// Changed our cloned object
shallowClone.country = '🇹🇼'
shallowClone.city.town = 'taipei';

console.log(nestedObject); 
// {country: '🇨🇦', city: {town: 'taipei'}} <-- 😱
console.log(shallowClone);
// {country: '🇹🇼', city: {town: 'taipei'}} <-- ✅
```

When you have a nested object (or array) and you copy it, nested objects inside that object will not be copied, since they are only pointers / references. In summary, a shallow copy means the first level is copied, deeper levels are referenced. The deep clone is a true copy for nested objects.

```javascript
const deepClone = JSON.parse(JSON.stringify(nestedObject))
// Changed our cloned object
deepClone.country = '🇹🇼'
deepClone.city.town = 'taipei';

console.log(nestedObject);
// {country: '🇨🇦', city: {town: 'vancouver'}} <-- ✅
console.log(deepClone);
// {country: '🇹🇼', city: {town: 'taipei'}} <-- ✅
```

**Copy Arrays**

Copying arrays is just as common as copying objects. A lot of the logic behind it is similar, since arrays are also just objects under the hood.

```javascript
Example 1:
const a = [1,2,3]
let b = [...a]
b[1] = 4
console.log(b[1]) // 4
console.log(a[1]) // 2

Example 2:
Array functions — map, filter, reduce
These methods will return a new array with all (or some) 
values of the original one.
const a = [1,2,3]
const b = a.map((el, index) => index === 1 ? 4 : el)
console.log(b[1]) // 4
console.log(a[1]) // 2

Example 3: 
Similar to objects, using the methods above to copy an array 
with another array or object inside will generate a shallow 
copy. To prevent that, also use JSON
const nestedArray = [
  '🇨🇦', ['vancouver']
];
const shallowClone = [ ...nestedArray ];
// Changed our cloned object
shallowClone[0] = '🇹🇼'
shallowClone[1][0] = 'taipei';

console.log(nestedArray);
// [ '🇨🇦', [ 'taipei' ] ] <-- 😱
console.log(shallowClone);
// [ '🇹🇼', [ 'taipei' ] ] <-- ✅

const deepClone = JSON.parse(JSON.stringify(nestedArray))
// Changed our cloned object
deepClone[0] = '🇹🇼'
deepClone[1][0] = 'taipei';

console.log(nestedArray);
// [ '🇨🇦', [ 'vancouver' ] ] <-- ✅
console.log(deepClone);
// [ '🇹🇼', [ 'taipei' ] ] <-- ✅
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://edsonha.gitbook.io/my-gitbook/javascript/shallow-vs-deep-clone.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.