ES6 : 비구조화 할당~ 오우오우~

일단 이런 배열이 있다고 보자!

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, animal = "MONKEY"] = ["CAT", "DOG", "TIGER"];
console.log(cat); // CAT
console.log(dog); // DOG
console.log(tiger); // TIGER
console.log(animal); // MONKEY

(이건 언제 쓰는지 모르겠다.. 미안ㅠㅠ 알면 가르쳐줘..)

 

 

ㄸ또또!!!

오브젝트에서 요소를 꺼내어 변수에 할당할 때도 가능해!

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

 

이렇게 하면 비구조화 할당을 수행하고, 변수의 이름과 같은 key에 있는 값이 담겨!

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 }

 

마지막으로 기본 값!

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

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

 

 

 

참조: velog.io/@public_danuel/destructuring-assignment