모던 자바스크립트, 디스트럭처링 (Desctructuring)

디스트럭처링 (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();

• obj 를 따로 선언할 필요가 사라졌다.

문법 실수 예방하기

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

• 객체 안의 객체도 중첩 디스트럭처링이 가능하다.
• 깊이는 무한대까지 가능하다.