자바스크립트/자바스크립트란?

얕은 복사와 깊은 복사

위르겐 2022. 7. 19. 12:48

 

 

원시형데이터와

참조형데이터에 대해 알아보았다.

 

 

이번엔 

참조형데이터의

얕은 복사와 깊은 복사에 대해 알아보자

 

 

// Object의 얕은 복사
let object = {a:0, b:0, c:0}
let object2 = object 
console.log(object.a, object2.a) // 0, 0
object2.a = 3
console.log(object.a, object2.a) // 3, 3

// 배열의 얕은 복사
const a = [1, 2, 3, 4];
const b = a;
b[3] = 3
console.log(a) // 1, 2, 3, 3
console.log(b) // 1, 2, 3, 3

 

 

위 코드와 같이

object라는 객체에 데이터를 할당한 다음

object2라는 객체에 object를 할당해주었다.

 

여기서

 

object2의 첫번째 키인 object2.a를 3으로 바꾼다면

 object.a와 object2.a 전부 3으로 바뀌는 걸 확인할 수 있다.

 

 

이렇게 

주소값을 복사한 다음 

해당 주소값을 가리키는 배열 및 객체를 

새로운 변수에 할당하면

여전히 각 배열 및 객체의 요소는 같은 주소값을 가지고 있기 때문에

기존의 데이터가 변경되는 것이다.

 

이게 얕은복사의 대표적인 예이며

 

 

 

const a = [1, 2, 3, 4];
const b = [...a];
b[3] = 3
console.log(a) // 1, 2, 3, 4
console.log(b) // 1, 2, 3, 3

 

 

위와 같이

b라는 변수에 a 배열을 스프레드 연산자로

할당하여 준다면

 

b는 a와 같은 요소값을 가지고 있지만

전혀 다른 새로운 주소값을 할당받기 때문에

 

b의 요소를 변경해도

a의 요소가 변경되지 않는것이다!

 

이게 깊은 복사의 대표적인 예이다.

반응형