Javascript의 ES6 구조분해할당(Destructuring assignment)

 안녕하세요. 이번에는 JavaScript의 구조분해할당(Destructuring assignment)에 대해서 알아보겠습니다. 개인적으로 매우 유용한 기능이라고 생각합니다.

 구조분해할당은 해당 객체나 배열을 한번에 정의하기 위해서 만들어졌습니다. 위 그림에서 위쪽은 과일을 아래쪽은 수량을 적었습니다. 보통은 일일이 코딩을 해서 입력을 했지만 구조분해할당이 생기면서 상당히 코드를 작성하기 쉬워졌습니다.

let apple, banana, cherry, melon;

[apple, banana, cherry, melon] = [10, 5, 3, 4];

console.log("apple : ", apple);

console.log("banana : ", banana);

console.log("cherry : ", cherry);

console.log("melon : ", melon);

코드로 구현하면 위와 같이 할수 있고 실행결과도 위와 같다.

const obj = {

"apple" : 10,

"banana" : 5,

"cherry" : 3,

"melon" : 4

}

const {apple, banana, cherry, melon} = obj;

console.log("apple : ", apple);

console.log("banana : ", banana);

console.log("cherry : ", cherry);

console.log("melon : ", melon);

Object를 이용하여 구조분해할당을 위 코드처럼 구현할수 있습니다. 다만 이때는 obj의 키값과 동일해야 구조분해할당을 사용할수 있습니다. 그렇지 않으면 해당 변수는 'undefined'가 됩니다.

만약 뒤쪽에 얼마나 오는지 모른다면 '...rest'를 사용하면 됩니다. 아래 코드를 참고해 주시기 바랍니다.

const obj = {

"apple" : 10,

"banana" : 5,

"cherry" : 3,

"melon" : 4,

"pinapple" : 7,

"watermelon" : 10,

"strawberry" : 3

}

const {banana, apple, cherry, melon, ...rest} = obj;

console.log("apple : ", apple);

console.log("banana : ", banana);

console.log("cherry : ", cherry);

console.log("melon : ", melon);

console.log("rest of the fruit : ", rest);

위 코드처럼 기존에 없던 pinapple, watermelon, strawberry가 추가된 것을 알수 있습니다. 이것을 rest로 모두 받는다면 아래 콘솔로그처럼 객체로 출력됨을 알수 있습니다.