Destructuring Arrays

Destrcturing Arrays

자바스크립트에서 Array를 분해 하는걸 알아보자.

const arr = [2,3,4];

이런 배열이 있다고 해보자.이 배열을 이런식으로 안에 있는걸 분해해줄 수 있다.

const [x, y, z] = arr;
console.log(x,y,z); //2,3,4
console.log(arr); //[2,3,4]

구조 분해는 오리지널 배열을 훼손하지 않는다. 그래서 분해 한 뒤에도 arr를 콘솔로그에 출력해보면 원래 배열이 나오게 된다.

예를 들어 이런 코드가 있다고 해보자

const flights =
  '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30';

// Data needed for first part of the section
const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  order: function(starterIndex, mainIndex){
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  }

const [starter, mainCourse] = restaurant.order(2,0); 
console.log(starter, mainCourse)

restaurant.order(2, 0)을 호출하면 [this.starterMenu[2], this.mainMenu[0]]가 반환된다. 결과적으로 [Bruschetta, Pizza]가 되며, 이를 starter와 mainCourse로 구조 분해하여 Bruschetta와 Pizza를 얻는다.

Nested destructring

중첩된 배열을 구조 분해하는 방법도 살펴보자. 예를 들어, 다음과 같은 중첩 배열이 있다고 해보자:

const nested = [2,4,[5,6]];
const [i, ,[j,k]] = nested;
console.log(i,j,k)//2 5 6

이렇게 중첩된 것도 써줘서 분해해 줄 수 있다!

Default values

마지막으로 디폴트 벨류도 정해줄 수 있다.

const [p=1,q=1,r=1] = [8,9]
console.log(p,q,r); //8,9,1

이렇게 하면 원래 undefined 나올곳에 기본값 1이 나오게 된다.