[MJS] 디스트럭처링 할당

Javascript 개념

모던 자바스크립트 딥 다이브 정리

디스트럭처링 할당

디스트럭처링

디스트럭처링(구조 분해 할당)이란?

ES6 문법으로 배열/이터러블 또는 객체를 디스트럭처링(비구조화/구조 파괴)하여 1개 이상의 변수에 개별적으로 할당 하는 것
배열/이터러블 또는 객체에서 필요한 값만 사용하고 싶을 때 유용하게 사용한다.

배열 디스트럭처링

할당 연산자 왼쪽에 값을 할당받을 변수를 배열 형태로 선언한다.

할당 기준은 배열의 인덱스 이기 때문에 할당 연산자 오른쪽에는 이터러블이어야 한다.

const [x, y, z] = [1, 2, 3];
console.log(x, y, z); // 1 2 3

const [a, b = 10, c = 3, , e] = [1, 2, 3, 4, 5];
console.log(a, b, c, e); // 1 2 3 5

선언된 배열(왼쪽)과 할당 대상 배열(오른쪽)의 길이가 같지 않아도 된다.

선언된 배열에서 기본값을 할당할 수 있다.

기본값보다는 할당 값이 우선이다.

• Rest 요소 선언 배열에 Rest 요소(…)를 사용할 수 있다.

  const [x, ...y] = [1, 2, 3];
  console.log(x, y); // 1 [2, 3]
  

객체 디스트럭처링

객체는 프로퍼티 키를 기준으로 변수에 할당한다.

const user = { firstName: "aaa", lastName: "bbb" };

const { lastName: ln, firstName: fn } = user;
console.log(fn, ln); // aaa bbb

const { lastName, firstName } = user;
console.log(firstName, lastName); // aaa bbb

프로퍼티 키를 기준으로 변수명을 선언한다.

프로퍼티 키와 선언된 변수명이 같으면 프로퍼티 축약 표현으로 나타낼 수 있다.

• 인수로 전달

  function printTodo({ content, completed }) {
    console.log(
      `할일 ${content}은 ${completed ? "완료" : "비완료"} 상태입니다.`
    );
  }
  
  printTodo({ id: 1, content: "HTML", completed: true });
  // 할일 HTML은 완료 상태입니다.
  

  사용하려는 프로퍼티만 디스트럭처링을 통해 인수에 나타내어 사용할 수 있다.

• 배열의 객체 요소

  const todos = [
    { id: 1, content: "HTML", completed: true },
    { id: 2, content: "CSS", completed: false },
    { id: 3, content: "JS", completed: false },
  ];
  
  const [, { id }] = todos; // todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출한다.
  console.log(id); // 2
  

  배열과 객체 디스트럭처링을 같이 하므로 헷갈리지 않도록 주의해야 한다. 배열에서는 인덱스 두 번째 요소만 사용하고, 두 번째 요소(객체)에서는 id 프로퍼티만 사용하도록 하는 코드이다.

• 중첩 객체

  const user = {
    name: "Lee",
    address: {
      zipCode: "03068",
      city: "Seoul",
    },
  };
  
  const {
    address: { city },
  } = user; // address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
  console.log(city); // 'Seoul'
  

  user 객체에서 address 프로퍼티만 사용하고, address 프로퍼티가 가지고 있는 객체에서 city 프로퍼티만 사용하도록 하는 코드이다.

• Rest 프로퍼티 마찬가지로 Rest 프로퍼티(…)을 사용할 수 있다.

  const { x, ...rest } = { x: 1, y: 2, z: 3 };
  console.log(x, rest); // 1 { y: 2, z: 3 }