참조와 복사의 차이, 사용법

📝 참조와 복사

 

복사(깊은복사)

 

let 복사 = "복사하기";

let 값 = 복사;

값 = "컴퓨터";
//"컴퓨터"

복사
//"복사하기"

 

- 원시 값인 문자, 숫자, 불린은 복사가 된다.

- 값만 복사되고 이전 변수에 영향을 주지 않는다.

 

 

참조 (얉은복사)

 

let 참조 = {
 참조하기 : "참조중"
};

let 값 = 참조;

값.참조하기 = "컴퓨터"
//"컴퓨터"

값
//{참조하기: "컴퓨터"}

참조
//{참조하기: "컴퓨터"}

 

- 객체, 배열은 대입하면 참조 관계가 된다.

- 값, 이전 변수에 영향을 미친다.

 

 

+) 참조관계가 되는 객체 or 배열을 복사만 하고 싶다면?

 

let obj1 = {a:1,b:2};

let obj2 = {}

Object.keys(obj1).forEach(function(key){
    obj2[key] = obj1[key];
});

obj2
//{a: 1, b: 2}

obj1
//{a: 1, b: 2}

obj2 === obj1
//false

 

- Object.keys 메서드는 객체의 속성명들을 배열로 바꿔준다.

- 위 코드가 100% 정답은 아니다. obj1의 b속성 값이 원시값이 아닌 객체, 배열이라면 b속성은 참조가 된다.

 

obj1 = {a:1, b:{c:1}};
//{a: 1, b: {…}}

obj2 = JSON.parse(JSON.stringify(obj1))
//{a: 1, b: {…}}

obj2
//{a: 1, b: {…}}

obj2.b.c = 8
//8

obj2
//{a: 1, b: {…}}
//a: 1
//b: {c: 8}
//__proto__: Object

obj1
//{a: 1, b: {…}}
//a: 1
//b: {c: 1}
//__proto__: Object

 

📄 정리

 

let a = 100
b = a //복사

let c = {d : 1};
let e = c; //참조

let obj1 = {a:1};
let obj2 = {};
Object.keys(obj1).forEach(function(key){
    obj2[key] = obj1[key];
}); //1단계만 복사(원시값만 있을 때), 나머지는 참조

let arr1 = [1,2,3];
let arr2 = arr1.slice() //1단계만 복사(원시값만 있을 때), 나머지는 참조

let obj3 = JSON.parse(JSON.stringify(obj1)); //복사 (2단계 일 때, 객체 or 배열) but, 성능 최악
let arr3 = JSON.parse(JSON.stringify(arr1)); //복사 (2단계 일 때, 객체 or 배열) but, 성능 최악