# 참조와 참조관계, 객체 복사방법

얕은 복사 : 참조

깊은 복사 : 복사

객체의 경우 그 값을 복사해서 원래의 값을 조작할 수 있다.

1. 배열

```javascript
var 과일 = [사과,딸기,오렌지];
var 복사 = 과일;

복사[0] = 포도;
과일 = [포도,딸기,오렌지];
```

2\. 함수

```javascript
var 함수 = function(){};
var 복사 = 함수;

함수.abc = 'abc';
복사.abc = 'abc';

복사.abc = 'def';
함수.abc = 'def';

```

원래 객체의 값에 영향을 주지 않고 복사하는 방법

1. 원시데이터형으로 값을 복사한다.

```javascript
var obj = {a: 1, b:2}
var obj2 = {};//빈 객체를 만든다.

obj2.a = obj.a;//1
obj2.b = obj.b;//2

obj2.a = 3;
obj.a = 1;//값이 변하지 않고 그대로다.

```

2\. **Object.keys**와 **forEach**를 이용한다.

Object.keys(객체명) 을 하면 해당 객체의 key값을 배열로 바꾼다.

```javascript
var obj = {a: 1, b:2, c:3,};
var obj2 = {};
Object.keys(obj);

Object.keys(obj).forEach(function(key) {
    obj2[key] = obj[key];
});
obj2.a = 4;
obj.a = 1;//값이 변하지 않고 그대로다.

```

**Object.keys**와 **forEach**를 이용할 때 주의점

```javascript
var obj = {a: 1, b: { c:3},};//b는 다른 객체를 갖는다
var obj2 = {};
Object.keys(obj);

Object.keys(obj).forEach(function(key) {
    obj2[key] = obj[key];
});
obj2.a = 4;
obj.a = 1;//값이 변하지 않고 그대로다.
obj2.b.c = 8;
obj.b.c = 8;//값이 바뀌어버렸다.

```

원인을 분석하자면, 객체의 키(속성)값과 vlaue를 복사할 때 b는 객체를 담고 있기 때문에 복사를 할 때 객체가 복사되어 참조된 것이다.

3\. slice() 를 이용한 복사

아래 코드는 slice를 사용하여 배열을 깊은복사하는 방법이다. 하지만 이 방법도 껍데기만 깊은 복사이고 속은 얕은 복사이다. Object.key와 forEach문을 이용했을 때와 비슷하다.

```javascript
arr = [1,2,3];
arr2 = arr.slice();//참조관계를 끊으며 복사.
```

```javascript
var obj3 = JSON.parse(JSON.stringify(obj1));//복사
var arr3 = JSON.parse(JSON.stringify(arr));//복사
```

2번과 3번은 객체들이 1단 데이터를 가질 때 사용한다. 객체 안에 객체가 있다면 이것은 3단계이다. var o = **{**a:1, b:2, c : **{** d: **{**e:3 } } } , \[1,2,3\[1,5,\[6,7,8] ] ].

하지만 JSON을 이용한 깊은 복사 방법은 성능이 최악이기 때문에 최대한 안 쓰는 것이 좋고, 이 또한 완벽한 복사는 아니다.

참조관계인지 확인하는 방법은 '==='연산자로 확인가능하며, 'true' 라면 참조관계인 것이다.


---

# 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://heunnajo.gitbook.io/zerocho-javascript/undefined-25.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.