디스트럭처링 할당

기존 블로그에 작성한 내용을 velog로 이전한 글입니다

1. 디스트럭처링 할당이란

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

2. 배열 디스트럭처링 할당

const ingredients = ["튀긴면", "스프", "계란"];

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

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

• 순서에 의미가 있다.

• 변수와 배열의 개수가 일치하지 않아도 된다.

• 디스트럭처링을 쓰기 위해선 오른쪽에 반드시 배열이 있어야 한다. (단독 사용 불가)

• 기본값을 설정할 수 있다.

3. 객체 디스트럭처링 할당

const ingredients = { noodle: "튀긴면", soup: "스프", topping: "계란" };

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

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

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

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

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

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

• 배열 디스트럭처링과 달리 순서는 상관 없다.

• 디스트럭처링을 쓰기 위해선 오른쪽에 반드시 객체가 있어야 한다. (단독 사용 불가)

• 기본값을 설정할 수 있다.

• 키값만 추출할 수 있다.

• 매개변수에도 사용할 수 있다.

// 배열 디스트럭처링과 객체 디스트럭처링의 혼용
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'

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

참고자료: poiemaweb.com