모던 자바스크립트 : 디스트럭처링 할당

 

0. 디스트럭처링 할당

• 디스트럭처링 할당(구조 분해 할당) : 구조화된 배열과 같은 이터러블 또는 객체를 비구조화, 구조파괴 하여 1개 이상의 변수에 개별적으로 할당하는 것
• 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용

 

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

• ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법

• ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출해 1개 이상의 변수에 할당
• 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며 할당 기준은 배열의 인덱스 => 순서대로 할당

• 배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수 선언
  • 이때 변수를 배열 리터럴 형태로 선언
  • 우번에 이터러블을 할당하지 않으면 에러 발생
• 배열 디스트럭처링 할당의 변수 선언문은 다음처럼 선언과 할당 분리 가능
  • 이경우 const 키워드로 변수 선언할 수 없으므로 권장하지 않음
• 배열 디스트럭처링 할당의 기준은 배열의 인덱스 => 순서대로 할당
  • 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요 없음
• 배열 디스트럭처링 할당을 위한 변수에 기본값 설정 가능
  • 배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용
• 배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소를 사용 가능
  • Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마치막에 위해야함

 

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

• ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야함

• ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출해 1개 이상의 변수에 할당
• 이때 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야 하며 할당 기준은 프로퍼티 키
• 순서는 의미 없고 선언된 변수 이름과 프로퍼티 키가 일치하면 할당됨

• 배열 디스트럭처링 할당과 마찬가지로 객체 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 프로퍼티 갑을 할당받을 변수를 선언해야함
  • 이때 변수를 객체 리터럴 형태로 선언
  • 이때 우변에 객체 또는 객체로 평가될 수 있는 표현식(문자열, 숫자, 배열 등)을 할당하지 않으면 에러 발생
• 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수 선언

• 객체 디스터링 할당을 위한 변수에 기본값 설정 가능

• 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출해 변수에 할당하고 싶을 때 유용
• 객체 디스트럭처링 할당은 객체를 인수로 전달받는 함수의 매개변수에도 사용 가능
• 배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있음
• 중첩 객체의 경우 다음과 같이 사용

• 객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티를 사용 가능
• Rest 프로퍼티는 Rest 파라미터나 Rest 요소와 마찬가지로 반드시 마지막에 위치

 

 

 

 

모던 자바스크립트 딥다이브 책을 정리한 내용입니다!!