Destructuring Assignment (구조 분해 할당)

Destructuring Assignment (구조 분해 할당)

 

 

Destructuring Assignment란?

 

• 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식

• 객체 및 배열 리터럴 표현식을 사용하면 쉽게 데이터 뭉치를 만들 수 있음
• 구조 분해 할당의 구문은 위의 표현식과 비슷
• 하지만, 할당문의 좌변에서 사용하여, 원래 변수에서 어떤 값을 분해해 할당할지 정의함

 

---

 

 

배열 구조 분해

 

 

기본 변수 할당

 

 

 

선언에서 분리한 할당

 

• 변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있음

 

 

기본값

 

• 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용함

 

 

변수 값 교환하기

 

• 하나의 구조 분해 표현식만으로 두 변수의 값을 교환할 수 있음

 

• 구조 분해 할당 없이 두 값을 교환하려면 위의 예시처럼 사용해야함

 

 

함수가 반환한 배열 분석

 

• func()는 출력으로 배열 [1, 2]을 반환하는데, 이처럼 하나의 구조 분해만으로 값을 분석할 수 있음

 

 

일부 반환 값 무시하기

 

• 이처럼 필요하지 않은 반환 값을 무시할 수 있음
• 또한, 이를 이용하여 반환 값을 모두 무시할 수도 있음

 

 

변수에 배열의 나머지를 할당하기

 

• 배열을 구조 분해할 경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있음
• 만약, 이때, 나머지 요소의 오른쪽 뒤에 쉼표가 있으면 SyntaxError가 발생함

 

 

---

 

 

객체 구조 분해

 

 

기본 할당

 

 

 

선언 없는 할당

 

• 구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있음

 

 

새로운 변수 이름으로 할당하기

 

• 객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있음

 

 

기본값

 

• 객체로부터 해체된 값이 undefined인 경우, 변수에 기본값을 할당할 수 있음

 

 

기본값 갖는 새로운 이름의 변수에 할당하기

 

• 새로운 변수명 할당과 기본값 할당을 한번에 할 수 있음

 

 

중첩된 객체 및 배열의 구조 분해

 

 

 

객체 구조 분해에서 Rest