[js] 객체 구조 분해 할당과 얕은 복사 방식들

객체 구조 분해 할당

오늘 페어 활동을 하면서 객체 구조 분해 할당에서 처음보는 문법 형식을 접할 수 있었다.

객체를 구조 분해 할당 할 때, 분해 받는 오브젝트의 프로퍼티를 내가 원하는 이름으로 가져올 수 있었다.

// 코드 출처 - https://ko.javascript.info/destructuring-assignment#ref-47
let options = {
  title: "Menu",
  width: 100,
  height: 200
};
// { 객체 프로퍼티: 목표 변수 }
let {width: w, height: h, title} = options;

console.log(w);
console.log(h);
console.log(title);

따라서 width라는 프로퍼티를 w라는 변수로 사용할 수 있게 된다.

중요한 점은 객체의 프로퍼티가 앞이고 목표로하는 변수명이 뒤에 온다는 것이다.

{ 객체프로퍼티 : 목표 변수명 }

얕은 복사

자바스크립트에서 간단하게 제공하는 복사 방식 대부분이 얕은 복사라는 점을 알게 되었다.

보통 배열을 복사할 때 3가지 방법을 사용한다.

• Object.assign()
• 스프레드 연산자
• slice()

위 세가지 방식은 전부 얕은 복사를 제공한다. 따라서 복사하는 요소가 참조형이라면 reference가 복사된다.

const arr = [{a:1},1,2];
const copy1 = Object.assign([],arr);
const copy2 = [...arr];
const copy3 = arr.slice();

// arr의 0번째 요소인 {a:1}은 객체이기때문에 모든 복사에서 Reference가 복사되었다.
// 따라서 copy3[0].a 값을 변경하면 모두가 영향을 받는다.
copy3[0].a = 100; 

console.log(arr[0].a); // 100
console.log(copy1[0].a); // 100
console.log(copy2[0].a); // 100
console.log(copy3[0].a); // 100