[JS] 디스트럭처링(Destructuring) 할당

디스트럭처링 할당이란?

구조화된 배열 또는 객체를 비구조화하여 1개 이상의 분수에 개별적으로 할당하는 것.

배열 디스트럭처링 할당

const food = ["라면", "스프", "계란"];

const [noodle, soup, topping, time = 3] = food;

console.log(noodle, soup, topping, time); // 라면 스프 계란 3

• 순서에 의미가 있다.
• 변수와 배열의 개수가 일치하지 않아도 된다.
• 디스트럭처링을 사용하기 위해선 오른쪽에 반드시 배열이 있어야 한다. (단독 사용 불가)
• 기본값을 설정할 수 있다.

객체 디스트럭처링 할당

const food = { noodle: "라면", soup: "스프", topping: "계란" };

const { noodle, soup, topping, time = 3 } = food;

console.log(food.noodle, food.soup, food.topping, time); // 튀긴면, 스프, 계란, 3

// 원본 프로퍼티key와 다른 이름으로 객체를 만들고 싶은 경우
const { noodle: noo, soup: sou, topping: topp, cooktime = 3 } = food;
console.log(noo, sou, topp, time); // 튀긴면, 스프, 계란, 3

// key값만 추출할 수 있다.
const { topping: toppp } = food;
console.log(toppp); // 계란

// 함수의 매개변수에도 사용할 수 있다.
function cook({ time, salty }) {
  console.log(`요리시간: ${time}분, 간: ${salty}`);
}

cook({ time: 3, salty: "삼삼하게" }); // 요리시간: 3분, 간: 삼삼하게

• 배열 디스트럭처링과 달리 순서는 상관 없다.
• 디스트럭처링을 사용하기 위해선 오른쪽에 반드시 객체가 있어야 한다. (단독 사용 불가)
• 기본값을 설정할 수 있다.
• key값만 추출할 수 있다.
• 매개변수에도 사용할 수 있다.

배열 디스트럭처링과 객체 디스트럭처링의 혼용

const noodles = [
  { noodle: "튀긴면", soup: "스프", topping: "계란" },
  { noodle: "잔치국수면", soup: "멸치국물", topping: "계란지단" },
  { noodle: "냉면", soup: "소고기국물", topping: "계란" },
];

// todos 배열의 두번째 요소인 객체로부터 id 프로퍼티만을 추출한다.
const [, { noodle }] = noodles;
console.log(noodle); // 잔치국수면

// 중첩 객체 사용법
const user = {
  name: "Yu",
  address: {
    zipCode: "03068",
    city: "Seoul",
  },
};
const {
  address: { city },
} = user;
console.log(city); // 'Seoul'

배열과 객체 디스트럭팅을 함께 사용 가능하다.