[JavaScript] 비구조화 할당이란 (분해 구조화) / 배열, 객체에서의 비구조화 할당

비구조화 할당이란?

리액트를 공부하다 보면 비구조화 할당이란 단어가 많이 보입니다.

비구조화 할당(Destructuring assignment)은 객체나 배열에서 데이터를 추출하여 변수나 상수로 개별적으로 할당하는 문법으로, 배열에서도 동일하게 사용할 수 있습니다. 이때 배열에서 비구조화 할당을 사용하는 것을 배열 분해 구조(Array destructuring)라고 부릅니다.

 

객체에서의 비구조화 할당

객체에서 비구조화 할당을 사용하면 객체의 프로퍼티를 추출하여 변수나 상수로 할당할 수 있습니다.

const { 프로퍼티1, 프로퍼티2, ... } = 객체;

예를 들어 다음과 같이 객체를 생성하고, 해당 객체의 프로퍼티를 변수로 할당하는 코드를 작성할 수 있습니다.

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

const { name, age } = person;

console.log(name); // 'John'
console.log(age); // 30

이 예제에서는 person 객체의 name 프로퍼티와 age 프로퍼티를 추출하여 name과 age 변수로 할당합니다.

 

프로퍼티 이름 변경

비구조화 할당을 사용할 때 프로퍼티 이름을 변경하여 할당할 수 있습니다.

이때는 다음과 같이 콜론(:)과 함께 새로운 이름을 지정합니다.

 

const { 프로퍼티1: 새이름1, 프로퍼티2: 새이름2, ... } = 객체;

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

const { name: personName, age: personAge } = person;

console.log(personName); // 'John'
console.log(personAge); // 30

이 예제에서는 person 객체의 name 프로퍼티를 personName 변수로, age 프로퍼티를 personAge 변수로 할당합니다.

기본값 설정

비구조화 할당을 사용할 때 해당 프로퍼티가 존재하지 않을 경우 기본값을 설정할 수 있습니다. 이때는 다음과 같이 등호(=)와 함께 기본값을 지정합니다.

const { 프로퍼티1 = 기본값1, 프로퍼티2 = 기본값2, ... } = 객체;

 

예를 들어 다음과 같이 객체를 생성하고, 해당 객체의 프로퍼티를 변수로 할당하는 코드를 작성할 수 있습니다

---

배열에서의 비구조화 할당

 

const [ 요소1, 요소2, ... ] = 배열;

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

const [ first, second ] = fruits;

console.log(first); // 'apple'
console.log(second); // 'banana'

이 예제에서는 fruits 배열의 첫 번째 요소('apple')와 두 번째 요소('banana')를 추출하여 first와 second 변수로 할당합니다.

 

요소 건너뛰기

배열에서 비구조화 할당을 사용할 때 특정 요소를 건너뛸 수도 있습니다. 이때는 건너뛸 요소 수만큼 쉼표(,)를 사용합니다.

const [ 요소1, , 요소3, ... ] = 배열;

const fruits = ['apple', 'banana', 'orange', 'grape'];

const [ first, , third ] = fruits;

console.log(first); // 'apple'
console.log(third); // 'orange'

 

이 예제에서는 fruits 배열의 첫 번째 요소('apple')와 세 번째 요소('orange')를 추출하여 first와 third 변수로 할당합니다.

기본값 설정

배열에서 비구조화 할당을 사용할 때 해당 요소가 존재하지 않을 경우 기본값을 설정할 수 있습니다.

이때는 다음과 같이 등호(=)와 함께 기본값을 지정합니다.

const [ 요소1 = 기본값1, 요소2 = 기본값2, ... ] = 배열;

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

const [ first, second, third = 'orange' ] = fruits;

console.log(first); // 'apple'
console.log(second); // 'banana'
console.log(third); // 'orange'

 

이 예제에서는 fruits 배열의 첫 번째 요소('apple')와 두 번째 요소('banana')를 추출하여 first와 second 변수로 할당하고, 세 번째 요소('orange')는 존재하지 않기 때문에 기본값('orange')이 할당됩니다.

나머지 요소 추출하기

배열에서 비구조화 할당을 사용할 때 나머지 요소를 추출하여 새로운 배열로 할당할 수도 있습니다. 이때는 ... 연산자를 사용합니다.

const [ 요소1, 요소2, ..., 요소N ] = 배열;

const fruits = ['apple', 'banana', 'orange', 'grape'];

const [ first, ...rest ] = fruits;

console.log(first); // 'apple'
console.log(rest); // [ 'banana', 'orange', 'grape' ]

이 예제에서는 fruits 배열의 첫 번째 요소('apple')를 추출하여 first 변수로 할당하고, 나머지 요소('banana', 'orange', 'grape')를 새로운 배열로 할당하여 rest 변수에 저장합니다.