비구조화 할당

객체 비구조화 할당

const object = { a: 1, b: 2 };
const { a, b } = object;
console.log(a);
console.log(b);

function print({ a, b }) {
  console.log(a);
  console.log(b);
}
print(object);

- 위와 같이 비구조화 문법을 사용하여 왼쪽 변수의 값에 오른쪽 값들을 해체하여 간편하게 할당해 줄 수 있음

const object = { a: 1 };

const { a, b = 2 } = object;
console.log(a);
console.log(b);

혹은 위처럼 비구조화 구조에서 b = 2 처럼 기본값을 할당해줄 수도 있다.

 

 

const animal = {
  name: "멍멍이",
  type: "개"
};

const { name: nickname } = animal;

console.log(nickname);

이런 식으로 { 원래 이름 : 새로 지을 이름 } 으로 변수를 새로 할당할 수 있다. 

 

배열 비구조화 할당 

const array = [1];

/*const one = array[0];
const two = array[1];
*/

const [one, two = 2] = array;

console.log(one);
console.log(two);

 - 배열도 객체와 마찬가지로, 비구조화 문법 이용 시 기본값 지정 및 변수에 해당 값을 해체하여 할당할 수 있다.

 

객체의 깊숙한 할당

const deepObject = {
  state: {
    information: {
      name: "velopert",
      languages: ["korean", "english", "chinee"]
    }
  },
  value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
  name,
  languages,
  value
};

console.log(extracted);

 

- 위처럼 객체 하위의 자식요소들을 선택하여 값을 비구조화 할당으로 꺼내올 수 있다.

- extracted 객체에서 볼 수 있듯이, 특정 키 이름으로 선언된 값이 이미 있다면, value를 할당하는 것을 생략해도 된다.

 

const deepObject = {
  state: {
    information: {
      name: "velopert",
      languages: ["korean", "english", "chinee"]
    }
  },
  value: 5
};

const {
  state: {
    information: {
      name,
      languages: [firstLang, secondLang]
    }
  },
  value
} = deepObject;

const extracted = {
  name,
  firstLang,
  secondLang,
  value
};

console.log(extracted);

이런 식으로 형태를 비슷하게 가져와서, 비구조화 할당문을 사용할 수도 있다.