JavaScript: 구조 분해 할당

정의

Destructuring 할당 구문은 배열의 값이나 개체의 속성을 개별 변수로 풀 수 있게 해주는 JavaScript 표현식입니다.

MDN Documentation HERE

구조 분해에 대한 몇 가지 일반적인 사용 사례를 살펴보겠습니다.

객체 파괴

먼저 destructo1 개체를 분해하는 간단한 예를 살펴보겠습니다.

const destructo1 = {
  name: 'Bob',
  wife: 'Jen',
  son: 'Patrick',
  daughter: 'Anne',
  email: '[email protected]'
};

let { name, wife, son, daughter } = destructo1;
name = 'Robert';
console.log(name, wife, son, daughter);
console.log(destructo1);

// Robert Jen Patrick Anne
// {name: 'Bob', wife: 'Jen', son: 'Patrick', daughter: 'Anne', email: '[email protected]'}

배열 파괴

이제 destructo2 를 분해하여 배열 파괴를 살펴보겠습니다.

const destructo2 = [1, 2, 3, 4, 5];
let [_, a, b, c] = destructo2;

console.log(a, b, c);
console.log(destructo2);

// 2 3 4
// (5) [1, 2, 3, 4, 5]

기본값

디스트럭처링으로 기본값을 관리할 수도 있습니다. 여기에서 destructo3 와 함께 사용할 수 있습니다.

const destructo3 = {
  name: 'Dave Hawk',
  age: 54
};

const { name = 'Bob Fornal', age, height = 60 } = destructo3;
console.log(name, age, height);
console.log(destructo3);

// Dave Hawk 54 60
// {name: 'Dave Hawk', age: 54}

name 및 age가 개체에서 검색됩니다. name가 사용되지만 이 예에서는 height의 기본값이 사용되지 않습니다.

사용 사례

이제 구조 분해를 사용할 수 있는 몇 가지 실제 방법을 살펴보겠습니다.

정규 표현식 그룹

여기에서 처리를 위해 숫자와 문자열을 별도의 부분으로 캡처해야 했습니다. 배열 구조 분해를 사용하여 활용할 수 있는 매우 구체적인 배열 출력을 제공하는 정규식이 사용됩니다.

const maxSize = '10222mb';
const regex = /(\d+)(kb|mb|gb|tb)/i;
const destructo4 = regex.exec(maxSize);
console.log(destructo4);

// ['10222mb', '10222', 'mb', index: 0, input: '10222mb', groups: undefined]

const [_, sizeString, type] = destructo4;
console.log({ sizeString, type });

// {sizeString: '10222', type: 'mb'}

이제 처리할 변수sizeString 및 type가 어떻게 생겼는지 확인하십시오.

변수 교환

전통적으로 우리는 두 변수를 교체하기 위해 다음과 같은 작업을 수행했습니다. 이 경우 title1 와 title2 를 교환합니다.

let title1 = 'ABC';
let title2 = 'DEF';

let temp = title1;
title1 = title2;
title2 = temp;
console.log({ title1, title2 });

// {title1: 'DEF', title2: 'ABC'}

콘솔 로그가 호출되었을 때 title1 및 title2 값에 유의하십시오.

구조 분해를 사용하면 코드가 훨씬 더 깔끔해집니다.

본질적으로 우리는 인덱스가 0인 위치에 title2가 있고 인덱스가 1개인 위치에 title1가 있는 등호의 오른쪽에 배열을 만들고 있습니다. 그런 다음 배열을 분해하여 title1 및 title2 를 할당합니다.

let title1 = 'ABC';
let title2 = 'DEF';

[title1, title2] = [title2, title1];
console.log({ title1, title2 });

// {title1: 'DEF', title2: 'ABC'}

출력은 접근 방식이 다른 이전 예제와 동일합니다.

개체에서 키 제거

개체에서 키를 제거하는 형식은 다양할 수 있습니다. 전통적인 방법은 다음을 수행하는 것입니다.

const destructo5 = {
  name: 'Bob',
  wife: 'Jen',
  son: 'Patrick',
  daughter: 'Anne',
  email: '[email protected]'
};

delete destructo5.email;
console.log(destructo5);

// {name: 'Bob', wife: 'Jen', son: 'Patrick', daughter: 'Anne'}

확산 연산자( ... )를 사용하여 원래 개체에 영향을 주지 않고 키/값 쌍을 제거할 수 있습니다.

const destructo1 = {
  name: 'Bob',
  wife: 'Jen',
  son: 'Patrick',
  daughter: 'Anne',
  email: '[email protected]'
};

const destructo6 = Object.assign({}, destructo1);
const { email, ...destructo7 } = destructo6;
console.log(email);
console.log(destructo7);

// [email protected]
// {name: 'Bob', wife: 'Jen', son: 'Patrick', daughter: 'Anne'}

새 변수 email 및 destructo7 에 유의하십시오. email 키와 값은 destructo7 에 포함되지 않습니다.

요약

이 문서에서는 개체 및 배열의 ​​구조 분해에 대한 몇 가지 기본 예제와 실제 사용 사례를 다루었습니다.