[ javascript ] 20. 얕은 복사 VS 깊은 복사

얕은 복사와 깊은 복사 

 

얕은 복사(Shallow Copy) : 참조형의 1차원 데이터만 복사

깊은 복사(Deep Copy) : 참조형의 모든 차원 데이터를 복사

 

얕은 복사 : 주소값까지만 복사

깊은 복사 : 실제 데이터까지 복사

 

원시타입 : Call by value

number , string , boolean , undefined , null , symbol

 

참조타입 : Call by reference

배열, 객체

 

Call by value(값에 의한 호출, 값의 복사)

Call by reference(참조에 의한 호출, 주소의 복사)

 

 

예시 1)

const arr = [ 10,20,30 ]
const arrCopy = arr

 

const 키워드로 선언된 arr( 안에 담기 주소값 )는 변환되지 않습니다.

 

const arr = [ '강호동','임지연','송혜교','이도현' ];
const arrCopy = arr

arrCopy[0] = '전지현';

console.log('원본 : ' ,  arr );
console.log('복사본 : ' ,  arrCopy );

Output :
원본 : [ '전지현','임지연','송혜교','이도현' ]
복사본 : [ '전지현','임지연','송혜교','이도현' ]

 

 

array

 

array 복사

 

 

예시 2)

const obj = {
 name:'김태리',
 age : 20,
 addr :'서울',
 tel :'010-1111-2222'
}

const objCopy = obj

 

Object

 

 

예시 3) 해결

const obj = {
 name:'김태리',
 age : 20,
 addr :'인천',
 tel :'010-1111-2222'
}

const objCopy = {
 name:obj.name,
 age : obj.age,
 addr :obj.addr,
 tel :obj.tel
}

또는 Spread 연산자 사용

const objCopy = [...obj]

let objCopy = Object.assign({}, obj )

 

const objCopy = {
 name:obj.name,
 age : obj.age,
 addr :obj.addr,
 tel :obj.tel
}

 

const objCopy = [...obj]

 

let objCopy = Object.assign({}, obj )

 

 

복사

 

 

예시 4 )

const obj = { 
 age : 20,
 addr :'인천',
 tel :'010-1111-2222',
 names : {
 firstName: ‘태리’,
 lastName : ‘김’
 }
}

let obj1  = [...obj ]

 

 

복사

 

 

해결

const obj = { 
 age : 20,
 addr :'인천',
 tel :'010-1111-2222',
 names : {
 firstName: ‘태리’,
 lastName : ‘김’
 }
}

objCopy = JSON.stringify(obj)  //문자유형으로 변경을 할경우 주소는 없어짐
JSON.parse( objCopy ) //다시 새로운 주소 생성