JavaScript 객체 및 배열 구조 분해의 기초

Object Destructuring은 실제보다 훨씬 더 멋지게 들리는 용어 중 하나입니다. 성능 측면에서 대부분의 응용 프로그램이나 프로젝트에서 눈에 띄는 차이를 만들지는 않지만 가독성 관점에서 코드에 큰 차이를 만들 것입니다. 팀에서 작업할 때 코드가 명확한 의미와 흐름을 전달해야 하므로 이는 매우 중요합니다.

객체 구조화

Destructuring의 기본은 객체 또는 배열을 분리하고 부품을 자체 변수로 사용할 수 있다는 것입니다. 기본적인 예를 살펴보겠습니다.

// Basic javascript Object
const muppet = {
  name: 'Grover',
  color: 'blue',
  address: '123 Sesame Street',
  nicknames: ['Super Grover', 'The Blue Monster'],
};

const { name, color } = muppet;

console.log(name); // Grover
console.log(color); // blue

muppet.name 또는 muppet.color 를 사용하지 않고 이제 변수 name 및 color 로 사용합니다. 주소를 분해 문에 추가하기만 하면 주소와 같은 다른 속성에 계속 액세스할 수 있습니다. 이것이 어떻게 코드를 더 읽기 쉽게 만드는지 알 수 있습니다.

위와 같은 단순한 객체의 경우 객체를 구조화하는 것이 가장 큰 문제가 아닐 수 있습니다. 결국 우리는 한 단계 깊이로 가고 있습니다.

그러나 API에서 반환된 더 복잡한 데이터가 있다고 가정해 보겠습니다. 이것이 정말로 편리한 곳입니다.

API에서 반환된 다음 데이터가 있고 점수가 포함된 문자열을 인쇄하려고 한다고 가정해 보겠습니다.

const game = {
  location: 'Minneapolis',
  attendance: 15000,
  teams: {
    home: { homeName: 'Minnesota Golden Gophers', homePoints: 110 },
    away: { awayName: 'Wisconsin Badgers', awayPoints: 50 },
  },
};

점수를 인쇄하려면 다음이 필요합니다.

const scoreString = `${game.teams.home.homePoints} to ${game.teams.away.awayPoints}`;

가장 읽기 쉽지 않습니다.

이제 홈 앤 어웨이 팀 데이터가 필요하다고 가정해 보겠습니다. 전통적인 객체 표기법으로 데이터에 접근하는 것은 그다지 DRY하지 않습니다. game.teams.home.homeName 또는 game.team.away.awayPoints를 통해 액세스하는 대신 구조를 해제할 수 있습니다.

const { homeName, homePoints } = game.teams.home;
const { awayName, awayPoints } = game.teams.away;

const scoreString = `${homePoints} to ${awayPoints}`;

scoreString 를 줄였을 뿐만 아니라 필요에 따라 다른 모든 변수에 액세스할 수 있습니다. 이 예에서 나는 모든 변수를 뽑아낸 구조 분해를 보여주었습니다. 실제로는 필요한 변수만 분해하면 됩니다.

순서는 중요하지 않지만 이름은 이름 키에 액세스할 때 중요합니다. 이름을 바꾸려면 다음과 같이 하십시오.

const { homeName: hName, homePoints: hPoints } = game.teams.home;

이제 변수를 hName 및 hPoints 로 사용할 수 있습니다. 이 예제에서 이것이 좋은 사용 사례는 아니지만 특히 더 복잡한 데이터 구조로 작업하기 시작하면 사용 방법에 대한 아이디어를 제공합니다.

함수를 작성할 때 이미 이 작업을 수행하고 있을 수 있습니다. 객체를 매개변수로 전달하면 매개변수를 구조화할 수 있습니다.

다음을 수행하십시오.

const muppet = {
  name: 'Grover',
  color: 'blue',
  address: '123 Sesame Street',
  nicknames: ['Super Grover', 'The Blue Monster'],
};

function printMuppetInformation(muppet) {
  console.log(`${muppet.name} lives at ${muppet.address}.`);
}

이제 구조화를 사용하여 구문을 더 읽기 쉽게 만들 수 있습니다.

function printMuppetInformation({ name, address }) {
  console.log(`${name} lives at ${address}.`);
}

배열

필요한 경우 어레이에도 동일한 원칙을 적용할 수 있습니다. 큰 배열에서는 그렇게 하지 않는 것이 좋습니다.

다음은 약간 다른 게임 구조입니다.

const game = {
  location: 'Minneapolis',
  attendance: 15000,
  teams: [
    { name: 'Minnesota Golden Gophers', points: 110 },
    { name: 'Wisconsin Badgers', points: 50 },
  ],
};

이제 배열 분해를 사용할 수 있습니다.

const [home, away] = game.teams;

이것은 배열 구조화에서 변수에 임의의 이름을 할당할 수 있다는 점에서 배열 구조화와 약간 다르지만 첫 번째 항목은 [0] 항목에 액세스하고 두 번째 항목은 [1]에 액세스하는 식이므로 순서가 중요합니다.

배열 구조 분해는 일반적으로 길이를 알 수 없는 긴 배열로 수행되지 않는 작업입니다. 그러나 긴 배열이 있고 알려진 인덱스의 특정 항목만 원하는 경우 다음 구문을 사용할 수 있습니다.

const items = [1, 2, 3, 4, 5, 6];
const [item1, item2, ...remainingItems] = items;

console.log(item1); // 1
console.log(remainingItems); // [3,4,5,6]

이 사용법은 일반적이지 않지만 특정 상황에서 사용 사례가 있습니다.

구조 분해 할당 및 혼합 구조 분해와 같이 만질 것이 훨씬 더 많지만 더 읽기 쉬운 자바스크립트를 위한 기본 청사진을 제공합니다.