[JavaScript] 구조 분해 할당(destructuring assignment)

구조 분해 할당이란?

배열이나 객체에서 값을 추출하여 개별 변수로 할당하는 자바스크립트의 문법입니다. 배열이나 객체에서 필요한 값만을 추출하여 사용하고싶을 때 유용하게 사용될 수 있습니다.

배열 구조 분해

1. 세 개의 문자열은 담은 배열을 구조 분해 할당하는 간단한 예시입니다. 배열 구조 분해에서는 인덱스로 값에 접근하기 때문에 작성된 변수의 순서대로 구조분해 할당이 이루어집니다. 또한 변수명을 원하는대로 지정할 수 있습니다.

const sports = ['baseball', 'football', 'tennis']
//변경 전
const sport1 = sports[0]
const sport2 = sports[1]
const sport3 = sports[2]
//변경 후
const [sport1, sport2, sport3] = sports

2. 이런 식으로 split 메서드와 함께 사용할 수도 있습니다.

const str = '속성1 속성2 속성3'
//변경 전
const properties = str.split(' ')
const property1 = properties[0]
const property2 = properties[1]
const property3 = properties[2]
//변경 후
const [property1, property2, property3] = str.split(' ')

객체 구조 분해

1. 객체의 정보를 프린트하는 함수 예시입니다. user 객체를 받아 이름과 나이를 출력하는데, user 객체를 구조 분해할당 하여 아래처럼 리팩토링할 수 있습니다. 구조 분해 할당되는 변수명은 객체의 프로퍼티명과 일치해야 합니다.

const user = {
  name: 'Mai',
  age: 30
};
//변경 전
const printUserInfo = (user) => {
  console.log(`이름: ${user.name}`)
  console.log(`나이: ${user.age}`)
}
//변경 후
const printUserInfo = ({name, age}) => {
  console.log(`이름: ${name}`)
  console.log(`나이: ${age}`)
}

2. 변수에 객체를 구조 분해 할당하는 예시입니다. 만약 객체의 프로퍼티가 늘어날 경우 코드를 간결하게 작성할 수 있다는 장점이 있습니다.

//user 객체
const user = {
  name: 'Mai',
  age: 30
};
//변경 전
const name = user.name
const age = user.age
//변경 후
const {name, age} = person

주의할 점

배열을 구조 분해 할당하는 경우 변수명을 원하는대로 지정할 수 있습니다. 반면 객체를 구조 분해 할당하는 경우에는 객체 내의 프로퍼티명과 일치하도록 변수명을 설정해야 합니다.