[자바스크립트 문법] 객체와 배열의 구조분해할당

구조분해할당이란?

배열, 객체와 같이 구조화되어 있는 iterable한 데이터를 분해시켜서 각각의 변수에 담는 것을 의미한다. iterable한 데이터란, 배열과 객체처럼 순회 가능한 데이터를 의미한다.

배열과 구조분해할당

다음은 arr 이라는 배열이 있다. 배열의 각 요소를 변수로 선언하려면 하나씩 총 5개의 변수가 필요하다.

let arr = [1, 2, 3, 4, 5];

let one = arr[0];
let two = arr[1];

...

console.log(one, two); // 1,2 출력

 

그런데 구조분해할당을 사용한다면, 한 줄로 코드를 줄일 수 있다.

• 좌측에는 let, const와 같은 변수 선언 키워드를 적고 대괄호 []안에 변수명을 작성한다. 이 대괄호는 배열이기 때문에 가능하다.
• 우측에는 구조분해할당 대상인 배열명 arr을 넣어준다.

즉, 우측에 있는 arr 배열을 구조 분해하여 순서대로 one, two 변수명에 각각 담아준 것이다.

let arr = [1, 2, 3, 4, 5];

// 키워드 [변수명, 변수명2] = 구조분해할당 할 배열명
let [one, two] = arr;

console.log(one, two); // 1,2 출력

객체와 구조분해할당

객체의 property와 값을 변수에 넣고 싶으면 다음 코드처럼 한줄씩 변수 선언을 해줘야 한다.

let obj = { name: "otter", gender: "male" };

let userName = obj.name;
let userGender = obj.gender;

console.log(userName, userGender); // 출력 otter, male

 

객체도 배열처럼 구조분해할당하여 코드를 줄일 수 있다. 하지만, 배열하고 조금 다른 형태이다. 

• 객체를 구조분해하려면 {} 중괄호를 사용한다.
• 원본 객체의 key 값을 중괄호 안에 넣으면 변수로써 동작을 하게 된다. 원본 객체의 key에 해당하는 값이 연결되어서 담기게 된다. 

그래서 객체의 구조분해할당은 각각의 key 로 이루어져있기 때문에, 다른 명칭은 중괄호 안에 넣지 않음을 주의해야 한다.

let obj = { name: "otter", gender: "male" };

// 중괄호안에는 객체의 key를 적어야 한다. 
let { name, gender } = obj;

console.log(name, gender); // 출력 otter, male

객체의 key 값을 새로운 변수에 담고 싶다면?

• 중괄호 안에 key명을 작성하고 콜론다음 변수명을 입력한다.
• 지정된 변수명에 해당하는 key값이 연결되어 출력해보면 해당 문자열이 담겨있다.

let obj = { name: "otter", gender: "male" };

// 중괄호안에는 객체의 key와 변수명을 적는다.
let { name: userName, gender: newGender } = obj;

console.log(userName, newGender); // 출력 otter, male