비구조화 할당

동기

일할 때 비구조화 할당 문법이 많이 보여서, 비구조화 할당에서 대해서 알아보고자 한다.

비구조화 할당이란

배열이나 JSON 객체의 프로퍼티를 해체하여 그 값을 개별 변수에 담을 수 있게 해주는 자바스크립트 표현식

이전 처럼 user.name 과 같이 '.'을 사용하지 않고 바로 변수를 사용할 수 있어서 편리해진 것 같다.

예시

const object = { a: 1, b: 2 };

const { a, b } = object;

console.log(a); // 1
console.log(b); // 2

 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수 있다.

아래 처럼 함수에서도 가능 하다.

const object = { a: 1, b: 2 };

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

print(object);

비구조화 할당시 기본 값 설정하기

const object = { a: 1 };

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

print(object);
// 1
// 2

비구조화 할당시 이름 바꾸기

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

const { name: nickname } = animal// name 을 nickname으로 바꿔 사용
console.log(nickname);

 

참고

06. 비구조화 할당 (구조 분해) 문법 · GitBook

 

[JavaScript] 비구조화(구조분해) 할당