디스트럭처링 (Destructuring) 이란?
- 객체 혹은 배열을 분해하여 내부 요소를 추출하는 것이다.
- 일반적으로 직접 추출하는 것보다 더 간결하다.
- 기본값, 이름 변경, 중첩 및 나머지 구문 등을 제공한다.
- 함수의 매개변수에서 명확성과 표현력을 제공한다.
객체 디스트럭처링
디스트럭처링의 형태
- 객체 리터럴과 매우 흡사하다.
- 다만,
value 에 객체 리터럴처럼 값을 넣는 것이 아니라, 요소를 가질 변수명을 넣는다.
const obj = { first: 1, second: 2 };
const { first: f, second: s } = obj;
console.log(f, s);
- 아래는 한단계 더 발전시킨 더 직관적인 예제이다.
const { first: a } = { first: 42 };
console.log(a);
객체에 속성이 없다면, undefined 를 가져온다.
const obj = { first: 1 };
const { third: a } = obj;
console.log(`third: ${a}`); // third: undefined
obj.third 와 정확히 같은 작업을 한다.
할당할 변수명과 객체의 키값이 같다면, 생략 가능하다.
- 객체 리터럴에서 변수명과 키값이 같을 때 생략 가능한 것과 동일하다.
const obj = { first: 1 };
const { first } = obj;
console.log(first); // 1
객체 프로퍼티를 많이 가져올 때 더 강력하다.
const obj = { first: 1 };
const first = obj.first;
const obj = { first: 1 };
const { first } = obj;
- 위의 코드는 디스트럭처링을 사용함으로써 줄어드는 코드의 양이 매우 미미하다.
const obj = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 };
const first = obj.first,
second = obj.second,
third = obj.third,
fourth = obj.fourth,
fifth = obj.fifth;
const obj = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 };
const { first, second, third, fourth, fifth } = obj;
- 디스트럭처링을 사용하는 것이 확연히 가독성이 좋다.
- 수많은
obj. 이 생략되었다.
함수를 통해 객체를 생성할 때, 임시 변수를 줄여준다.
const obj = getObj();
const { first, second, third, fourth, fifth } = obj;
const { first, second, third, fourth, fifth } = getObj();
문법 실수 예방하기
let first, second;
{first, second} = getObj();
- 이미 선언된 변수에 값을 할당하려 할 때, 위와 같이 작성하면,
{} 는 새 블록 구문을 열기 때문에 에러가 난다.
let first, second;
({ first, second } = getObj());
기본값 넣기
const obj = { first: 1, second: 2 };
const { third } = obj;
console.log(third); // undefined
const obj = { first: 1, second: 2 };
const { third = 3 } = obj; // 기본값 할당
console.log(third); // 3
- 위와 같이
undefined 일 때, 들어갈 기본값 할당이 가능하다.
obj.third || 3 과 같이 생각할 수도 있는데, 이보다 좋은 점은 거짓으로 평가되는 값(falsy)에 모두 기본 값을 주는 것이 아니란 것이다.
- 이를테면
0 은 자바스크립트에서 falsy 이다.
- 위 코드에서
obj.third 가 0 이라면, 의도치 않게 3 이 들어갈 수 있다.
- 다만 널 병합 연산자
?? 를 이용하면, 이와 같은 효과를 낼 수 있다.
const obj = { first: 1, second: 2, third: undefined };
const { third = 3 } = obj; // 기본값 할당
console.log(third); // 3
- 실제로 값을 빼먹은 것이 아니라, 일부러
undefined 를 넣어도, 3 이 할당된다.
const obj = { first: 1, second: 2, third: undefined };
const { second, third = second * 50 } = obj; // 기본값 할당
console.log(third); // 100
- 디스트럭처링은 순서대로 이루어지므로, 앞의 값을 활용하는 것도 가능하다.
나머지 문법 사용하기
const o = {
a: 10,
b: 20,
c: 30,
};
const { a, ...x } = o;
console.log(a, x); // 10 {b:20, c:30}
다른 이름 사용하기
const obj = { "my-number": 1 };
const {my-number} = obj; // Uncaught SyntaxError: Unexpected token '-'
console.log(my-number);
- 객체의 프로퍼티 키로는 어떤 문자든 올 수 있지만, 변수 식별자에는
- 와 같은 문자가 올 수 없다.
- 이럴 때, 다른 이름으로 디스트럭처링이 가능하다.
const obj = { "my-number": 1 };
const { "my-number": myNumber } = obj;
console.log(myNumber); // 1
- 사실 이는 처음에 배웠던 문법과 동일한데, 관점만 다르다.
다른 객체의 속성으로 할당하기
const source = { example: 42 };
const dest = {};
({ example: dest.result } = source);
console.log(dest.result); // 42
계산된 속성 이름 사용하기
const source = { a: "ayy", b: "bee" };
let name = Math.random() < 0.5 ? "a" : "b";
let { [name]: dest } = source;
console.log(dest); // "ayy" 혹은 "bee" 가 랜덤하게 50:50 으로 나온다.
배열 디스트럭처링
디스트럭처링의 형태
- 객체 디스트럭처링의 형태가 객체 리터럴과 흡사했듯, 배열 디스트럭처링도 배열 리터럴과 흡사하다.
const arr = [1, 2];
const [first, second] = arr;
console.log(first, second); // 1 2
원치 않는 요소 제외하기
const arr = [1, 2];
const [, second] = arr;
console.log(second);
- 빈 칸을 둠으로써, 사용하지 않는 요소를 제외할 수 있다.
- 배열이 길 때는 가독성을 위해
_1, _2 등 사용하지 않는 다른 이름을 사용하는 것이 더 낫다.
문법 실수 예방하기
let first, second;
const arr = [1, 2];
[first, second] = arr;
console.log(first, second); // 1 2
- 위 코드는 별로 문제가 없다.
- 세미콜론이 없는 형태를 사용할 때 문제가 된다.
let first, second/
const arr = [1, 2]/
[first, second] = arr/
console.log(first, second)/
- 세미콜론이 없다면, 결과가
1 2 가 나오지 않고, undefined undefined 가 나온다.
- 객체 속성에 접근하는 것으로 인식되기 때문이다.
[1, 2][first, second] = arr
나머지 문법 사용하기
const a = [1, 2, 3, 4, 5];
const [first, second, ...rest] = a;
console.log(first, second, rest); // 1 2 [3, 4, 5]
다른 이름 사용하기
const arr = [1, 2, 3, 4, 5];
const { 0: first, 1: second } = arr;
console.log(first, second); // 1 2
- 자바스크립트에서 배열이 실제론 객체임을 이용한 트릭이다.
중첩 디스트럭처링
const obj = { a: [1, 2, 3], b: [4, 5, 6] };
let { a: array } = obj;
console.log(array); // [1, 2, 3]
- 객체 내부에 있는 배열을 중첩하여 디스트럭처링하는 것이 가능하다.
const arr = [
{ a: 1, b: 2 },
{ a: 3, b: 4 },
];
const [{ a }, { b }] = arr;
console.log(a, b); // 1 4
- 반대로 배열 안의 객체를 중첩 디스트럭처링하는 것도 가능하다.
const arr = { first: { a: 1, b: 2 }, second: { a: 3, b: 4 } };
const {
first: { a },
second: { b },
} = arr;
console.log(a, b); // 1 4
- 객체 안의 객체도 중첩 디스트럭처링이 가능하다.
- 깊이는 무한대까지 가능하다.