[JavaScript]객체 - 참조에 의한 객체 복사

• 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것

let message = "hello";
let phrase = message;

• 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어 ‘메모리 주소’인 객체에 대한 ‘참조 값’ 저장’
• 객체는 메모리 내 어딘가에 저장, 변수 user엔 객체를 참조할 수 있는 값 저장
• 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않음

let user = {name : "John"};

// 참조값을 복사함
let admin = user;

→ 객체에 접근하거나 객체를 조작할 땐 여러 변수 사용

• 객체 : 서랍장 | 변수 : 서랍장을 열 수 있는 열쇠
• 서랍장을 열 수 있는 열쇠는 두 개, 그 중 하나(admin)를 사용해 서랍장을 열어 정돈 → 또 다른 열쇠로 서랍장을 열면 정돈된 내용 볼 수 있음

  let user ={
      name: "John"
  }
  let admin = user;
  
  admin.name = "Pete"; // admin 참조 값에 의해 변경됨
  console.log(admin); // Pete | user 참조 값을 이용해 변경사항 확인          

참조에 의한 비교

• 객체 비교시 동등 연산자 == 와 일치 연산자 ===는 동일하게 동작
• 비교 시 피연산자인 두 객체가 동일한 객체인 경우 참 반환
• 독립된 객체는 일치-동등 비교하면 거짓이 반환

  let a = {}
  let b = {}
  console.log(a == b) //false

• obj1 > obj2 같은 대소 비교나 obj == 5 같은 원시값과의 비교에선 객체가 원시형으로 변환

객체 복사, 병합과 Object.assign

• 객체가 할당된 변수 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어짐
• 기존에 있던 객체와 똑같으면서 독립적인 객체 만들기
  • 자바스크립트는 객체 복제 내장 메서드 지원 X ⇒어려움
  • 새로운 객체 만든 다음 기존 객체의 포르퍼티들을 순회해 원시 수준까지 프로퍼티 복사

    let user = {
      name: "John",
      age: 30
    };
    
    // 새로운 빈 객체
    let clone = {};
    
    // 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
    for (let key in user) {
      clone[key] = user[key];
    }
    
    // 이제 clone은 완전히 독립적인 복제본이 되었습니다.
    clone.name = "Pete"; // clone의 데이터를 변경합니다.
    
    console.log( user.name ); //John
    console.log( clone ); // { name: 'pete', age: 30 }

  • Object.assign 사용
    • Object.assign(dest, [src1, src2, src3...])
    • assign 메서드를 사용해 여러 객체를 하나로 병합

      let users = { name: "John"};
      
      let permission1 = { canView: true};
      let permission2 = { canEdit : true};
      
      //permission1,2 프로퍼티 suer로 복사
      Object.assign(users, permission1, permission2);
      console.log(users); // { name: 'John', canView: true, canEdit: true }

    • Object.assign 사용하면 반복문 없이도 간단하게 객체 복사 가능

      let user = {
        name: "John",
        age: 30
      };
      
      let clones = Object.assign({}, user);
      console.log(clones); //{ name: 'John', age: 30 }

중첩 객체 복사

• 프로퍼티는 다른 객체에 대한 참조 값일 수도 있음

  let user = {
    name: "John",
    sizes: {
      height: 182,
      width: 50
    }
  };

• 객체의 '진짜 복사본’을 만들려면 '얕은 복사(shallow copy)'를 가능하게 해주는 Object.assign
  이나 '깊은 복사’를 가능하게 해주는 _.cloneDeep(obj) 사용
• 얕은 복사본은 중첩 객체를 처리하지 못함

  
  let cclone = Object.assign({}, user);
  console.log(user.sizes === cclone.size)
  
  user.sizes.width++;
  console.log(cclone.sizes.width);