Destructuring assignment란?
-
배열이나 객체 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식
-
적용할 값을 우측에 두고 좌측에 위치 요소 정보를 적어서 꺼내오는 방식, 즉 위치 요소를 반환받아서 변수에 저장
-
만약 값의 갯수보다 할당하려는 변수의 갯수가 더 많다면 undefined가 할당된다
-
undefined가 할당되는 것이 싫다면
const [a=3,b=4] = [1];처럼 기본 값을 설정해 줄 수도 있다 -
객체의 구조분해는 배열과 달리 변수의 순서를 신경쓰지 않아도 된다
const user = {name:'M',age:30};
const {name,age} = user;
에서 위 코드 대신
const {age,name} = user;
로 써도 무방- 객체의 구조 분해에서 변수명을 별개로 지정해도 된다
const {name:userName,age:userAge}=user;예제
<배열>
const users = ['Mike','Tom','Jane'];
const [user1,user2,user3] = users;
는
const user1=users[0];
const user2=users[1];
const user3=users[2];
와 같다
<객체>
const user = {name:'M',age:30};
const {name,age} = user;
는
const name = user.name;
const age = user.age;
와 같다사용 기법
- 일부 반환 값 무시
const [user1,,user2] = ['M','T','J','O'];
console.log(user1); -> 'M'
console.log(user2); -> 'J'- 바꿔치기(swap)
const a = 1;
const b = 2;
[a,b]=[b,a];- 전부 다 반환받기 -> 배열의 형태로 받아오기
const [...x] = arr;- 일부는 지정한 변수에 받고, 나머지는 다 배열의 형태로 반환받기
const [k1,k2, ...all] = arr;