JavaScript의 구조화에 대한 완전한 가이드

JavaScript에서 일반적으로 사용되는 두 가지 데이터 구조는 Object 및 Array 입니다. 그리고 여러 번 우리는 전체 대신 개체의 개별 조각을 추출해야 할 수도 있습니다. 여기서 Destructuring이 등장합니다.

Destructuring은 객체나 배열을 많은 변수로 "해체"하거나 "압축 해제"하는 데 사용되는 특수 구문입니다. 더 유용할 수 있습니다.

배열 분해

다음은 배열 구조화의 예입니다.

const site = ['dev', 'to'];

// destructuring here
let [domain, ext] = site;
// this is basically equal to
// let domain = site[0]
// let ext = site[1]

alert(domain); //=> dev
alert(ext);    //=> to

Destructuring을 사용하여 배열의 이름이나 인덱스를 반복할 필요가 없었습니다. 구조화는 배열을 반환하는 문자열 메서드를 사용할 때 정말 유용할 수 있습니다.

const [firstName, lastName] = 'John Doe'.split(' ');
const [full, short] = /(.+?(?!=day))day/gi.exec('Monday');

원래 배열은 구조화할 때 변경되지 않습니다. 구조화는 파괴적이지 않습니다.

항목 건너뛰기

holes을 사용하여 배열의 항목을 건너뛸 수 있습니다.

const [, lastName] = 'John Doe'.split(' ');

alert(lastName); //=> Doe

모든 iterable과 함께 작동

사실, 우리는 구조화에서 모든 iterable을 사용할 수 있습니다(객체 포함, 나중에 이야기할 것)

let [a, b, c] = 'abc'; //=> ['a', 'b', 'c']
let [one, two, three] = new Set([1, 2, 3]);

이것은 Destructuring이 Iterable에 대해 for...of를 사용한 다음 변수에 값을 할당하는 일종의 구문 설탕이기 때문입니다.

무엇이든 할당

할당할 수 있는 것은 무엇이든 할당할 수 있습니다(예: 개체 속성).

const day = {};

[day.full, day.short] = /(.+?(?!=day))day/gi.exec('Monday');

또는 기존 변수:

let full, short;

[full, short] = /(.+?(?!=day))day/gi.exec('Monday');

변수 교환 트릭

구조화를 사용하여 두 변수를 교환하는 데 사용되는 일반적인 트릭이 있습니다.

let student = 'You';
let master = 'Me';

[student, master] = [master, student];

student; //=> Me
master; //=> You
// The student has become the master

나머지 ...

배열이 구조화한 것보다 길면 추가 항목이 제외됩니다.

const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const [day1, day2] = days;
day1; //=> Sunday
day2; //=> Monday
// No more assignments

다음을 사용하여 해당 항목을 수집할 수 있습니다.

const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

const [
    day1, // First item aka Sunday
    day2, // Second item aka Sunday
    ...restDays // All the other items
] = days;

restDays; //=> ['Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

restDays 대신 아무 이름이나 사용할 수 있습니다. 유일한 규칙은 앞에 세 개의 점이 있어야 하고 마지막에 와야 한다는 것입니다.

기본값

존재하지 않는 값을 구조화하면 오류가 발생하지 않습니다. 항목은 단순히 정의되지 않습니다. 이 문제를 해결하기 위해 기본값을 설정할 수 있습니다.

const [name = 'Anonymous'] = [];
name; //=> Anonymous

const [name = 'Anonymous'] = ['John'];
name; //=> John

중첩

중첩 배열을 구조화할 수도 있습니다. 내부에서 동일한 구문을 사용하기만 하면 됩니다.

const arr = [["John"]]; // Nested array!

const [[name]] = arr;
name; //=> 'John'

또는 정말 복잡한 예:

const arr = ['Foo', ['Bar', ['Baz', 'Lol', ['Quux']]]];
const [foo, [bar, [baz, lol, [quux]]]] = arr2;

foo; //=> Foo
bar; //=> Bar
baz; //=> Baz
lol; //=> Lol
quux; //=> Quux

존재하지 않는 중첩 항목을 구조화할 때 오류가 발생한다는 점에 유의하십시오.

객체 분해

객체도 구조화될 수 있으며 구문은 거의 동일합니다.

const site = {domain: 'dev', ext: 'to'};

// destructuring here, note the {}
let {domain, ext} = site;
// this is basically equal to
// let domain = site.domain
// let ext = site.ext

alert(domain); //=> dev
alert(ext);    //=> to

또한 순서는 중요하지 않습니다.

const rectangle = {
    width: 10,
    height: 20,
    x: 5,
    y: 5
};

// All of these work
const {width, height, x, y} = rectangle;
const {x, width, height, y} = rectangle;
const {y, width, x, height} = rectangle;
// ...

앨리어싱

일반 객체처럼 realName: alias를 작성하여 비구조적 변수에 별칭을 설정할 수 있습니다.

const rectangle = {
    width: 10,
    height: 20,
    x: 5,
    y: 5
};

const {width: w, height: h, x, y} = rectangle;

w; //=> 10 (value of width)
h; //=> 20 (value of height)

배열과 마찬가지로 기본값을 설정할 수 있습니다.

const name = {first = prompt('First name'), last = prompt('Last name')} = {first: 'John'};

기본값과 별칭을 혼합할 수도 있습니다.

const name = {first: f = prompt('First name'), last: l = prompt('Last name')} = {first: 'John'};

나머지 ...

배열과 마찬가지로 객체도 rest 속성을 가질 수 있습니다.

const coords = {x: 13, y: 42, z: 8};

const {x, ...rest} = coords;

x; //=> 13
y; //=> {y: 42, z: 8}

기존 값 할당을 위한 빠른 문제

이전 예에서 우리는 let {...} = {...}를 사용했는데 괜찮습니다. 그러나 {...} = {...} 시도하면 오류가 발생합니다.

let width, height;

// Error here
{width, height} = {width: 10, height: 21};

이것은 JavaScript가 {...} 자체를 블록 문으로 간주하기 때문입니다. 블록 문을 사용하여 코드를 그룹화할 수 있습니다.

{ // This is a isolated block
    let foo = 42;
    alert(foo);
}

따라서 JavaScript에 구조 해제가 필요하다고 알리기 위해 ()로 래핑할 수 있습니다.

let width, height;

// This is fine
({width, height} = {width: 10, height: 21});

중첩

배열과 마찬가지로 중첩 속성도 구조화할 수 있습니다! 소스의 구조를 모방하기만 하면 됩니다.

const rect = {
    color: red,
    coords: {
        x: 12,
        y: 7,
    }
};

const {
    color,
    coords: {
        x,
        y,
    }
} = rect;

color; //=> red
x; //=> 12
y; //=> 7
// No coords :(

값을 구조화하고 있으므로 좌표가 없습니다.

다음은 완전한 구조 해제 예입니다.

const order = {
    items: ['Pizza', 'Donuts'],
    extra: true,
    amount: {
        pizza: 2,
        donuts: 4
    }
};

const {
    items: [main, ...rest] = [], // Array destructuring
    extra = false, // Default props
    amount: { // Nested
        pizza,
        donuts
    },
    homeDelivery = false, // Non existent values
} = order;

이것이 구조화에 대해 알아야 할 모든 것입니다!

이 게시물이 도움이 되었다면 저를 팔로우하거나 여기에서 제 블로그 게시물에 대한 최신 소식을 받아보세요!