비구조화할당(구조분해할당)

비구조화 할당 이란?

<aside> 💡 ES6에서 등장한 문법으로써, 배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말합니다. 또는 구조 분해 할당이라고 명칭 합니다.

</aside>

왜 쓰나요?

<aside> 💡 배열, 객체 내 값을 추출하는 코드가 매우 간단해진다. 필요한 객체와 나머지 요소 분리가 매우 간단하다. 기본값 지정이 가능하다.

</aside>

어떻게 쓰나요?

만약, object가 다음과 같이 생겼다면, 프로퍼티(key값)을 변수로 선언해 바로 해당 object의 값을 이용할 수 있습니다.

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

const { a, b } = object;

/*
얘와 같아요
const a = object.a; // 하위 속성이 있을 때 쓸 수 있습니다
const b = object.b;
*/
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);

// 이렇게 쓰면 좋은점

function Example(a, b, c) {
	...
}
Example(a=1, b=2, c=3) // 이렇게 순서를 맞춰 넣어줘야하는데

function Example({a, b, c}) {
	...
}
Example({a:1, c:3, b:2}) // key 이름만 맞춰주면 된다~

1. object를 print라는 함수의 인자로 넣어준다.
2. print에선 들어오는 인자의 구조를 분해하여 받는다

변수명 변경

변수의 이름도 바꿀 수 있어요

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

const { name: nickname } = animal // animal의 name이라는 속성을 nickname으로 쓸꺼야

console.log(nickname); // '멍멍이'

배열도 됩니다

const array = [1, 2];
const [one, two] = array;

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