Destructuring Assignment

구조분해할당이란

배열이나 객체의 속성을 분해하여 그 값을 서로다른 변수에 할당하는 것을 의미한다.

1. 객체의 구조분해할당

const user = {
    name: '철수',
    age: 13,
    school: '다람쥐초등학교',
    createdAt: '2010-09-07',
}

const {name, age, school, createdAt} = user;

user라는 객체안에는 name, age, school, createdAt 이라는 키값들이 있다. 기존에 우리가 알던 방법으로 새로운 변수에 값을 할당하기 위해선 아래와 같은 방법을 써야했다.

const name = user.name;
const age = user.age;
const school = user.school;
const createdAt = user.createdAt

하지만 구조분해할당을 활용한다면 더 간단하고 더 읽기편한 코드가 완성될 수 있다.

2. 배열의 구조분해할당

const classmates = ['철수', '영희', '훈이'];

const [child1, , child2, child3] = classmates;

객체와 비슷한 맥락으로 배열또한 child1, child2, child3라는 새로운 변수에 각각 '철수', '영희', '훈이'를 구조분해할당을 통해 할당해 주었다.

여기서 주의해야하는 부분이 있다. 객체의 경우 key값을 가져와 할당을 해주는 것 이므로 순서는 중요하지 않다. 하지만 배열의 경우 순서에 따라 각 변수에 할당되므로 순서가 매우 중요하다.

구조분해할당의 사용법

이제 왜 구조분해할당을 활용해야 하는지 알아보자.
보통 함수를 작성할때 매개변수를 순서에 맞게 써야지만 함수가 올바르게 작동했을 것이다.

function getWelcomeTemplate(name, age, school, createdAt) {
	...
}

getWelcomeTemplate('홍길동', 12, '초등학교', '2020-01-01');

하지만 구조분해할당을 활용하게된다면...

function getWelcomeTemplate({name, age, school, createdAt}) {
	...
}

const name = '홍길동';
const age = 12;
const school = '초등학교';
const createdAt = '2020-01-01';

getWelcomeTemplate({createdAt, age, school, name});

위와 같이 매개변수안에 순서와 상관없이 넣을 수 있는 장점과 가독성이 좋아진것을 확인할 수 있다.