자바스크립트/자바스크립트란?
얕은 복사와 깊은 복사
위르겐
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의 요소가 변경되지 않는것이다!
이게 깊은 복사의 대표적인 예이다.
반응형