비구조화할당 이란?

• 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 Javascript 표현식입니다.

1. 배열의 비구조화할당

1) 기존 배열 값을 해체(ES6 이전)

코드

//배열선언
const animalArray = ['Cat','Dog','Tiger'];

//각각 변수에 담기
const cat = animalArray[0];
const dog = animalArray[1];
const tiger = animalArray[2];

//각각 호출
console.log(cat);
console.log(dog);
console.log(tiger);

• 배열이 갖는 값을 각각 꺼내어 쓰려면 [0],[1].[2] 이렇게 직접 지정해주었습니다.
• 배열의 길이가 길고, 중복되는 코드는 가독성이 좋지 않은 단점 이 있습니다.

2) 비구조화 할당방식 배열 선언 및 호출(ES6)

문법

const [변수명1,변수명2,변수명3] = {값1,값2,값3};

예시 코드

//비구조화할당방식을 이용하면 위의 4줄을 1줄 코드로 변경이 가능
const [cat1, dog1, tiger1] = ['CAT', 'DOG', 'TIGER'];
console.log(cat1);
console.log(dog1);
console.log(tiger1);

3)비구조화 할당방식의 나머지 패턴

스프레드 오퍼레이터(Spread Operator)

• 한글로 번역하면 펼침연산자 입니다.
• 특정, 객체, 배열의 값을 복제할 떄 사용합니다.

펼침연산자 예시 코드

const obj = {
	a : 10,
	b : 20,
};

const newObj = {...obj};
console.log(newObj);

// arr배열을 newArr배열로 복제
const arr = [1,2,3];
const newArr = [...arr];
console.log(newArr);

• 객체와 배열이 복제가 잘된 것을 확인할 수 있습니다.
  

비구조화 할당 나머지 패턴 예시코드

const animalList2 = ['CAT', 'DOG', 'TIGER'];
const [cat2, ...restAnimalList2] = animalList2;
//앞의 요소 1개와 나머지 요소를 분리하고 싶을 때 위 예시 코드처럼 사용 가능

console.log(cat2);
console.log(restAnimalList2);

• 아래처럼 변수명을 지정해주고 펼침연산자를 통해 나머지만 따로 구할 수 있습니다.
  

4)비구조화할당방식의 기본값 지정

문법

const [변수명1, 변수명2, 변수명3 = 기본값] = [값1, 값2];

예시코드

const [cat3, dog3, tiger3, monkey3 = "MONKEY"] = ['CAT', 'DOG', 'TIGER'];
console.log(cat3);
console.log(dog3);
console.log(tiger3);
console.log(monkey3);

• 마지막의 monkey3에는 기본값만 지정하고, 값을 지정하지 않았지만 기본값을 세팅함으로써 출력이 잘되는 것을 확인 할 수 있습니다.

5) 기존 배열값을 변수에 한번에 할당

문법

const 배열명 = [값1,값2,값3];
const[변수명,변수명2,변수명3] = 배열명;

예시코드

const animal = ['CAT', 'DOG', 'TIGER'];
const [cat1, dog1, tiger1] = animal;
console.log(cat1);
console.log(dog1);
console.log(tiger1);

• 미리 선언된 배열값을 각각의 변수에도 담을 수 있습니다.
  

2. 객체의 비구조화할당(destructuring assignment)

1) 기존 객체 값을 해체(ES6 이전)

코드

//객체선언
const animals = {
  cat: 'CAT',
  dog: 'DOG',
  tiger: 'TIGER'
}

//각각변수담기
const cat = animals.cat;
const dog = animals.dog;
const tiger = animals.tiger;

//각각호출
console.log(cat);
console.log(dog);
console.log(tiger);

• 자세히 보지않아도 단순히 변수에 값을 할당 시키는 부분에서 쓸데없는 코드가 많은것을 알 수 있습니다.
  

2) 비구조화할당의 객체 선언과 호출

문법

const {변수명1, 변수명2, 변수명 3} = {
  속성명1 : 값1,
  속성명2 : 값2,
  속성명3 : 값3,
};

예시 코드

const {cat1,dog1,tiger1} = {
  cat1 : 'CAT',
  dog1 : 'DOG',
  tiger1 : 'TIGER',
};
console.log(cat1);
console.log(dog1);
console.log(tiger1);

3) 나머지 패턴

코드

const {cat3,...animal3} = {
  cat3 : 'Cat',
  dog3 : 'Dog',
  tiger3 : 'Tiger',
};

console.log(cat3);
console.log(animal3);

• 이와 같이 [CAT]과 나머지동물로 처리되는 것을 확인 할 수 있습니다.

4) 기본값 지정

코드

const {cat,dog,tiger,monkey = 'Monkey'} = {
  cat : 'Cat',
  dog : 'Dog',
  tiger : 'Tiger',
};

console.log(cat);
console.log(dog);
console.log(tiger);
console.log(monkey);

• 위에서 봤던 배열과 같이 기본값을 설정하고, 값을 설정하지 않아도 기본값으로 결과가 나오는 것을 확인할 수 있습니다.

5) 기존 객체속성값을 변수에 한번에 할당

문법

const 객체명 = {
  속성명1 : 값1,
  속성명2 : 값2,
  속성명3 : 값3,
};

const {변수명1,변수명2,변수명3} = 객체명;

예시 코드

const animal = {
  cat : 'Cat',
  dog : 'Dog',
  tiger : 'Tiger',
};

const {cat,dog,tiger} = animal;

console.log(cat);
console.log(dog);
console.log(tiger);

• 이와 같이 미리 선언된 객체값을 각각의 변수에 담을 수 있습니다.