얕은복사 깊은복사

freshnoon·2020년 7월 14일
0

JavaScript

목록 보기
9/10
post-thumbnail

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

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

일반적으로 객체는 모양이 같아도 false가 뜬다.
참조관계가 되었을 때만 true를 반환하기 때문에 참조인지 아닌지 분별할 수 있다.

참고사이트 : https://www.youtube.com/watch?v=vV6Le05CJ1U&list=PLcqDmjxt30Rtbxbh4eJREOVekql_kWVmu&index=78

0개의 댓글