JavaScript - 구조 분해 할당

구조 분해 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

개발을 하다 보면, 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 한다.
가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다.
이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment) 을 사용할 수 있다.

📌 배열 분해

let [firstName, secondName] = [];

console.log(firstName); // undefined
console.log(secondName); // undefined

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생하지 않는다.
할당할 값이 없으면, undefined로 취급되기 때문이다.

=를 이용하면 할당할 값이 없을 때 기본으로 할당해 줄 값인 기본값(default value)를 설정할 수 있다.

let [firstName='hwang', secondName='sooyeon'] = ['hwang'];

console.log(firstName); // hwang
console.log(secondName); // sooyeon

복잡한 표현식이나 함수 호출도 기본값이 될 수 있다.
이렇게 기본식으로 표현식이나 함수를 설정하면, 할당할 값이 없을 때 표현식이 평가되거나 함수가 호출된다.

📌 객체 분해

let options = {
  title: 'menu',
  width: 100,
  height: 200,
}

// 할당 연산자 우측엔 분해하고자 하는 객체를, 좌측엔 상응하는 객체 프로퍼티 패턴을 넣는다.
let {title, width, height} = options;

console.log(title); // menu
console.log(width); // 100
console.log(height); // 200

프로퍼티 options.title과 options.width, options.height에 저장된 값이 상응하는 변수에 할당된 것을 확인할 수 있다.
참고로 순서는 중요하지 않다. (배열 분해는 중요)

let options = {
  title: "Menu",
  width: 100,
  height: 200
}

let {width: w, height: h, title} = options 

console.log(title)   // Menu
console.log(w)       // 100
console.log(h)       // 200

콜론은 '분해하려는 객체의 프로퍼티: 목표 변수'와 같은 형태로 사용한다.
위 예시에선 프로퍼티 width를 변수 w에, 프로퍼티 height를 변수 h에 저장했다.

콜론과 할당 연산자를 동시에 사용할 수도 있다.

let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options 

console.log(title)   // Menu
console.log(w)       // 100
console.log(h)       // 200

📌 중첩 구조 분해

객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있다.
이를 중첩 구조 분해(nested destructuring)이라고 한다.

아래 예시에서 객체 options의 size 프로퍼티 값은 또 다른 객체이다.
items 프로퍼티는 배열을 값으로 가지고 있다.

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
}

대입 연산자 좌측의 패턴은 정보를 추출하려는 객체 options와 같은 구조를 갖추고 있다.

let {
  size: {
    width,
    height
  },
  items: [item1, item2], // items는 여기에 할당함
  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options

console.log(title)   // Menu
console.log(width)   // 100
console.log(height)  // 200
console.log(item1)   // Cake
console.log(item2)   // Donut

변수 width, height, item1, item2에 원하는 값이, title엔 기본값이 저장된다.
그런데 위 예시에서 size와 items 전용 변수는 없다는 점에 유의해야 한다. 전용 변수 대신 size와 items 안의 정보를 변수에 할당했다.