Javascript를 배우다가 얕은 복사, 깊은 복사에 대해서 배우게 되었는데, 살짝 헷갈려서 배운 것들을 정리하는 시간을 갖고자 한다.
우선 기본적으로 ... , 스프레드 문법이 무엇인지 알아보자
스프레드 문법(Spread Syntax)은 배열, 객체 등을 펼쳐서 개별 요소로 분리하는 기능을 한다.
즉 반복 가능한 객체를 배열로 변환해준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4]
</script>
</body>
</html>
주석을 보면 명확하게 출력 결과를 알 수 있다!! 근데 진짜 Javascript도 그렇고 Python도 그렇고 언어 자체가 유연한거 같다. 맨날 Java로만 해와서 그런가?
이제 이 문법을 배우다 보니 이걸 이용해서 객체를 복사하면 얕은 복사일까 깊은 복사일까 의문이 들었다.
일단 스프레드 문법을 사용하면 얕은복사 가 가능하다.
얕은복사?? 깊은 복사??
기본적으로 얕은 복사(Shallow Copy)는 객체의 참조만 복사하고 깊은 복사(Deep Copy)는 객체의 모든 데이터를 복사한다.
Java랑 기본 느낌은 비슷하다
결론은 얕은 복사면 원본에 영향이 가고 깊은 복사면 원본에 영향이 안간다
근데 항상 느끼는건데 깊은 복사가 약간 원본이랑 깊게 맺어져 있으니 영향이 가야되고 얕은 복사가 값만 복사하는게 한국어상, 논리적으로 맞게 느껴지지 않나??
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 }; // 스프레드 문법으로 얕은 복사
obj2.a = 3;
console.log(obj1.a); // 1 (원본은 바뀌지 않음)
obj2.b.c = 99;
console.log(obj1.b.c); // 99 (원본도 바뀜)
</script>
</body>
</html>
근데 얕은 복사라고 배웠는데 왜 최상위 속성 값은 원본이 영향을 안 받을까??
이에 대해서 GPT에게 물어보았다
📌 얕은 복사의 원리
스프레드 문법을 사용할 때 얕은 복사가 이루어지는데, 얕은 복사는 객체의 최상위 속성만 복사하고, 중첩된 객체는 참조값만 복사된다. 즉, 최상위 속성(a)은 값 자체를 복사하지만, 중첩 객체(b)는 주소를 복사해서 같은 객체를 참조하게 돼.
즉 원시타입은 값 자체를 복사하므로 영향을 주지 않는다
하지만 참조타입(예 : 객체, 배열) 은 참조값을 복사한다
해당 포스트를 통해서 Javascript의 스프레드 문법과 얕은 복사, 깊은 복사에 대해서 더 잘 알게 되었다!!
'SKALA > Front-end' 카테고리의 다른 글
| Vue.js , v-show vs v-if 차이 (0) | 2025.03.31 |
|---|---|
| Vue.js, watch() 메소드, 사용법 (0) | 2025.03.28 |
| 비동기 작업과 콜백 지옥. Promise, async / await (0) | 2025.03.20 |
| DOM, DOM 객체 이벤트 다루기 실습 (1) | 2025.03.19 |
| Bootstrap과 반응형 웹 페이지 (0) | 2025.03.14 |
