[ES6] Destructuring

자 이번에 다룰 ES6는 destructuring(비구조화)이다. 

 

Destructuring이란 구조화된 배열 또는 객체를 비구조화(파괴)하여 개별적인 변수에 할당하는 것이다.

배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다.

 

쉽게말해 object나 array같은 구조 안의 요소들을 변수 바깥으로 빼내서 사용할 수 있도록 하는것이다.

 

먼저 object부터 보자

기존 객체에서 어떤 정보를 빼오려면~ settings.notifications.follow 이런식으로 해야 했다.

그러나 destructuring을 이용하면 value를 추출해 변수에 할당하면 된다.

음 위코드는 default까지 지정한 것이라 좀 헷갈릴 수 있으니

이 코드를 보면 더 이해가 쉽다. 아주 코드가 간결해진다.

기존이라면  const firstName = obj.firstName;  const lastName = obj.lastName; 이렇게

코드를 다 작성해줘야 한다. 그냥 보면 얼마나 차이난다고~ 하지만 object가 매우 방대하고 가져올 value가 많으면

destructuring이 훨씬 효율 적일 것이다.

 

Array의 경우도 마찬가지이다~~

기존 방식으로 저 세개를 빼오려면 하나씩 변수를 선언해서 인덱스값을 이용해 담아주거나

반복문으로 빼오거나 여러 방식이 있겠지만.

아래 코드처럼 destructuring을 이용하며 훨씬 간편해진다.

이를 활용하여 swapping과 skipping도 할수 있는데

swapping은 당연히 let변수일때만 가능하다

두개의 변수에 값이 잘못 할다 되어있다면 저렇게 해주면 다시 할당이 가능하다

mon이라는 새로운 배열 요소에 이전 sat의 값을 넣어준다고ㅓ 생각하자.

 

그리고 skipping은 days라는 배열중 뒤에 두개의 값만 가져오고싶다면??

comma만 이용해주면 끝난다.! 아주 쉽다.

 

이번엔 renaming을 알아보자

예를 들어 다른 api로부터 데이터를 받았는데 자바스크립트가 아닌 다른 언어방식의 변수라면

바꿔주고 싶을 수 있다.

이때 위 코드에 나온데로  안의 값에  : 를 붙여 새로운 변수를 입력하면 대체 된다.

혹은 새로운 변수를 선언하여 기존 destructuring에 괄호만 감싸주면 다시 할당이 된다.

당연히 새로운 변수는 let이어야 한다~ 변경가능해야 변경되니까~