구조 분해 할당

자바스크립트에서 언어 차원에서 지원하는 문법

자주 쓰이는 자료구조인 객체와 배열을 적은 코드로 쉽게 할당할 수 있게 해준다.

 

간단한 사용 예시

//단순히 scope를 나누기 위함 function scope1(){     const arr = [1,2,3];     const data1 = arr[0];     const data2 = arr[1];     const data3 = arr[2];     console.log(`예전 방식`,data1,data2,data3);     //배열분해할당     const [a,b,c] = arr;     console.log(`신 방식`,a,b,c); } scope1();

자동으로 매핑되어 할당된 것을 볼 수 있다.

 

크기가 다른 경우

function scope2(){     const arr1 = [1,2,3,4,5];     const arr2 = [1,2,3];     const [a1, a2, a3] = arr1;     const [b1, b2, b3, b4, b5] = arr2;     console.log(`배열 요소가 더 많은 경우`,a1,a2,a3);     console.log(`변수가 더 많은 경우`, b1,b2,b3,b4,b5); }

할당할 수 있는 만큼 잘 할당된 것을 볼 수 있다.

 

활용

//활용, Arguments function scope3(a1,a2,a3){     const [b1,b2,b3] = Array.from(arguments);     console.log(b1,b2,b3); } scope3(1,2,3); //활용, 나머지 연산자 function scope4(...args){     const [b1,b2,b3] = args;     console.log(b1,b2,b3); } scope4(1,2,3);

주의사항

//활용, Arguments 주의사항 function scope5(a1 = 1,a2 = 2,a3 = 3){     console.log(arguments);     const [b1,b2,b3] = Array.from(arguments);     console.log(b1,b2,b3);     console.log(a1,a2,a3); } scope5();

기본값을 활용하는 경우 위와 같이 원하던 동작 대로 동작하지 않는다.

 

객체분해할당

배열의 경우도 분해할당이 유용하지만 더 유용한 것은 객체분해할당이다.

 

매개변수

메서드 혹은 함수에서 좋은 매개변수 숫자는 몇 개 일까?

"이펙티브 자바" 책에 따르면 좋은 매개변수 숫자는 0개이다.

그 다음은 1개 ,그 다음은 2개 이다.

 

매개변수 2개 부터는 인자의 순서도 신경을 써야하기 때문에 사용성이 제곱으로 어려워 진다.

즉, 인자가 2개 이상부터는 인자 간 순서에 의존하게 된다.

 

이 점은 알고 다음 예시를 보자

//객체분해할당 class Car {     constructor(year, model, gas){         [this.year, this.model, this.gas] = arguments;     } } console.log(new Car(2023,'그렌저','가솔린')); //사용자가 실수로 순서를 잘못 넣음 console.log(new Car('그렌저',2023,'가솔린'));

데이터가 잘못 들어간 것을 볼 수 있다.

//객체분해할당, 매개변수 순서 의존 제거 class Car2 {     constructor({year = '2022', model = '소나타', gas = '가솔린'} = {}){         this.year = year;         this.model = model;         this.gas = gas;     } } console.log(     new Car2({         year : 2023 ,         model : '그렌저' ,         gas : '가솔린' ,     }) ); console.log(     new Car2({         gas : '가솔린' ,         model : '그렌저' ,         year : 2023 ,     }) ); console.log(     new Car2() );

객체의 특성을 사용해 인수의 순서 의존을 제거했다.

추가로 기본값을 주어 안정성을 높였다.

 

https://ko.javascript.info/destructuring-assignment