[Javascript] 자바스크립트 비구조화 할당(destructuring assignment)

▶자바스크립트 비구조화 할당(destructuring assignment)

 

🔎 배열의 비구조화할당(destructuring assignment)

---

비구조화할당이란 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식입니다.

 

기존 배열 값을 해체(ES6전 코드)

// 배열 선언
const animalList = ['CAT', 'DOG', 'TIGER'];

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

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

출력

배열이 갖는 값을 각각 꺼내어 쓰려면 이렇게 직접 하나하나 지정했었는데요.

작성하기 귀찮은 작업이고, 코드를 읽기에도 복잡하게 보이는 단점이 있었습니다.

 

비구조화 할당방식 배열 선언 및 호출

문법은 아래와 같습니다.

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);

출력

 

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

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

한글로 번역해보자면 펼침연산자 정도로 볼 수 있는데요.

특정 객체나 배열의 값을 복제할 때 사용합니다.

const 새로운객체명 = {...기존객체명};
const 새로운배열명 = [...기존배열명];

예시 코드는 다음과 같습니다.

// obj 객체를 newObj 객체에 복제
var obj = {
  a: 10,
  b: 20,
};

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

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

출력

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

 

그렇다면 일부만 복제를 하고 싶다면 어떻게 해야 할까요?

 

💡요소들을 분리해서 변수에 저장

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

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

출력

[CAT]과 [DOG, TIGER]가 따로 분리된 것을 확인할 수 있습니다.

 

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

비구조할당 방식으로 기본값을 지정하는 문법은 아래와 같습니다.

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에는 기본값만 지정하고, 값을 지정하지 않았지만 기본값으로 잘 불러와지는 것을 확인할 수 있습니다.

 

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

기존 배열값을 변수에 한번에 할당하는 문법은 아래와 같습니다.

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

바로 예시 코드를 통해 살펴봅시다.

// 기존 배열값을 변수에 한번에 할당
const animal = ['CAT', 'DOG', 'TIGER'];
const [cat4, dog4, tiger4] = animal;
console.log(cat4);
console.log(dog4);
console.log(tiger4);

출력

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

 

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

---

기존 객체 값을 해체(ES6전 코드)

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

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

// 각각 호출
console.log(cat5);
console.log(dog5);
console.log(tiger5);

출력

코드가 굉장히 길어지는 것을 확인할 수 있습니다.

 

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

비구조화 할당 방식으로 객체를 선언하고 호출하는 문법은 아래와 같습니다.

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

예시 코드를 통해 자세히 알아봅시다.

const { cat6, dog6, tiger6 } = {
  cat6: 'CAT',
  dog6: 'DOG',
  tiger6: 'TIGER',
};

console.log(cat6);
console.log(dog6);
console.log(tiger6);

출력

코드 줄수가 훨씬 줄어든 것을 확인할 수 있습니다.

그런데.. 변수명과 속성명을 다르게 하면 undefined로 출력된 것을 확인할 수 있었습니다. 주의!💡

 

나머지 패턴 - 배열과 유사

바로 예시 코드를 통해 알아봅시다.

const { cat7, ...animal3 } = {
  cat7: 'CAT',
  dog7: 'DOG',
  tiger7: 'TIGER',
};
console.log(cat7);
console.log(animal3);

출력

[CAT]과 나머지동물로 처리된 것을 확인할 수 있습니다.

 

기본값 지정

바로 예시를 통해 알아봅시다.

const {
  cat8,
  dog8,
  tiger8,
  monkey8 = 'MONKEY',
} = {
  cat8: 'CAT',
  dog8: 'DOG',
  tiger8: 'TIGER',
};
console.log(cat8);
console.log(dog8);
console.log(tiger8);
console.log(monkey8);

출력

monkey8은 기본값을 설정하고 값을 설정하지 않았지만 기본값으로 결과가 나오는 것을 확인할 수 있습니다.

 

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

기존 객체 속성값을 변수에 한번에 할당하는 문법은 아래와 같습니다.

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

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

예시 코드를 통해 알아봅시다.

const animal4 = { cat9: 'CAT', dog9: 'DOG', tiger9: 'TIGER' };
const { cat9, dog9, tiger9 } = animal4;

console.log(cat9);
console.log(dog9);
console.log(tiger9);

출력

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