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

❓ 구조분해할당(Destructuring Assignment)이란?

MDN에 따르면 구조분해할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게하는 JS 표현식이라고 한다. 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우, 객체와 배열을 분해해서 원하는 값만을 가져올 수 있게 된다.

근데 정의만으로는 이 구문을 정확하게 이해를 못하겠으니 코드를 보면서 하나씩 뜯어보도록하자.

 객체선언

const classMates = {
	name: "뽀로로",
    	age: 5,
    	school: "노는게제일좋고등학교"
}

와 같은 객체를 담은 변수가 있다고 가정해보자. 다음의 객체의 key값을 각각 출력하려면

 객체의 key값 담기

const name = classMates.name;
const age = classMates.age;
const school = classMates.school;

console.log(name) // 뽀로로
console.log(age) // 5
console.log(school) // 노는게제일좋고등학교

이런식으로 변수에 key값을 각각 담아주어야 한다. 그런데 구조분해할당을 쓰게 되면 위의 3줄을 아래의 한줄로 줄일 수 있다!

 객체의 구조분해할당

const { name, age, school } = classMates;

console.log(name) // 뽀로로
console.log(age) // 5
console.log(school) // 노는게제일좋고등학교

이때 중요한 부분은 객체의 key값과 { } 안의 값이 일치해야 한다. 가령

 틀린문법

const { class, age, name } = classMates;
// error

class라는 key값이 classMate라는 객체에 담겨있지 않았기 때문에 쓸 수 없다. 오로지 객체에 있는 key값만을 쓸 수 있다.
이처럼 객체에 구조분해할당을 사용하게 되면, 원하는 값만 간결하게 가져올 수 있어 유용하다.

배열에서도 쓸 수 있다.

 배열선언

const classMates = [ "뽀로로", "크롱", "루피" ]

이런 배열이 있는데, 배열에 접근해서 값을 가져오려면 다음과 같이 배열의 index(인덱스)값을 이용해야한다.

 배열접근

const pororo = classMates[0];
const dino = classMates[1];
const luffy = classMates[2];

console.log(pororo); // 뽀로로

위의 방식 대신에 구조분해할당을 사용하게 되면 다음과 같이 간결해진다.

 배열의 구조분해할당

const [ pororo, dino, luffy ] = classMates;

console.log(pororo); // 뽀로로

그런데 만약 크롱을 빼고 루피와 뽀로로의 값만 필요하다면? 그렇다면 방법이 조금 다르다.

 배열의 구조분해할당 2탄

const [ pororo,, luffy ] = classMates;

console.log(pororo); // 뽀로로

위처럼 필요없는 값의 자리를 비워줘야한다! 이유는 배열의 인덱스 순서대로 값이 담기는 것이기 때문에 자리를 비워두지 않으면 원치않는 곳에 엉뚱한 데이터가 들어가게 된다. 

가령 예를 들어보자. 크롱의 데이터는 필요없어서 크롱을 담을 변수만 빼면 다음과 같이 루피 변수에 크롱 데이터가 담긴다.

 틀린문법

const [ pororo, luffy ] = classMates;

console.log(luffy); // 크롱

이처럼 배열의 구조분해할당에서는 인덱스의 순서에 따라 값이 담기기에 순서가 중요하다.