구조 분해 할당

Hi, There!
안녕하세요, 바오밥입니다.

---

목차

1. 개요
2. 본문
3. Reference

---

개요

자바스크립트의 구조 분해 할당이 무엇인지 알아보고 예제를 통해 어떻게 사용되는 지 정리하였습니다.

---

본문

구조 분해 할당의 정의

구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식입니다.

 

구조 분해 할당 예제

간단한 배열 구조 분해 할당 예시

x, y 변수에 각 배열 요소 1,2를 구조 분해 할당하는 코드입니다.

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

 

배열 구조 분해 할당 예시

user1, user2, user3, 변수에 users 배열 전체를 구조 분해 할당하는 코드입니다.

let users = ['Tom', 'Mike', 'Jane'];
let [user1, user2, user3] = users; 
// let user1 = users[0]
// let user2 = users[1]
// let user3 = users[2] 와 동일한 동작을 수행합니다.

console.log(user1,user2,user3); // 'Tom', 'Mike', 'Jane'

 

이전에 학습했던 함수와 같이 사용할 수 있습니다.

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

console.log(user1,user2,user3); // 'Tom', 'Mike', 'Jane'

 

만약 할당되지 않은 값이 있다면 undefined를 반환합니다.

let [a,b,c] = [1,2]
console.log(a,b,c); // 할당되지 않은 변수는 undefined를 반환합니다.
// 1,2,undefined

 

undefined 가 할당되는 것을 미연에 방지하기 위해 기본 값을 지정할 수 있습니다.

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

 

공백과 쉼표를 이용하여 필요 없는 배열의 요소를 무시할 수 있습니다.

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

 

배열 변수 간의 값을 교환하기 위해서는 임시로 변수의 값을 저장해 놓을 '임시변수'가 필요합니다.

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

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

console.log(a,b); // 2, 1

 

배열 구조 분해 할당을 이용하면 임시변수를 사용하지 않고 변수 간의 값을 교환할 수 있습니다.

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a,b); // 2,1

 

객체 구조 분해 할당 예시

객체 구조 분해 할당도 배열 구조 분해 할당과 유사합니다.

객체의 프로퍼티를 분해하여 할당 받을 수 있습니다.

또한 순서를 고려하지 않습니다.

let user = {name: 'Mike', age: 30};
let {name, age} = user; // let {age,name} = user; 와 동일
console.log(name, age); // "Mike" 30

 

만약 프로퍼티명과 다른 변수명을 사용하고 싶다면 별도로 지정해 줘야 합니다.

let user = {name: 'Mike', age: 30};
let {name: userName, age: userAge} = user;
console.log(userName, userAge); // "Mike" 30

 

객체 구조 분해 할당도 undefined를 미연에 방지하기 위해 기본 값을 사용할 수 있습니다.

let user = {name: 'Mike', age: 30};
let {name, age, gender="male"} = user;
console.log(name, age, gender); // "Mike" 30 male

---

Reference

• 자바스크립트 중급 강좌 #9 구조 분해 할당 (Destructuring assignment)