이 포스트는 ECMAScript 2015에 들어온 새로운 문법인 비구조화 할당destructuring assignment을 배열과 오브젝트 섹션으로 나누어 소개합니다.

배열array

const animalList = ["CAT", "DOG", "TIGER"];
const cat = animalList[0];
const dog = animalList[1];
const tiger = animalList[2];
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER

animalList라는 변수는 순서대로 'cat', 'dog', 'tiger'를 가지고 있는 배열입니다.

이 변수가 가진 값을 각각 변수에 꺼내어 쓰려고 하면 이렇게 직접 하나하나 지정을 해주어야 합니다.

이렇게 작성하는 것은 아무래도 귀찮은 작업이고, 코드를 읽기에도 괜히 복잡하게 보이는 단점이 있습니다.

const [cat, dog, tiger] = ["CAT", "DOG", "TIGER"];
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER

비구조화 할당을 이용하면 위처럼 간단하게 작성할 수 있습니다.

나머지 패턴

const animalList = ["CAT", "DOG", "TIGER"];
const [cat, ...restAnimalList] = animalList;
console.log(cat); // CAT
console.log(restAnimalList); // ["DOG", "TIGER"]

더 나아가, 앞의 3개 요소와 나머지 요소를 분리하고 싶을 때에는 위 예시코드처럼 작성할 수 있습니다

기본값

const [cat, dog, tiger, animal = "MONKEY"] = ["CAT", "DOG", "TIGER"];
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER
console.log(animal); // MONKEY

비구조화 할당을 할 때에는 기본값을 지정할 수 있습니다.

오브젝트object

const animals = {
  cat: "CAT",
  dog: "DOG",
  tiger: "TIGER"
};
const cat = animals.cat;
const dog = animals.dog;
const tiger = animals.tiger;
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER

위와 같이 오브젝트에서 요소를 꺼내어 변수에 할당할 때에도 가능합니다.

const { cat, dog, tiger } = {
  cat: "CAT",
  dog: "DOG",
  tiger: "TIGER"
};
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER

위와 같이 작성하면 비구조화 할당을 수행하며, 변수의 이름과 같은 key에 있는 값이 담깁니다.

나머지 패턴

const { cat, ...animals } = {
  cat: "CAT",
  dog: "DOG",
  tiger: "TIGER"
};
console.log(cat); // CAT
console.log(animals); // { dog: DOG, tiger: TIGER }

배열에서의 비구조화 할당에 나머지 패턴이 있듯이, 오브젝트에서의 비구조화 할당에도 나머지 패턴이 있습니다.

기본값

const { cat, dog, tiger, monkey = "monkey" } = {
  cat: "CAT",
  dog: "DOG",
  tiger: "TIGER"
};
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER
console.log(monkey); // MONKEY

배열에서의 비구조화 할당처럼 오브젝트에서도 기본값을 지원합니다.