구조분해할당

const child = { 
  name: "영희",
  age: 7,
  school: "토끼초등학교"
}

위의 객체를 name, age, school라는 변수에 저장한다고 해보자

const name = child.name;
const age = child.age;
const school = child.school;

위의 소스코드를 보면 변수를 3번 선언하고 키값을 이용해 child 객체에 3번 접근해야한다. 굉장히 비효율적이고 소스코드가 계속해서 길어지는 것을 알 수 있다.

이를 해결하기 위한 방법으로 사용하는 것이 구조분해할당이다.

const { name, age, school } = child;

세 줄이었던 코드가 한 줄로 바뀌는 것을 볼 수 있다.

이때, 주의해야할 것이 있는데 오른쪽의 {name, age, school}의 값은 child의 키 값과 매칭된다는 것이다. 즉, 중괄호 안에 변수들의 순서가 바뀌어도 항상 같은 결과가 나온다는 것이다.

그렇다면 키값이 없는 배열의 경우에는 어떻게 될까? 먼저 아래 소스코드를 보자

const friends = [ "철수", "영희", "맹구" ];
const [ friend1, friend2, friend3 ] = friends;

배열은 객체와 다르게 대괄호를 이용해서 구조분해할당을 하는 모습을 볼 수 있다.
대신 배열은 매칭될 키값이 없기 때문에 순서대로 값이 할당되게 된다.
즉, 위 소스코드는 아래와 같다.

const friends = [ "철수", "영희", "맹구" ];
const friend1 = "철수";
const friend2 = "영희";
const friend3 = "맹구";