[모던 JS 튜토리얼] 4.2. 참조에 의한 객체 복사

승연·2023년 11월 21일
0
post-thumbnail
객체원시 타입
참조에 의해 저장되고 복사값 그대로 저장, 할당, 복사

변수에 객체가 저장되어 있는 메모리 주소인 객체에 대한 ‘참조 값’이 저장

<script>

      let user = {name : 'Tiff'};
      let admin = user;

   </script>

→ 객체에 접근하거나 객체를 조작할 때는 여러 변수 사용 가능

<script>

      let user = {name : 'Tiff'};
      let admin = user;
      admin.name = 'minjukimIsBabo';
      alert(user.name);

   </script>

4.2.1. 참조에 의한 비교

let a = {};
      let b = a;  //참조에 의한 복사

      alert(a==b);   //true
      alert(a===b);  //true

→ 동일한 객체이기에 true

<script>

      let a = {};
      let b = {};  

      alert(a==b);   //false
      
   </script>

→ 두 객체가 모두 비어있기는 하지만, 독립된 객체이기에 일치, 동등 비교 → false

4.2.2. 객체 복사, 병합, Object.assign

새로운 객체 생성 후 원시 수준까지 프로퍼티 복사

<script>

      let user = {
         name : 'tiff',
         age : 20,
      }
      
      let clone = {};   //새로운 빈 객체

      //빈 객체 clone에 프로퍼티 전부 복사해서 넣음 
      for(let key in user){
         clone[key] = user[key];
      }

      clone.name = 'minju';

      //기존 객체에는 여전히 tiff 있음
      alert(user.name);

   </script>

Object.assign

Object.assign(dest, [src1, src2, src3,,,,])

  • dest : 목표로 하는 객체
  • src1, src2, src3,…. 복사하고자 하는 객체
  • 객체 src1, src2, src3,,,의 프로퍼티를 dest에 복사
  • 마지막으로 dest반환
<script>

      let user = {name : 'tiff'};
      let permissions1 = {canView: true};
      let permissions2 = {canEdit: true};

      //permissions1과 permissions2의 프로퍼티를 user로 복사

      Object.assign(user, permissions1, permissions2);

      //now user = {name : 'tiff', canView : true, canEdit : true}

   </script>
<script>

      let user = {name : 'tiff'};
      
      Object.assign(user, {name : 'minju'});

      alert(user.name); //user = {name : 'minju'}
   </script>

4.2.3. 중첩 객체 복사

프로퍼티가 다른 객체에 대한 참조 값일 때

<script>

      let user = {
         name : 'tiff',
         sizes : {
            height : 165,
            weight : 48,
         }
      };

      alert(user.sizes.weight);  //48 

   </script>
<script>

      let user = {
         name : 'tiff',
         sizes : {
            height : 165,
            weight : 48,
         }
      };

      let clone  = Object.assign({}, user);

      alert(user.sizes === clone.sizes);  //true, 같은 객체임

      user.sizes.weight++; //한 객체에서  프로퍼티 변경
      alert(clone.sizes.weight);

   </script>

user[key] 값을 검사하면서 그 값이 객체인 경우 객체의 구조 또한 복사해주는 반복문을 사용해야 함 : 깊은 복사

profile
앙녕항셍용

0개의 댓글