javascript

JavaScript Destructuring의 흥미로운 사용법

조회 207 (작성일 2019.08.22 18:51)
- 음성
- 목록

일반적인 JavaScript 코드를 보면, 구조적 할당이 어디에나 있다는 것을 알 수 있습니다.

객체 속성을 읽고 배열 항목에 액세스하는 작업은 자주 수행됩니다. 구조적 할당은 이러한 작업을 훨씬 쉽고 간결하게 만듭니다.

이 글에서는 기본 사용법을 넘어서서 자바 스크립트에서 5 가지 흥미로운 구조 해제 사용법을 설명합니다.

https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/

1. Swap variables

2 개의 변수를 바꾸는 일반적인 방법에는 추가 임시 변수가 필요합니다. 간단한 시나리오를 보자.

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

temp는 a의 값을 보유하는 임시 변수입니다. 그런 다음 a는 b의 값으로 할당되고 결과적으로 b는 temp로 할당됩니다.

소멸 할당(destructuring assignment)은 임시 변수 없이 변수 교환을 간단하게 만듭니다.

let a = 1;
let b = 2;

[a, b] = [b, a];
a; // => 2
b; // => 1

[a, b] = [b, a]는 소멸 할당입니다. 오른쪽에는 배열이 만들어지며 [b, a], 즉 [2, 1]입니다. 이 배열 2의 첫 번째 항목은 a에 할당되고 두 번째 항목 1은 b에 할당됩니다.

여전히 임시 배열을 생성하더라도 구조 지정 할당을 사용하여 변수를 바꾸는 것이 더 간결합니다.

이것은 한계가 아닙니다. 동시에 두 개 이상의 변수를 바꿀 수 있습니다. 시도해 봅시다 :

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero];
zero; // => 0
one;  // => 1
two;  // => 2

원하는 만큼 변수를 바꿀 수 있습니다! 그러나 2 개의 변수를 바꾸는 것이 가장 일반적인 시나리오입니다.

2. Access array item

비어있을 수 있는 항목 배열이 있습니다. 배열의 첫 번째, 두 번째 또는 n 번째 항목에 액세스 하려고 하지만 항목이 없으면 기본값을 가져옵니다.

일반적으로 배열의 길이 속성을 사용합니다.

const colors = [];

let firstColor = 'white';
if (colors.length > 0) {
 firstColor = colors[0];
}

firstColor; // => 'white'

다행히 배열 소멸은 같은 방식으로 더 짧은 시간을 달성하는 데 도움이 됩니다.

const colors = [];

const [firstColor = 'white'] = colors;
firstColor; // => 'white'

const [firstColor = 'white'] = 색상 파괴는 firstColor 변수에 색상 배열의 첫 번째 요소를 할당합니다. 배열에 인덱스 0에 요소가 없으면 'white' 기본값이 할당됩니다.

그러나 훨씬 더 많은 유연성이 있습니다. 두 번째 요소에만 액세스하려는 경우에도 가능합니다.

const colors = [];

const [, secondColor = 'black'] = colors;
secondColor; // => 'black'

파괴의 왼쪽에 있는 쉼표를 주목하십시오 : 그것은 첫 번째 요소가 무시된다는 것을 의미합니다. secondColor는 색상 배열에서 인덱스 1의 요소와 함께 할당됩니다.

3. 불변의 연산

React와 나중에 Redux를 사용하기 시작했을 때 불변성을 존중하는 코드를 작성해야 했습니다. 처음에는 약간의 어려움이 있었지만 나중에 이점을 보았습니다. 단방향 데이터 흐름을 다루기가 더 쉽습니다.

불변성은 변형 객체를 금지합니다. 다행히 파괴는 일부 작업을 변경할 수 없는 방식으로 쉽게 달성하는 데 도움이 됩니다.

... rest 연산자와 함께 구조화하면 배열의 시작 부분에서 요소가 제거됩니다.

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;
fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]

소멸 [, ... fooNumbers] = numbers는 숫자에서 첫 번째 항목을 포함하는 새 배열 fooNumber를 만듭니다.

numbers 배열은 변경되지 않으므로 작업을 변경할 수 없습니다.

동일한 변경 불가능한 방식으로 객체에서 속성을 삭제할 수 있습니다. 큰 객체에서 foo 속성을 삭제 해 봅시다.

const big = {
 foo: 'value Foo',
 bar: 'value Bar'
};

const { foo, ...small } = big;
small; // => { bar: 'value Bar' }
big; // => { foo: 'value Foo', bar: 'value Bar' }

Object Rest 연산자와 결합하여 구조적 할당을 수행하면 foo없이 만 모든 특성을 가진 작은 새 오브젝트가 작성됩니다.

4. iterables 파괴

이전 섹션에서는 구조화가 배열에 적용되었습니다. 그러나 반복 가능한 프로토콜을 구현하는 모든 객체를 재구성 할 수 있습니다.

배열, 문자열, 형식화 된 배열, 세트 및 맵과 같은 여러 기본 기본 유형 및 오브젝트를 반복 할 수 있습니다.

예를 들어 문자열을 문자로 구조화 할 수 있습니다.

const str = 'cheese';

const [firstChar = ''] = str;

firstChar; // => 'c'

기본 유형에 국한되지 않습니다. 반복 가능한 프로토콜을 구현하여 구조화 논리를 사용자 정의 할 수 있습니다.

영화는 영화 객체의 목록을 보유합니다. 영화를 파괴 할 때 영화 제목을 문자열로 얻는 것이 좋습니다. 커스텀 이터레이터를 구현해 봅시다 :

const movies = {
  list: [
    { title: 'Heat' }, 
    { title: 'Interstellar' }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[index++].title;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};

const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // => 'Heat'

movies 객체는 Symbol.iterator 메서드를 정의하여 반복 가능한 프로토콜을 구현합니다. 반복자는 영화 제목을 반복합니다.

반복 가능한 프로토콜을 준수하면 특히 첫 번째 영화의 제목을 읽어 영화 객체를 타이틀로 구성 할 수 있습니다. const [firstMovieTitle] = movies.

반복자와 함께 파괴를 사용할 때 하늘이 한계입니다.

5. 동적 속성 파괴

내 경험상, 속성에 의한 객체의 파괴는 배열의 파괴보다 더 자주 발생합니다.

객체의 구조 조정은 매우 간단 해 보입니다.

const movie = { title: 'Heat' };

const { title } = movie;

title; // => 'Heat'

const {title} = movie는 가변 제목을 생성하고 속성 movie.title의 값을 지정합니다.

객체 파괴에 대해 처음 읽을 때 속성 이름을 정적으로 알 필요가 없다는 것에 약간 놀랐습니다. 동적 속성 이름으로 객체를 구조 해제 할 수 있습니다!

동적 파괴가 어떻게 작동하는지 알아 보려면 인사말 기능을 작성해 보겠습니다.

function greet(obj, nameProp) {
 const { [nameProp]: name = 'Unknown' } = obj; return `Hello, ${name}!`;
}

greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!'
greet({ }, 'name'); // => 'Hello, Unknown!'