자바스크립트 ES6 비구조화 할당 문법

배열과 오브젝트 두 가지를 나눠서 ES6에 새로운 문법인 비구조화 할당에 대해 알아보자

 

비구조화 할당 정의

우선, 비구조화 할당 문법은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 간단하게 말하자면 배열([ ])이나 객체({ }) 안의 값을 편하게 꺼내 사용할 수 있는 문법이다.

 

배열 비구조화 할당

비구조화 할당 시 다음과 같이 기본값을 지정할 수 있다.

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

배열 비구조화 할당 전 후

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"]

앞의 요소와 나머지 요소를 분리하고 싶을 때 위와 같이 작성할 수 있다.

 

---

 

오브젝트 비구조화 할당

오브젝트도 기본값 설정을 지원한다.

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

 

또한, 배열과 마찬가지로 요소를 꺼내서 변수에 할당할 수 있다.

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

 

나머지 패턴

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