Destructuring문법

Destructuring문법 , 구조분해 할당, 비구조화 할당 등으로 불리는 문법에 대해서 기술한 페이지

Intro

JS에서는 일반 자바와 다르게 많은 단축 구문이 존재한다. 예를 들어 배열선언을 단축하는 단축구문

const arr = [1,2,3]; // const arr = new Array(1,2,3);

const obj = {}; // const obj = new Object();

등이 그러하다. 이는 개발자의 편의성과 가독성등을 챙기기 위해서인데 Destructuring문법 또한 개발자의 편의성을 위해 추가된 문법으로 배열과 객체의 값을 더 간단하고 직관적으로 추출하기 위해 만들어진 단축구문이다.

Array Destructuring Assignment

const arr = [1,2,3];
// Destructing문법 사용전 배열의 값을 꺼내서 변수로 등록하는 과정
const a = arr[0]; // 1
const b = arr[1]; // 2
const c = arr[2]; // 3

// Destructing문법 사용시
const [a,b,c] = arr;
// a= 1, b= 2, c = 3
// 배열의 순서에 맞게 변수를 준비해두면 각 배열에 담긴 값들이 순서에 맞춰서 저장된다.

Object Destructuring Assignment

const obj = {
    foo : 1,
    bao : 2
};
// Destructuring 문법 사용 전
const foo = obj.foo; // dot notation
const bao = obj["bao"]; // bracket notation

// Destructuring 문법 사용 후
const {foo, bar} = obj;
// obj객체의 property명과 동일한 변수에 해당 property의 value값이 저장된다.

이 처럼 배열과 변수에 Destructuring 문법을 적용하면 코드의 길이가 줄어들고 가독성도 확보되면서 더욱 간결하게 작업을 할 수 있다.

Destructuring문법은 특히 ...연산자와 함께 사용하면 코드가 더욱 간결해집니다. 다음장으로 이동해서 Rest문법에 대해 알아보도록 합시다.