ES6의 향상된 객체 문법 - 비구조화 할당

비구조화 할당(Destructuring Assignment)이란?

배열이나 객체의 값을 새로운 변수에 쉽게 할당한다. ES6 이전에는 변수 하나에 값 하나를 일일히 할당해야 했으나 ES6부터는

비구조화 할당을 통해 손쉽게 값을 할당할 수 있게 되었다.

 

중괄호 {} 안에 속성 이름을 넣어 객체의 여러 속성을 한 번에 가져올 수 있다.

 

예제 ⬇️

let obj = { a: 1, b: 2, c: 30, d: 44, e: 5 } 

let {a, c} = obj;
console.log(`a >>> ${a}`);
console.log(`c >>> ${c}`);
// obj 객체에는 a, b, c, d, e 속성이 정의되었다. 여기서 비구조화를 통해 속성 a와 c속성값을 가져와 
// 변수에 할당한다. 중괄호 안에 원하는 속성명을 넣으면 obj 객체를 비구조화 하여 해당 속성명에 따른 값을
// 각 변수에 할당한다 변수 a에는 1, c에는 30이 할당된다.

let {a: newA=10, f:newF=5} = obj;
console.log(`newA >>> ${newA}`);
console.log(`newF >>> ${newF}`);
// 기존 속성명의 값을 가져와서 새로운 변수명으로 할당하여 정의할 수 있다.
// 구분자 :를 사이에 두고, 왼쪽에 개체의 속성명을, 오른쪽에는 새로운 변수명을 넣으면 된다.
// 또한 기본값을 설정할 수 있다. 예를 들어 10라인에서 a:newA=10은 객체의 a 속성값을 새로운 변수 newA
// 로 다시 할당하되, undefined로 값이 없는 경우에는 10을 할당한다는의미이다.
// 따라서 f속성은 없는 속성이기 때문에 newF 변수에는 기본값 숫자 5가 할당된다.

결과 ⬇️

a >>> 1
c >>> 30
newA >>> 1 
// newA는 a가 undefined 일때 10이 출력된다.
newF >>> 5

 

배열의 비구조화 할당은 객체 비구조화 방식에서 대괄호[]로 바꾸면 된다. 

예제 ⬇️

let arr = [1, 2, 30, 44, 5]

let [b, c, ...rest] = arr;
console.log(`0) b >>> ${b}`);   // 0) b >>> 1
console.log(`0) c >>> ${c}`);   // 0) c >>> 2
console.log(`0) rest >>> ${rest}`); // 0) rest >>> 30,44,5
// arr 배열에 숫자형 욧들이 5개 대입되어 있다. 배열을 비구조화 할 때는 대괄호를 사용하며 대괄호 안의
// 변수에 배열 요소가 순서대로 하나씩 할당된다. 따라서 b 변수에는 첫 번째 요소 1, c 변수에는 두 번째 요소 2
// 가 대입된 것이다. 그리고 나머지 변수 지시자 ...를 사용하면 6라인의 rest 변수처럼 나머지 값들을 한꺼번에 
// 따로 담을 수 있다. 따라서 rest 변수에는 b, c값 이외의 나머지 [30, 44, 5]이 할당된다.

let [a = 10, f = 9] = [1];
console.log(`1) a >>> ${a}`);   // 1) a >>> 1
console.log(`1) f >>> ${f}`);   // 1) f >>> 9

[a, f] = [f, a];
console.log(`2) a >>> ${a}`);   // 2) a >>> 9
console.log(`2) f >>> ${f}`);   // 2) f >>> 1
// 배열 비구조화에서도 기본값 설정이 가능하다. 배열값 [1]을 비구조화 하면 a 변수에 첫 번째 요소 1이 할당된다.
// 두 번째 f 변수에는 해당 순서의 요소가 없으므로 기본값 9가 할당된다.

function getArr() {
    return [1, 2, 3, 4, 5, 6];
}
[a, , , , , f] = getArr();
console.log(`3) a >>> ${a}`);   // 3) a >>> 1
console.log(`3) f >>> ${f}`);   // 3) f >>> 6
// 함수에서 반환된 배열값을 비구조화 할 수 있다. 또한 일부 배열 요소를 무시하고 원하는 요소만 가져오는 것도 
// 가능하다. 25라인처럼 중간에 4개 요소를 반환받고 싶지 않을 때 해당 위치의 요소는 콤마 사이에 공백으로
// 비워두면 된다 따라서 첫 번째 요소 1이 a 변수에 할당되고 마지막 요소 6이 f 변수에 할당된다.

 

✅ 정리

• 객체 비구조화 할당은 중괄호{} 안에 속성명을 넣어 객체의 여러 속성을 가져올수있다.
• 배열 비구조화 할당은 대괄호[] 안에 속성명 을 적어주면 된다.
• let {속성명1, 속성명2} = 변수명;
• let [속성명] = 변수명
• 구분자 : 를 사이에 두고 왼쪽에는 속성명 오른쪽에는 새로운 변수명을 넣으면 새로운 변수명으로 할당하여 정의할수 있다.
• 기존 속성명을 가져와서  새로운 변수명으로 할당한 객체는 기존 속성값이 undefined 일때 값이 할당된다.