얕은복사 깊은복사

홍요한·2020년 7월 14일

JavaScript

목록 보기

9/10

문자, 숫자, 불린 일때는 복사(원시값이기 때문)

var 값 = '제로초';
var 복사 = 값;
복사 = '홍길동';
값 // '제로초'

변수 복사를 바꿔도 배열 값은 바뀌지 않음.

객체(객체,배열,함수) 일때는 참조

var 배열 = ['a','b','c','d','e'];
var 복사 = 배열;
복사[0] = 'f';
배열 // ['f','b','c','d','e']

변수 복사를 바꾸면 배열값도 바뀜(참조관계)

복사를 하고 싶을 경우

참조관계를 끊고 싶은 경우,

객체의 경우(얕은복사)

var obj = {a : 1, b : 2, c : 3}
Object.keys(obj) // ['a','b','c'];
var obj2 = {};

//얕은복사
Object.keys(obj).forEach(function(key){
	obj2[key] = obj[key];
});

// 결과확인
obj2 // {a : 1, b : 2, c : 3}
obj2.a = 4;
obj2 // {a : 4, b : 2, c : 3}
obj // {a : 1, b : 2, c : 3}

배열의 경우(얕은복사)

arr = [1,2,3]
// 얕은복사
arr2 = arr.slice();

// 결과확인
arr2 // [1,2,3]
arr2[0] = 5;
arr2 // [5,2,3]
arr1 // [1,2,3]

깊은복사

var obj3 = JSON.parse(JSON.stringify(obj1)); // 성능 최악
var arr3 = JSON.parse(JSON.stringify(arr1)); // 성능 최악

얕은 복사와 깊은복사를 나누는 이유

얕은복사의 경우 1단계까지만 복사가 됨.
만약 {a : 1, b : 2, c : {3, 4}} 의 경우, 객체안에 객체가 있는걸 확인 할 수 있다.
만약 얕은복사를 하게 된다면, 1단계객체들은 복사가 되겠지만, 2단계객체는 참조가 된다.
이럴경우 깊은복사가 필요하다.

참조관계인지 파악하는 방법

var obj = {a : 1, b : 2, c : 3}
var obj2 = {a : 1, b : 2, c : 3}
obj2 === obj // false

var obj = {a : 1, b : 2, c : 3}
obj2 = obj
obj2 === obj // true