[JavaScript] 구조 분해 할당

 

 

이번 시간에는 구조 분해 할당에서 배워볼 것이다.

 

우선, 구조 분해 할당(Destructuring assignment)은

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

 

 

let [x, y] = [1, 2]; console.log(x); // 1 console.log(y); // 2

쉽제 말하자면 x에 1을 담고 y에 2를 담는 것이다.

 

 

간단한 예제로 살펴보도록 하자

let users = ['Mike', 'Tony', 'Maria']; let [user1, user2, user3] = users; console.log(user1); // Mike console.log(user2); // Tony console.log(user3); // Maria 이는 user1,2,3을 users의 인덱스에 맞춰서 할당해준 것이다. let user1 = users[0]; let user2 = users[1]; let user3 = users[2];

 

앞서 배웠던 split을 사용해서 문자열을 할당해줄 수도 있다.

let str = "Mike-Tony-Maria"; // split을 이용해서 나눈 배열 ["Mike", "Tony", "Maria"]를 user1,2,3에 넣어주는 것이다. let [user1, user2, user3] = str.split("-");  console.log(user1); // Mike console.log(user2); // Tony console.log(user3); // Maria

 

 

 

 

우선 배열의 구조 분해를 배워보도록 하자.

 

1. 배열 구조 분해 : 기본 값

let [a, b, c] = [1, 2];

만약 위처럼 할당해주고자 하는 값이 없다면 어떻게 될까?

a와 b에는 1, 2가 순서대로 들어가지만 c는 undefined가 될 것이다. 넣어줄 값이 없기 때문이다.

 

이럴 때에는 기본값을 설정해주면 된다.

let [a=3, b=4, c=5] = [1,2]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 5

a와 b는 할당해준 값 1, 2가 들어가게 되고 c는 undefined이지만 설정해준 기본 값이 있기 때문에

기본값인 5를 반환해준다.

 

 

 

 

2. 배열 구조 분해 : 일부 반환값 무시

 

let [user1, , user2] = ['Mike', 'Tony', 'Maria', 'Alex']; console.log(user1); // 'Mike' console.log(user2); // 'Maria'

Mike는 user1에 할당이 되지만 Tony를 할당할 요소가 없기 때문에 무시가 되고

Maria는 user2에 할당이 되고 Alex 또한 무시가 된다.

 

이처럼 할당할 요소가 없을 때는 반환값들이 무시가 된다.

 

 

 

 

 

3. 배열 구조 분해 : 바꿔치기

let a = 1;

let b = 2;

 

위와 같이 이미 할당된 변수를 바꾸려면 원래는 의미 없는 변수를 하나 더 만들어줘야 했다.

 

a에 b 값을 넣고 b에 a 값을 넣으려면 새로운 의미 없는 변수 c를 만들어서

let c = a; a = b; b = c;

이런 과정을 거쳐야 했다.

 

 

하지만 구조 분해 할당은 굉장히 편리하다

[ a, b ] = [ b, a ]

이렇게 사용해주면 a와 b의 값을 바꿔줄 수 있는 것이다.

 

 

 

 

배열을 구조 분해 할 수 있었던 것처럼 객체도 구조 분해가 가능하다.

let user = {name : 'Maria', age: 27}; let {name, age} = user; console.log(name);  // 'Maria' console.log(age);  // 27

 

let {name, age} = user;

이 코드는 아래와 같다

let name = user.name; let age = user.age;

 

배열 구조 분해와 같지만 다른 점은 인덱스가 없기 때문에 순서를 바꿔줘도 똑같이 적용된다는 것이다.

let user = {name : 'Maria', age: 27}; let {age, name} = user; console.log(name);  // 'Maria' console.log(age);  // 27

 

 

1. 객체 구조 분해 : 새로운 변수 이름으로 할당

위의 예제처럼 꼭 할당된 프로퍼티 이름으로만 적용이 되는 것은 아니다.

 

새로운 변수 명을 주어서 아래와 같이 할당해줄 수도 있다.

userName에 Maria가 할당되고 userAge에 27이 할당되는 것이다.

let user = {name : 'Maria', age: 27}; let {name: userName, age: UserAge} = user; console.log(userName);  // 'Maria' console.log(userAge);  // 27

 

 

 

2. 객체 구조 분해 : 기본값

배열 구조 분해와 마찬가지로 객체 구조 분해도 기본값을 줄 수 있다.

let boy = {name: 'John', age: 28}; let {name, age, gender} = user;

이렇게 할당되는 값이 없는 gender는 undefined가 나오기 때문에 기본값을 설정해준다

 

 

let boy = {     name: 'John',     age: 28,     gender: 'male' }; let {name, age, gender ='female'} = user; console.log(gender);    // 'male'

위와 같이 기본값이 설정되었을 때는 할당해주는 값이 아닌 객체가 가지고 있는 값이 나온다.

객체로부터 받는 값이 undefined 일 때만 기본값이 사용된다는걸 기억하자.

 

 

 

 

 

 

 

 

 

* 본 포스팅은 코딩앙마님의 자바스크립트 중급 강의를 기반으로 작성한 글입니다.