<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
</style>
</head>
<body>
<a href="#" class="pop">클릭하여 페이지 열기</a>
<script>
$(document).ready(function () {
//얕은 복사 -> 객체를 복사할 때 원본 값과 복사된 값이 같은 참조(=메모리 주소)를 가리키는 것
let a = [1,2,3];
let b = a;
b.push(4);
console.log(a); //[1,2,3,4]
console.log(b); //[1,2,3,4]
//깊은 복사 -> 복사된 객체가 다른 주소를 참조하며 내부의 값만 복사된다.
let c = [1,2,3];
let d = [...c]; // spread 전개 연산자 -> 자바에서는 stream api 활용
d.push(4);
console.log(c); //[1,2,3]
console.log(d); //[1,2,3,4]
});
</script>
</body>
</html>