[JavaScript] 비구조화 할당

비구조화 할당

배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말합니다. 또는 구조 분해 할당이라고 말합니다.

장점

 

• 난잡한 코드들을 매우 간단하게 바꿀 수 있습니다.
• 필요한 객체와 나머지 요소 분리가 매우 간단합니다.
• 기본값 지정이 가능합니다.

사용방법

배열

const arr = ['HTML', 'CSS', 'JavaScript'];

const language1 = arr[0];
const language2 = arr[1];
const language3 = arr[2];

console.log(language1, language2, language3); // HTML CSS JavaScript

 

위 코드가 기본적으로 배열의 값을 다른 변수에 넣어서 값을 출력하는 코드입니다. 하지만 배열의 값이 많아진다면 중간에 있는 코드들이 너무 많아진다는 단점이 있습니다. 이를 줄이기 위해서 비구조화 할당을 사용하는 것인데 한번 사용해보겠습니다.

const arr = ['HTML', 'CSS', 'JavaScript'];

const [language1, language2, language3] = arr;
const [language4, language5, language6] = ['HTML', 'CSS', 'JavaScript'];

console.log(language1, language2, language3); // HTML CSS JavaScript
console.log(language4, language5, language6); // HTML CSS JavaScript

이처럼 코드를 간결하게 바꿔서 사용할 수가 있습니다.

이때 비구조화 할당 문법에 변수를 하나 더 추가해서 사용하실 수 있습니다. 다만 값을 넣지 않는다면 undefined로 나옵니다.

const [language1, language2, language3, language4] = ['HTML', 'CSS', 'JavaScript'];

console.log(language1, language2, language3, language4); // HTML CSS JavaScript undefined

비구조화 할당에 데이터를 직접 넣어서 사용하실 수도 있습니다.

const [language1, language2, language3, language4 = 'Java'] = ['HTML', 'CSS', 'JavaScript'];

console.log(language1, language2, language3, language4); // HTML CSS JavaScript Java

데이터 스왑 활용

데이터를 스왑할때도 사용할 수 있습니다. 보통 tmp를 이용해서 데이터를 스왑합니다. 하지만 비구조화 할당을 이용한다면 더욱더 간단하게 할 수 있습니다.

let number1 = 10;
let number2 = 20;

[number1, number2] = [number2, number1];
console.log(number1, number2); // 20 10

객체

객체에서도 비구조화 할당을 사용할 수 있습니다. 다만 다른점은 객체에 key값을 활용해야지만 가능합니다.

const object = {
  age: 22,
  name: 'CooNiHong',
  address: 'Tistory'
}
const {age, name, address} = object;
console.log(age, name, address); // 22 CooNiHong Tistory

만약 객체안에 없는 key값을 입력한다면 undefined가 출력됩니다. 또한 key의 순서를 바꿔서 입력해도 상관이 없습니다. 이는 순서가 아닌 key값 기준으로 비구조화 할당이 이루어지기 때문입니다. 

다른 특징으로 변수명을 바꿔서 사용하고 싶다면 비구조화 할당 문법에서 바꿀 수 있습니다.

const object = {
  age: 22,
  name: 'CooNiHong',
  address: 'Tistory'
}
const {age, name: myName, address} = object;
console.log(age, myName, address); // 22 CooNiHong Tistory

변수명을 바꾼뒤에 그대로 name을 쓰면 정의되지 않았다는 오류가 출력됩니다.

객체 비구조화 할당에서도 배열에서 처럼 직접 key값과 value를 넣어서 사용하실 수도 있습니다.

const object = {
  age: 22,
  name: 'CooNiHong',
  address: 'Tistory'
};
const { age, name: myName, address, language = 'JavaScript' } = object;
console.log(age, myName, address, language); // 22 CooNiHong Tistory JavaScript

---

JavaScript에서 비구조화 할당은 많이 쓰이는 문법이므로 익혀두시는 것을 추천드립니다.