구조분해 할당(Destructuring assignment)

Front-End 소스를 보던 와중 아래와 같은 소스를 보게 되었고 내가 하고싶었던 것은 onMenuClick을 구현하고 싶었다. 

const Menu = ({ resource, onMenuClick, logout, classes }) => ( ... );

그런데 onMenuClick을 구현 하더라도, 이를 Menu로 어떤식으로 전달을 해야하나 싶었다. 왜냐하면 파라메터 부분에 있는 중괄호 때문에.

이를 보고 Arrow Function으로 접근하였지만 답이 안나왔다. 다시 찾아보니 구조분해 할당(Destructuring assignment) 문법이라는것을 찾아 낼 수 있었다. 

 

Destructuring assignment은 ES6에서 배열과 object를 조금 더 쉽게 다루는 방식 중 하나로 추가되었다고 한다.

 

그래서 구조분해 할당((Destructuring assignment)이 뭔데?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 이라고 한다.

 

장점은?

구조 분해 연산자, 전개 연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한 번에 처리할 수 있는 장점

 

예시

let obj = { name : "winnie", age : 27 };

let {name, age} = obj;

두 번째라인에 선언된 Destructuring assignment 방식으로 선언된 name, age 값을 각각 확인해 보면 obj.name, obj.age가 담겨져 있을 것이다.

 

사용 시 주의사항

- 할당 연산자의 왼쪽에는 객체 리터럴이 와야함  **리터럴이란?변수에 넣는 변하지 않는 데이터를 뜻함

- 할당 연산자의 오른쪽에는 null이나 undefined가 와서는 안된다

 

사용Tip - 배열 분해 할당

배열의 값을 별도의 변수에 할당하는 경우, 인덱스나 루프 사용할 필요 없이 간단하고 깨끗하게 할당 가능함

const arr = [1,2,3,4];
const { first, secnod, third, fourth } = arr;

 

내용은 여기까지 인것 같다.

 

알아보고 나니 과연 내가 찾고싶었던 내용이 맞는건지 잘 모르겠다.