js

얕은 복사 vs 깊은 복사

풀스택 개발자 2023. 8. 14. 17:07 
<!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>