중급 기본 정리 (with 앙마코딩) 구조 분해 할당

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌)

문제 시 바로 삭제하겠습니다.

출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com)

구조 분해 할당

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식

 

let [x,y] = [1,2];

// x 는 1
// y 는 2

 

다양한 매서드를 통해 활용 할 수 있다. 예로 split()을 사용해보면

 

let str = "Tom-Jerry-Btae";
let [user1, user2, user3] = str.split('-');

/*
user1 > 'Tom'
user2 > 'Jerry'
user3 > 'Btae'
*/

이 예제는 문자열을 split매서드를 이용하여 배열로 변환하고 배열 구조 분해를 통해 배열로 묶은 변수에 각각 할당하는 과정이다.

 

해당하는 값이 없거나, 값이 많을 경우는 어떻게 될 것인가?

 

let [a,b,c] = [1,2];
let [d,e] = [3,4,5];
/*
a > 1
b > 2
c > undefined
d > 3
e > 4
*/

 

이 예제에서 보듯이 값이 없을 경우 undefined를 반환하고 값이 많을 경우 순차적으로 값을 할당하고 남은 값은 무시하게 된다.
중요한건 undefined인데, 이를 방지하기 위해서는 기본 값을 부여하면 된다.

 

let [ a =10, b =20, c =30] = [1,2];
/*
a > 1
b > 2
c > 30
*/

 

빈 요소를 통해 일부 반환값을 무시 할 수 있다.

 

let [user1 , , user2] = ['Tom' , 'Jerry', 'Btae'];
/*
user1 > 'Tom'
user2 > 'Btae'
*/

이 예제와 같이 빈 요소에 해당되는 값은 무시할 수 있다.

 

바꿔치기

값을 바꾸기 위해서는 의미없는 임시 변수를 선언해야 했다.

let a = 1;
let b = 2;
let c = a;
a = b;
b = c;

이런 방법을 사용해서 바꿀 수 있다. 만약 c 변수가 없고 a = b라 선언했다면 a값은 사라지게 된다.
이를 구조 분해를 이용하면 쉽게 할 수 있다.
[a,b] = [b,a]; 로 선언하면 쉽게 두 변수의 값을 바꿀 수 있다.

 

객체 구조 분해

객체에서도 구조 분해를 유용하게 사용 할 수 있다. (구조는 동일하다)

let user = {name: 'Btae', age: 27};
let {name , age} = user;

console.log(name); // 'Btae'
console.log(age); // 27

배열과 다른 점은 변수 명을 키값으로 해야한다는 점이다. 만약 키 값이 아닌 다른 변수를 사용하고 싶다면 아래와 같은 방법을 사용하면 된다.

let user = {name:'Btae', age: 27};
let { name: userName, age:userAge} = user;

console.log(userName); // 'Btae'
console.log(userAge); // 27

변수에 키값을 입력해 프로퍼티를 변수에 저장 할 수 있다.

 

배열과 마찬가지로 값이 부족할 경우 undefined를 값으로 가지게 되고 기본값을 부여하여 방지할 수 있다.