# Object and Arrays - Reference VS Copy

* [Array copy 4가지 - slice, concat, spread, Array.from](#Array-copy)
* [Object copy](#Object-copy)

### Start with strings, numbers and booleans

```javascript
let age = 100;
let age2 = age;
console.log(age, age2); //100, 100

age = 200;
console.log(age, age2); //200, 100
```

age2에 age를 할당하고 age를 바꿔지만 `age2의 값은 변하지 않는다.` 이것은 `primitive`이기 때문이다.

### Reference - array

```javascript
 // Let's say we have an array
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

// and we want to make a copy of it.
const team = players;

console.log(players, team); // ['Wes', 'Sarah', 'Ryan', 'Poppy'] x2
// You might think we can just do something like this:
team[3] = 'Lux';

console.log(players, team); // ['Wes', 'Sarah', 'Ryan', 'Lux'] x2
```

나는 team을 변경했지만, players도 영향을 받는다. 내가 오리지널이나 다른 array를 변경하면 그것은 reference로 되돌아 가려고 한다.

### Array copy

```javascript
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

// copy 방법 1
const team1 = players.slice();

// copy 방법 2
const team2 = [].concat(players);
team2[2] = 'Lux';

// copy 방법 3 - es6 spread
const team3 = [...players];

// copy 방법 4 
const team4 = Array.from(players);

console.log(team2) // ['Wes', 'Sarah', 'Ryan', 'Lux'];
console.log(players) // ['Wes', 'Sarah', 'Ryan', 'Poppy'];
```

reference하고 싶지않고 copy가 목표라면 slice, concat, spread, Array.from 이 4가지를 이용하자.

### With Objects

```javascript
const person = {
    name: 'Wes Bos',
    age: 80
};

const captain = person;
captain.number = 99;

console.log(person) // {name: 'Wes Bos',age: 80, number: 99}
```

## Object copy

```javascript
const person = {
    name: 'Wes Bos',
    age: 80
};

// copy 방법 1 - 3번째 인자는 새로 추가, 수정할 key, value이다. 
const cap1 = Object.assign({}, person, { number: 99, age: 12 });

// copy 방법 2 
const cap2 = {...person};
```

### Object - one level deep

```javascript
const wes = {
    name: 'Wes',
    age: 100,
    social: {
        twitter: '@wesbos',
        facebook: 'wesbos.developer'
    }
}

 const dev = {...wes};
dev.social.twitter = '@coolman';

console.log(dev.social); // {twitter: "@coolman", facebook: "wesbos.developer"}

console.log(wes.social); // {twitter: "@coolman", facebook: "wesbos.developer"}
```

one level deep에 있는 내용은 reference라 wes.social를 참조한다. *wes는 이 내용을 shit이라 표현했다.*

이런식의copy는 오직 one level deep만 가능하다.

> 모든 level deep을 하고자 할 경우 먼저 스스로에게 물어야 한다. 이게 정말 필요한가?

#### 하지만 정말 every level deep이 필요하다면? (추천x)

```javascript
const wes = {
    name: 'Wes',
    age: 100,
    social: {
        twitter: '@wesbos',
        facebook: 'wesbos.developer'
    }
}

const dev2 = JSON.parse(JSON.stringify(wes));

dev2.social.twitter = '@coolman';

// 오리지널 객체에는 터치가 없다.
console.log(wes.social);// {twitter: "@wesbos", facebook: "wesbos.developer"}

/*
* JSON은 string을 반환한다.
* JSON.stringify(wes)
* 하지만  JSON.parse을 사용하여 객체를 반환하였다.
*/
```

이를 .. `poor man's deep clone` 이라 불린다.'ㅁ'... 헉


---

# 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://seula00027.gitbook.io/til/javascript30/object-and-arrays-reference-vs-copy.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.