반응형
깊은 복사
깊은 복사는 변수에 다른 변수의 값을 대입했을때 각각의 변수가 독립적으로 존재하고 값만 복사 되었을 때를 말합니다.
즉 원본의 값만을 복사하여 반환 합니다.
// 일반변수의 깊은복사
let a = 2;
let b = a;
console.log (a, b) // 2, 2
b = 3;
console.log (a, b) // 2, 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
얕은 복사
반면 얕은복사는 배열이나 객체등에서 해당 객체의 참조값을 대입했을때, 해당 참조값의 복사가 일어나 같은 주소를 가르키게 될 경우를 의미합니다.
원본 배열의 참조 주소를 반환합니다.
// Object의 얕은 복사
let object = {a:0, b:0, c:0}
let object2 = object
console.log(object.a, object2.a) // 2, 2
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
반응형
'웹 프론트엔드 > JavaScript' 카테고리의 다른 글
JS: chrome 브라우저에서 blob 최대 용량 구하기 (0) | 2022.03.18 |
---|---|
JS : 모바일 웹앱에서 video 태그 자동재생 구현하기 ( + 추가적으로 IOS safari에서 자동 재생 시 저전력 모드일때 멈추는 문제 예외처리) (6) | 2022.01.29 |
자바스크립트 : Slice vs Splice 차이점 비교 (깊은 복사, 얕은 복사) (0) | 2021.04.20 |
자바스크립트 - IIFE 란? (Immediately Invoked Function Expressions) (0) | 2018.07.26 |
자바스크립트 - map 함수 (0) | 2018.07.07 |