[javascript] 자바스크립트 구조분해할당 (직관적인 코드를 짜는법)

기본 선언방식의 아쉬운점

 

사실 로직을 짜다보면 가독성을 높이기 위해 변수를 선언하는 경우가 있다.

 

예를어 아래처럼 사용자 정보가 담긴 배열이 있다고 하자. (설명을 위해 복잡한 인덱스를 만들어보았다.)

// 사용자 아이디
userInfoArr[0][1].userId[0];

// 사용자 이름
userInfoArr[0][1].userName[0];

// 사용자 주소
userInfoArr[0][1].userAddr[0];

 

 

 

특정 값을 반복적으로 사용해야하는 경우가 있다고 할때

아래처럼 코드의 길이를 줄이고 가독성을 높이기 위해 명확한 뜻을 가진 변수명을 선언하곤 한다.

const uInfo = userInfoArr[0][1];

uInfo.userId[0];

uInfo.userName[0];

uInfo.userAddr[0];

 

 

 

만약 변수 사용의 길이를 줄이고자 한다면

추가로 변수를 더 선언해야 할것이고, 그렇다면 아래와 같은 상황이 발생될 것이다.

직관성을 높이고자 변수를 선언한건데, 할당문의 수가 늘어 오히려 코드가 더 길어지게 된다.

const uInfo = userInfoArr[0][1];
const uId = uInfo.userId
const uNm = uInfo.userName
const uAddr = uInfo.userAddr

uId[0];

uNm[0];

uAddr[0];

 

 

 

이럴때 해결책으로 사용할 수 있는것이 바로 구조 분해 할당이다.

 

 

 

구조분해할당이란?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있도록 하는 javascript 표현식이다.

 

예시로 살펴보자.

 

예시1.

const uInfo = userInfoArr[0][1];

const uId, uNm, uAddr = uInfo.userId, uInfo.userName, uInfo.userAddr;

 

 

예시2.

let a, b, r;
[a, b] = [10, 20];

console.log(a);
>> 10

console.log(b);
>> 20

 

 

예시3.

/* 변수 배열에 나머지 할당하기 */

let a, b, r;

[a, b, ...r] = [10, 20, 30, 40, 50];

console.log(r);
>> Array[30, 40, 50]

 

 

 

예시4.

/* 남는값 무시하기 */

let num = [1, 2, 3, 4, 5];

let a, b = num;

console.log(a);
>> 1

console.log(b);
>> 2

 

 

예시5.

/* 기본값을 할당하면 분해값이 undefined일때 대신 사용한다. */

let a, b;

[a=3, b=6] = [1];

console.log(a);
>> 1

console.log(b);
>> 7

 

 

예시5.

/* 두 값 교환하기 */

let a = 1;
let b = 7;

[a, b] = [b, a];

console.log(a);
>> 7

console.log(b);
>> 1

 

 

 

 

배열의 특정 인덱스가 의미를 가지는 경우,

이런 표현식으로 변수를 선언하면 훨씬 직관적이고 보기쉬운 코드가 될것같다.

(정렬 알고리즘에서 자주 사용하게 될것같다.)

 

 

---

 

 

참고링크 :  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

구조 분해 할당 - JavaScript | MDN