Javascript 구조 분해 할당

구조 분해 할당이란

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조이다

키를 가진 데이터 여러 개를 하나로 사용할 때 객체를, 각 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용한다

그러다보니 함수에 객체나 배열을 전달해야 하는 경우가 생긴다 또한 객체나 배열에 저장된 데이터 전체가 아닌 일부만 전달이 필요한 경우가 생기기도 한다.

먼저 사용해보면서 이해해보도록 하자

[배열 분해하기]

배열의 요소를 다른곳에 저장 혹은 사용하기 위해서는 해당 배열의 요소를 인덱스로 접근하였지만,

분해 할당을 통해 인덱스 없이도 각 요소에 접근이 가능하다

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을 surname엔 arr[1]을 할당
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

특정 요소는 필요하지 않을 때 하기 코드 처럼 쉼표를 사용하여 해당 요소를 무시할 수도 있다

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

[객체 분해하기]

구조 분해 할당으로 객체도 분해할 수 있다.

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

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200