[JavaScript - 심화] 구조 분해 할당

이정환 강사님의 인프런 강의, '한 입 크기로 잘라먹는 리액트'의 강의 내용과 사진 자료를 바탕으로 정리한 내용입니다.

구조 분해 할당

구조 분해 할당은 배열의 요소 또는 객체의 속성을 분해하여 각 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

 

1. 배열의 구조 분해 할당

배열 arr의 요소를 각각 하나의 변수에 담고 싶을 때는 아래처럼 코드를 작성한다.

let arr = [1, 2, 3];

/*
  let one = arr[0];
  let two = arr[1];
  let three = arr[2];
*/
let [one, two, three] = arr; //훨씬 보기 좋음
console.log(one, two, three);

이렇게 코드를 작성하면 one에는 arr[0]의 값인 1이 two에는 arr[1]의 값인 2가, three에는 arr[2]의 값인 3이 할당되게 된다.

let arr = [1, 2, 3];

let [one, two] = arr;
console.log(one, two);

배열의 모든 요소가 필요하지 않다면, 원하는 요소만 추출할 수 있다.

let arr = [1, 2, 3];

let [one, two, three, four = '4'] = arr;
console.log(one, two, three);

배열의 요소보다 더 많은 변수를 선언하는 경우, undefined가 할당된다. 위의 코드처럼 기본값을 줄 수 있다.

 

2. 객체의 구조 분해 할당

객체를 구조 분해 할당하는 방법은 배열과 유사하지만 객체는 중괄호{}를 사용하여 분해한다.

let person = {
  name: '하니',
  age: 24,
  hobby: '그림 그리기',
};

let { name, age, hobby } = person;

객체의 속성 이름과 변수 이름이 일치해야 값이 할당된다. 객체에 존재하지 않는 속성을 가져오려 하는 경우 undefined가 할당된다.

 

3. 객체 구조 분해 할당을 이용해서 함수의 매개변수를 받는 방법

const func = ({ name, age, hobby }) => {
  console.log(name, age, hobby);
};

func(person); // '하니' 24 '그림 그리기'

위 코드에서 func 함수는 person 객체를 매개변수로 받으면서 동시에 name, age, hobby 속성을 추출해 변수로 사용한다.