02. 데브코스-생성형 ai 백엔드코스 8일차

모던 자바스크립트에 대해 공부했다.

공부한 내용 중 깊은복사와 얕은 복사에 대한 내용이 간략하게 소개되어 이야기하고자 한다.

 

spread 구문이라는 것이 있는데

다음과 같이 배열이나 객체를 풀어서 쓰는 것을 말한다.

const arr1 = [1,2];
console.log(arr1);
console.log(...arr1);

const obj1 = {val1:10, val2:20};
const obj2 = {val3:30, val4:40};
const obj3 = {...obj1};
const obj4 = {...obj1, ...obj2};
console.log(obj3);
console.log(obj4);

 

 

이 구문은 단순 = 로 복사하는 얕은 복사와 비교 가능하다.

스프레드 구문은 깊은 복사로 객체 자체를 복사해 오는 것을 의미한다.

따라서 다음과 같은 예제를 마주할 수 있다.

// 얕은 복사
const arr1 = [10,20];
const arr2 = arr1;
arr1[0] = 100;
console.log(arr1);
console.log(arr2);

// 깊은 복사
const arr1 = [10,20];
const arr2 = [...arr1];
arr1[0] = 100;
console.log(arr1);
console.log(arr2);

 

콘솔 결과값

 

얕은 복사의 경우 같은 주소값을 참조하고 있어 arr1, arr2의 첫번째 요소가 모두 바뀌었다.

반면, 깊은 복사의 경우 값 자체를 복사하기 때문에 arr1의 첫번째 요소만 값이 바뀐 것을 확인할 수 있다.

 

프로그래밍 시에 얕은 복사와 깊은 복사를 주의하여 구분하여야 겠다.