비구조화 할당

배열 array

기본 값

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

오브젝트 Object

기본

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

깊은 값 비구조화 할당

const deepObject = {
	state:{
    	information: {
        	name: 'velopert',
            languages: ['korean', 'english', 'chinese']
        }
    },
    value: 5
};

const { name, languages } = deepObject.state.information;
const { value } = deepObject;

const extracted = {
	name,
    languages,
    value
}

// 위의 extracted는 아래의 코드와 같다
// 만약 key 이름으로 선언된 값이 존재한다면 바로 매칭시켜주는 문법입니다.
const deepValue = {
	name: name,
    languages: languages,
    value: value
}