깊은 복사/ 얕은 복사
2025. 9. 9. 10:16ㆍFRONTEND/Javascript
깊은 복사 : 요소(데이터) 그대로 형태 그대로 복사
예를 들어 파이썬 경우 : a = [[a, b]. [c, d, e]] 그대로 복사하는 것은 깊은 복사이다.
a.append(5) 넣으면, a = [[a, b]. [c, d, e], 5] 가 된다.
그에 반면 얇은 복사는 주소값을 복사하며, 기존 배열, 리스트와 주소로 공유한다.
react에서 userSate/useEffect에서 사용된다.
<!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>
<h1>배열</h1>
<script>
// const, filter, map, slice, 스프레드(전개) 연산자
console.log("====== 1. 스프레드(전개) 연산자 ======");
const a = [1, 2, 3];
// 쉬프트 틱 ` 이라고 함
console.log(`a의 값 : ${a}`)
a.forEach(element => {
console.log(element);
});
const b = a; // 얕은 복사 - 주소를 변수에 저장
console.log(`얕은 복사후 b의 값: ${b}`); // b의 값 : 1,2,3
b.push(4); // b의 데이터 변경, a의 데이터도 변경
console.log(`b의 값 추가후 b의 값: ${b}`); // b의 값 : 1,2,3,4
console.log(`b의 값 추가후 a의 값: ${a}`); // a의 값 : 1,2,3,4
// 깊은 복사 - 스프레드(전개) 연산자
const c = [...a]; // c배열안에 바꾼 a변수의 값들을 흩뿌린다.
console.log(`깊은 복사후 c의 값: ${c}`); // b의 값 : 1,2,3,4
c.push(5);
console.log(`c의 값 추가후 c의 값: ${c}`); // c의 값 : 1,2,3,4,5
console.log(`c의 값 추가후 b의 값: ${b}`); // b의 값 : 1,2,3,4
console.log(`c의 값 추가후 a의 값: ${a}`); // a의 값 : 1,2,3,4
console.log(a === b); // true → 같은 주소(참조 공유)
console.log(a === c); // false → 다른 주소(새로운 배열)
console.log(b === c); // false
</script>
</body>
</html>'FRONTEND > Javascript' 카테고리의 다른 글
| Jquery - 회원가입(유효성 검사) with 정규식, 이벤트 (0) | 2025.07.10 |
|---|---|
| Javascript -> Jquesy -> React 사용하게 된 이유?|자료구조 : for, each / map, grep (0) | 2025.07.09 |
| JSON, XML - 데이터 전송, AJAX, REST API, SOAP(UDDI, WDSL) - AJAX(댓글 달기) (0) | 2025.07.09 |
| jquery - 적용 2가지 방법(다운로드 포함) (0) | 2025.07.09 |
| Document가 무엇? (0) | 2025.07.04 |