[ES6+] 객체를 구조 분해 할당할 때, 원본 객체 값도 변경이 되나요?

구조 분해 할당(비구조화 할당)은 ES6에서 새롭게 추가된 개념으로, 객체에서 일일히 값을 꺼내 변수마다 값을 할당해 줄 필요없이 짧고 간단하게 값을 사용할 수 있기 때문에 나 역시 코드 작성을 할 때 자연스럽게 사용하고 있었다. 그런데 이번에 스터디에서 "만약 let {a, b} = object 에서 a랑 b에 접근해서 수정할 경우, object의 실제값에 영향을 주나요?" 라는 질문을 받게 되었다. 평소에 구조 분해 할당을 사용하면서도 저 질문에 대해 바로 정확한 답변을 떠올리기가 힘들었다. (새삼스럽지만 간단한 개념들도 생각없이 사용해 왔다고 많이 느꼈다🥺 ..) 그래서 오늘은 구조 분해 할당을 할 때 원본 객체에 영향이 가는지에 대해 간단하게 작성해보려고 한다.

---

결론부터 말하자면, 원본의 값은 바뀌지 않는다. 구조 분해 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 변수에 할당하는 것이다. 구조 분해한 변수들에 대해 다른 값을 대입하더라도 값이 할당되고 있는 새로운 변수들의 값이 바뀌는 것이고, 원본 객체의 값은 바뀌지 않는다.

  
  let info = { user : {} };
  info.user = { 
      membership : false,
      data : [male, 28, developer],
      error : new Error('err')
  } 
  
  console.log(info);
  /*
  {
  	user : {
    	membership: false,
        data : [male, 28, developer],
        error : new Error('err');
    }
  }
  */
  

위와 같이 info라는 객체에서 user라는 key 변수에 대응하는 값을 직접 바꿔준 경우를 가정해보았다. 콘솔에서 확인해보면 원본 객체의 값이 전부 바뀐 것을 확인할 수 있다.

 

  
  const { membership=true, data: member, error } = state.user;
  console.log({membership, member, error});
  /*
  membership : false -> 설정한 초기값이 아니라 존재하던 기존값이 반환된다.
  member : Array(3), -> data라는 변수명을 member로 변경해서 가져왔음.
  error: Error 객체 
  */
  
  console.log(info.user)
  /*
  {
      membership: false,
      data : [male, 28, developer],
      error : new Error('err')
  }
  */
  

하지만 위 코드와 같이 객체 분해 할당을 통해 값을 사용하려는 케이스에서는 전혀 다른 결과가 나타난다. 값을 할당한 후 변수에 대한 값을 확인해보면 원하는 대로 변경이 되어있다. 하지만 원본 객체를 확인해보면, 변경된 값들이 전혀 적용되어 있지 않음을 확인할 수 있다. 따라서 원본 객체의 값을 바꾸지 않고 변수만을 가져다 할당하여 쓰고싶다면, 객체 분해 할당 방식이 효과적일 것이다.

 

---

Reference

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN

• https://likejirak.tistory.com/117

[ES6 ] 객체 리터럴 응용