Destructuring Assignment

구조 분해 할당

객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료 구조입니다.
키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용하죠.
개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 하죠.
이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment) 을 사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘합니다.

배열 분해하기

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

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;

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

이제 인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게 되었습니다.

객체(object)에서의 구조 분해 할당

객체에서의 구조 분해 할당은 아주아주 많이 쓰이는 문법입니다. 객체 내부의 프로퍼티 값을 간편하게 분해해서 변수에 저장할 수 있게 해 줍니다.
배열에서의 구조 분해 할당과 쓰이는 의미는 동일하되, 쓰이는 대상이 객체로 바뀐 것 뿐입니다.

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
const { name, age, memo } = obj;
console.log(name); // "John"
console.log(age); // 18
console.log(memo); // "Hello"

// 만약 구조 분해 할당을 사용하지 않는다면?
// 아래와 같이 직접 대입해 주어야 한다.
const name = obj.name;
const age = obj.age;
const memo = obj.memo;