개념
일단 Destructuring 이라는 단어의 의미부터 알아보자.
Destructuring은 비구조화 라는 의미를 가지고 있다.
그렇다면 여기서 말하는 "구조" 란 어떤 구조를 말하는 것일까 ?
여기서의 "구조" 는 배열이나 객체 리터럴의 틀에 값이 들어가 있는 형태를 말한다.
let arr = [1, 2, 3];
let obj = { a: 1, b: 2, c: 3 };위의 코드 형태를 구조화된 형태 라고 보면 되겠다.
그렇다면 이러한 형태를 비구조화 한다는 의미는 어떤 것일까?
이 내용은 비구조화를 사용하는 코드를 보면서 알아보자.
사용 방법
배열
// ES5
var num = [2, 4, 7];
// before
var two = arr[0];
var four = arr[1];
var seven = arr[2];
console.log(two, four, seven); // 2 4 7위의 코드를 보면 기존의 ES5에서는 배열의 값을 가지고 올 때, 각각의 값을 따로 선언 및 할당 해주는 과정이 필요했다.
// ES6
const num = [2, 4, 7];
// after
const [two, four, seven] = num;
console.log(two, four, seven); // 2 4 7
하지만 ES6에서는 이런 형태를 비구조화 하는 동작을 통해 여러가지 선언 및 할당 과정을 한번에 처리할 수 있도록 하는 것이다.
위의 코드에서는 num 배열의 값을 비구조화를 통해 차례대로 two, four, seven 변수에 넣어준 것이다.
그렇다면 여기서 응용할 수 있는 것이 있다.
const num = [2, 6, 4, 9, 7];
const [two, , four, , seven] = num;
console.log(two, four, seven) // 2 4 7이렇게 비구조화를 사용하게 된다면, 해당 배열에서 필요한 값만을 선언 및 할당하여 가지고 올 수도 있게된다.
객체
이러한 비구조화 방식은 배열뿐 아니라 객체에서도 활용이 가능한데
먼저 사용하는 예시를 보고 설명해보겠다.
// ES5
var obj = { plus: "+", minus: "-" };
var plus = obj.plus;
var minus = obj.minus;
console.log(plus, minus); // + -
기존의 ES5에서는 객체로부터 값을 가지고 오는 동작을 하기 위해서는
해당 객체에서 원하는 프로퍼티의 키(이름)값을 우리가 할당하려는 변수의 값에 넣어주어야한다.
하지만 Destructuring을 사용하면 더욱 간단하게 선언 및 할당이 가능하다.
아래의 코드를 보자.
const obj = { plus: "+", minus: "-" };
const { plus, minus } = obj;
console.log(plus, minus); // + -ES5에서 했던 동작을 동일하게 ES6에서는 객체의 각 프로퍼티를 객체로부터 추출하여 해당 프로퍼티의 키(이름)값을 변수리스트에 할당하는 과정으로 해결할 수 있다.
또한, 중첩 객체의 경우에는 아래와 같은 방식으로 사용이 가능하다.
const person = {
name: 'Park',
detail: {
height: 175,
city: 'Incheon'
}
}
const { detail: { height } } = person;
console.log(height); // 175마치며
이번 글도 poiemaweb의
https://poiemaweb.com/es6-destructuring
을 공부하며 작성한 글입니다.
