View
기본적으로 배열에서 destructuring을 수행한다고 하면 가장 쉽게 이런 방법을 생각 할 수 있다.
const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];이렇게 하나하나씩 첫 번째 항목, 두 번째 항목, 세 번째 항목을 각 한 줄 씩 대입해 줄 수 있다.
위의 코드는 간략하게 이렇게 줄일 수 있다.
const arr = [1, 2, 3];
const [a, b, c] = arr;위 코드와 같은 결과를 확인할 수 있다.
오브젝트로 연습하기
다음과 같은 오브젝트를 두고 연습해보자!🏋️♂️🏋️♀️
const restaurant = {
name: 'Restaurant Name',
location: 'Seoul',
categories: ['Italian', 'Pizzeria', 'Vegeterian', 'Organic'],
starterMenu: ['Foccacia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
mainMenu: ['Pizza', 'Pasta', 'Risotto'],
};categories 속성의 n번째 항목 가져오기
const [first, second] = restaurant.categories;
순서대로 첫번째, 두번째 항목인 'Italian', 'Pizzeria'가 first와 second에 저장된다.
Array는 Object와 달리 순서가 있다는 것을 잊지말자
console.log(first, second); // Italian, Pizzeria
그렇다면 두 개의 새로운 변수에 categories속성의 첫 번째, 세 번째 항목을 넣어주고 싶을때는?
const [first, , second] = restaurant.categories;
결과는
console.log(first, second); // Italian, Vegeterian
위와 같이 빼 주고 싶은 부분을 공백으로 처리하고 , 로 구분해준다.
변수의 순서 변경하기
기본적으로는 아래와 같은 방법을 사용할 수 있다. (번거로움)
const temp = first;
first = second;
second = temp;
대신 아주 간단하고 편하게 아래와 같은 방법을 사용할 수 있다.
[first, second] = [second, first];
복잡한 destructuring
const nested = [2, 4, [5, 6]];
배열 속의 배열에 있는 항목까지 모두 destructuring하고 싶을 때
기존에 학습한 방법으로
const [i, , j] = nested; 를 수행하면
console.log(i, j); // 2, [5,6]이 된다.
다음과 같은 방법으로 배열 속의 배열 또한 destructuring 할 수 있다.
const [i, , [j, k]] = nested;
console.log(i, j, k); // 2, 5, 6 확인
function으로 부터 2개의 변수 받기
restaurant 객체에 다음과 같은 속성 추가
order: function(starterIndex, mainIndex) {
return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
};
const [starter, mainCourse] = restaurant.order(2,0);
console.log(starter, mainCourse); // Garlic Bread Pizza
기본 값 주기
지금 주어진 예제(restaurant)처럼 하드코딩된 경우가 아닌
외부 라이브러리나 API를 이용하는 경우에는 배열의 길이 등을 예상할 수 없고,
이런 경우에 destructuring을 수행하게 될때에는
변수에 undefined로 값이 들어갈 수 있다.
이런 경우에는 해당 변수에 기본값을 지정해 주는 방법을 이용하자!
const [p, q, r] = [8, 9]; // r이 undefined
const [p = 1, q = 1, r = 1] = [8, 9];
console.log(p, q, r); // 8, 9, 1