JavaScript - 구조 분해 할당

모두 안녕! 👋 JavaScript ES6에는 Destructuring Assignment라는 멋진 기능이 있습니다. 그것에 대해 이야기합시다 😀.

소개 - Destructuring 할당이란 무엇입니까?

할당을 파괴하면 배열 또는 개체 속성을 변수에 쉽게 할당할 수 있습니다. 즉, 배열과 개체의 압축을 풀고 개별 변수에 할당하기 위해 더 적은 코드를 작성할 수 있습니다. 코드가 더 깔끔해 보이고 가독성이 향상됩니다.

배열 구조 분해 예제:

배열의 속성은 인덱스이며 구문은 배열 리터럴과 유사합니다. 배열 내에서 해당 위치에 해당하는 값을 할당하고 공백을 남겨 값을 건너뛸 수 있습니다(아래 예 참조).

// without destructuring

const days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"];

const first = days[0];
const TGIF = days[4];
const restDay = days[6]

console.log(first, TGIF, restDay) // "monday" "friday" "sunday"

// with destructuring

const [firstDay, , , , fifthDay, , sunday] = days;

console.log(firstDay, fifthDay, sunday) // "monday" "friday" "sunday"

구조 분해 시 ... 확산 구문을 사용하여 나머지 값을 할당하는 것도 가능합니다. 일반적으로 ...rest로 볼 수 있습니다. 이것은 기본적으로 나머지 요소를 "rest"라는 변수에 저장하는 것을 의미합니다.

const [, secondDay, ...remainDays] = days;
console.log(remainDays) //["wednesday","thursday","friday","saturday","sunday"]

객체 분해 예제:

배열 분해와 유사하게 객체 분해의 구문은 객체 리터럴과 유사하며 객체의 속성을 변수에 할당할 수 있습니다. 왼쪽은 속성/변수 이름을 나타내고 등호의 오른쪽은 압축을 풀려는 개체입니다.

속성을 동일한 이름 변수에 할당하려는 경우 간단히 { propertyName }(아래 예제 1 참조)라고 작성하거나 이름을 변경하려는 경우 간단히 { propertyName: desiredVariableName }(아래 예제 2 참조)라고 작성할 수 있습니다. 더 복잡한 객체에 대해 중첩된 구조 분해를 사용할 수도 있습니다.

// Example 1
const user = {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org"
}

const { name, email, phone } = user;

console.log(`${name} has email ${email} and reachable on ${phone}`) // "Leanne Graham has email [email protected] and reachable on 1-770-736-8031 x56442"

// Example 2
const wrestler = {
  name: "John Cena",
  moves: ["Tornado DDT", "Side Slam", "Five Knuckle Shuffle"]
}

const { name: FullName, moves: [,,bestMove]} = wrestler;

console.log(FullName +" best move is " + bestMove) // "John Cena best move is Five Knuckle Shuffle"

기본값

추출하려는 속성이 존재하지 않는 경우에 대한 기본값을 설정할 수도 있습니다(일반적으로 정의되지 않은 반환).

const [pi = 3.14] = [];

console.log(pi); // 3.14

const { codename = "Twilight" } = { name: "Loid Forger", profession: "Psychiatrist" };

console.log( codename ); // "Twilight"

내 최근 사용량

이는 객체 또는 배열에서 특정 속성만 추출하려는 경우에 매우 유용합니다. React로 작업할 때 일반적으로 객체 구조 분해를 사용하는 경우는 React 라이브러리에서 가져올 때입니다. import React, { useState, useEffect } from 'react' , 구성 요소 아래로 전달된 분해 소품 또는 API 호출에서 반환된 객체 분해. 또한 최근에 배열 구조 분해를 사용하여 배열의 두 요소를 쉽게 교체하여 DSA 문제를 해결했습니다.

const grid = ["empty", "fulled"];
[grid[0], grid[1]] = [grid[1], grid[0]];

console.log(grid); // ["fulled","empty"]

// without array destructuring

const newGrid = ["one", "two"];
const temp = newGrid[0];
newGrid[0] = newGrid[1];
newGrid[1] = temp;

console.log(newGrid) // ["two", "one"]

요약

Destructuring 할당은 배열 또는 개체 리터럴과 유사한 구문을 사용하여 배열 및 개체의 속성을 개별 변수에 할당하는 깔끔한 코드를 작성할 수 있게 해주는 유용한 구문입니다. 시도해 보세요 😀.

자세한 정보 및 예는 여기MDN에서 찾을 수 있습니다.

읽어주셔서 감사하고 추가할 내용이 있으면 알려주세요.