[JavaScript/DeepDive]36.디스트럭처링 할당

• 디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
• 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.
• [36.1] 배열 디스트럭처링 할당
• ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다.
  • 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다.
    • 즉, 순서대로 할당된다.
      • const arr = [1, 2, 3];
        
        // ES6 배열 디스트럭처링 할당
        // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.
        // 이때 할당 기준은 배열의 인덱스다.
        const [one, two, three] = arr;
        
        console.log(one, two, three); // 1 2 3
• 배열 디스트럭처링 할당의 기준은 배열의 인덱스다.
  • 즉, 순서대로 할당된다.
  • 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.
• 배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하다.
• 배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소 ...을 사용할 수 있다.
  • // Rest 요소
    const [x, ...y] = [1, 2, 3];
    console.log(x, y); // 1 [ 2, 3 ]

 

 

 

• [36.2] 객체 디스트럭처링 할당
• ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.
  • 이때 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야 하며, 할당 기준은 프로퍼티 키다.
  • 즉, 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.
    • const user = { firstName: 'Ungmo', lastName: 'Lee'};
      
      // ES6 객체 디스트럭처링 할당
      // 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
      // 이때 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
      const { lastName, firstName } = user;
      
      console.log(firstName, lastName); // Ungmo Lee
• 배열 디스트럭처링 할당과 마찬가지로 객체 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 프로퍼티 값을 할당받을 변수를 선언해야 한다.
  • 이때 변수를 객체 리터럴 형태로 선언한다.
• 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.
  • const str = 'Hello';
    // String 래퍼 객체로부터 length 프로퍼티만 추출한다.
    const { length } = str;
    console.log(length); // 5
    
    const todo = { id: 1, content: 'HTML', completed: true };
    // todo 객체로부터 id 프로퍼티만 추출한다.
    const { id } = todo;
    console.log(id); // 1
• 객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 REst 프로퍼티 ...을 사용할 수 있다.
• Rest 프로퍼티는 Rest 파라미터나 Rest 요소와 마찬가지로 반드시 마지막에 위치해야 한다.
• // Rest 프로퍼티
  const { x, ...rest } = { x: 1, y: 2, z: 3};
  console.log(x, rest); // 1 { y: 2, z: 3}