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

얕은 복사와 깊은 복사

위르겐 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의 요소가 변경되지 않는것이다!

 

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

반응형

'자바스크립트 > 자바스크립트란?' 카테고리의 다른 글

스코프, 호이스팅, TDZ  (0) 2022.07.20
불변 객체를 만드는 방법  (0) 2022.07.19
원시자료형과 참조자료형  (0) 2022.07.19
undefined와 null  (0) 2022.07.19
자바스크립트의 고유한 특성  (0) 2022.07.18