[JavaScript] 구조분해 할당

구조 분해 할당

구조분해 할당이란 배열 혹은 객체의 속성을 개별 변수에 담을 수 있도록 하는 표현식이다. 가끔 배열의 일부분만 필요한 경우가 있는데 이럴 때 여러 방법이 있지만 구조 분해 할당을 사용하면 매우 쉽게 값을 가져올 수 있다. 

 

배열 분해

변수를 좌항, 분해하고자 하는 배열을 우항에 놓고 분해한다. 이 때, 배열의 순서를 맞추어야 한다. 

const fruits = ['apple', 'banana', 'cherry'];

// 배열 요소를 변수에 할당
const [first, second, third] = fruits;

console.log(first);  // "apple"
console.log(second); // "banana"
console.log(third);  // "cherry"

기본값 지정

const colors = ['red'];

// 없는 값에 기본값 설정
const [primary, secondary = 'blue'] = colors;

console.log(primary);   // "red"
console.log(secondary); // "blue" (기본값)

이렇게 쉽게 요소에 접근할 수 있다. 또, 만약 배열에 해당 값이 존재하지 않다면 undefined 가 출력되고, 기본값을 지정해 주었다면 해당 값이 나오게 된다. 

 

객체 분해

배열 분해와 마찬가지로 사용한다. 단 대괄호가 아닌 중괄호를 사용한다. 키 이름으로 변수를 생성할 때에는 아래와 같이 사용할 수 있다.

const user = {
  name: 'Alice',
  age: 25,
};

// 객체의 키를 변수에 할당
const { name, age } = user;

console.log(name); // "Alice"
console.log(age);  // 25

 

다른 변수 이름으로 할당

키 이름이 아닌 다른 이름의 변수에 속성값을 할당할 때에는 다음과 같이 사용할 수 있다.

const book = {
  title: 'JavaScript Essentials',
  author: 'John Doe',
};

// 다른 변수 이름으로 할당
const { title: bookTitle, author: bookAuthor } = book;

console.log(bookTitle);  // "JavaScript Essentials"
console.log(bookAuthor); // "John Doe"