본문 바로가기

Front-End/JavaScript

깊은 복사,얕은 복사

이 개념은 객체를 복사할 때 사용되는 개념이다.

 

얕은복사(Shallow Copy)

객체의 최상위 레벨만 복사하고, 중첩된 객체는 복사하지 않고 참조를 공유합니다.

즉,복사된 객체 내부의 중첩된 객체들은 원본 객체와 동일한 참조를 가진다.

 

깊은 복사(Deep Copy)

객체와 그 객체에 포함된 모든 중첩된 객체들까지 재귀적으로 복사한다.

즉, 복사된 객체는 원본과 다른 메모리 주소를 갖게 된다.

 

원본이 변할 때

얕은 복사 : 값이 원본과 같이 변함

깊은 복사 : 원본과 다른 주소값을 갖고 있기에 변하지 않음.

 

let a = [1, 2, 3];
//이렇게 변수를 냅다 갖다놔버리면 값을 공유함. (얕은 복사)
let b = a;
let c = [...a];
//이렇게 스프레드 연산자로 배열을 없앴다가 다시 놓아주면,
//메모리주소가 새로 할당되어서 깊은 복사가 완료가 됨.
a[3] = 4;
console.log(a);
console.log(b);
console.log(c);
//이게 깊은 복사 쓸 때 유용함.
// result
// a: [1,2,3,4]
// b: [1,2,3,4]
// c: [1,2,3]

//reference data type (Array,Object)
//이에 관련된 내용은 여기에 나옴.

 

원본 "변수 a" 기준으로

변수 b는 얕은복사, (같은 주소)

변수 c는 깊은 복사다 (다른 주소)

'Front-End > JavaScript' 카테고리의 다른 글

class , 생성자 함수 , 프로토타입 메서드  (0) 2024.07.19
Closer  (0) 2024.07.19
함수  (0) 2024.07.17
자료형 , 연산자  (0) 2024.07.17
조건문 , 반복문 정리  (0) 2024.07.16