자바스크립트에서 디스트럭처링. 뭐야? 어떻게 작동합니까? 왜 사용해야 합니까?

파괴란 무엇인가?

JavaScript의 Destructuring은 배열 및 객체와 같은 데이터 구조에서 값을 추출할 수 있는 강력한 기능입니다. 코드를 더 읽기 쉽고 간결하게 만드는 데 사용할 수 있습니다.

이 블로그 포스트에서는 디스트럭처링이 무엇인지, 어떻게 작동하는지, 디스트럭처링을 사용할 때 얻을 수 있는 몇 가지 이점에 대해 살펴보겠습니다.

파괴는 어떻게 작동합니까?

구조 분해는 간단하지만 언뜻 보기에는 마술적이고 혼란스러워 보일 수 있습니다. 배열이나 객체를 가져와 해당 속성에서 변수를 생성하는 방식으로 작동합니다.

배열 파괴

예를 들어 myNumbers라는 숫자 배열이 있다고 가정해 보겠습니다.

const myNumbers = [1, 2, 3, 4, 5];

구조 분해를 사용하여 배열 요소에서 변수를 만들 수 있습니다.

const [first, second, third, fourth, fifth] = myNumbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
console.log(fourth); // 4
console.log(fifth); // 5

보시다시피 구조 분해를 통해 배열에서 데이터를 추출하여 변수에 할당할 수 있습니다.

객체 파괴

Destructuring을 사용하여 개체에서 데이터를 추출할 수도 있습니다.

예를 들어 name, age 및 country 속성이 있는 person 개체가 있다고 가정해 보겠습니다.

const person = {
  name: ' John Doe ',
  age: 30,
  country: ' United States '
};

Destructuring을 사용하여 개체의 속성에서 변수를 만들 수 있습니다.

const { name, age, country } = person;

console.log(name); // John Doe
console.log(age); // 30
console.log(country); // United States

위에 제시된 것처럼 객체 속성을 추출하고 변수에 할당하기 위해 구조 분해를 사용할 수 있습니다.

중첩 데이터 구조 분해

Destructuring은 중첩 데이터 구조에서 데이터를 추출하는 데에도 사용할 수 있습니다.

이름, 연령 및 국가 속성이 있는 개체 배열이 있다고 가정해 보겠습니다.

const people = [
  {
    name: ' John Doe ',
    age: 30,
    country: ' United States '
  },
  {
    name: ' Jane Doe ',
    age: 20,
    country: ' Canada '
  }
];

구조 분해를 사용하여 중첩된 개체의 속성에서 변수를 만들 수 있습니다.

const [{ name: name1, age: age1, country: country1 }, { name: name2, age: age2, country: country2 }] = people;

console.log(name1); // John Doe
console.log(age1); // 30
console.log(country1); // United States

console.log(name2); // Jane Doe
console.log(age2); // 20
console.log(country2); // Canada

이를 통해 보다 복잡한 데이터 구조를 단순화하고 배열의 각 요소에서 값을 추출할 수 있습니다.

함수 인수 분해

구조 분해는 함수 인수에서 데이터를 추출하는 데에도 사용할 수 있습니다.

이름, 연령 및 국가 속성을 가진 객체를 취하는 함수가 있다고 가정합니다.

function sayHello({ name, age, country }) {
  console.log(`Hello, my name is ${name}. I'm ${age} years old and I'm from ${country}.`);
}

Destructuring을 사용하여 객체에서 데이터를 추출하고 이를 함수의 인수로 전달할 수 있습니다.

sayHello({
  name: ' John Doe ',
  age: 30,
  country: ' United States '
});

// Hello, my name is John Doe. I'm 30 years old and I'm from United States.

보시다시피 구조 분해를 사용하면 데이터 구조에서 데이터를 쉽게 추출하고 인수로 함수에 전달할 수 있습니다.

Destructuring 사용의 이점

구조 분해를 사용하여 코드를 더 읽기 쉽고 간결하게 만들 수 있습니다. 이를 보여주기 위해 위에서 작성한 예제에 대해 분해를 사용하는 코드와 그렇지 않은 코드를 비교할 것입니다.

배열 비교

myNumbers 배열을 가지고 그 안의 모든 정수를 합산해 봅시다.

구조 분해가 없으면 다음 코드를 작성해야 합니다.

const myNumbers = [1, 2, 3, 4, 5];

let sum = 0;

for (const num of myNumbers) {
  sum += num;
}

console.log(sum); // 15

구조 분해를 사용하면 다음 코드를 작성할 수 있습니다.

const myNumbers = [1, 2, 3, 4, 5];

const [first, second, third, fourth, fifth] = myNumbers;

const sum = first + second + third + fourth + fifth;

console.log(sum); // 15

보시다시피 구조 분해는 코드를 더 간결하게 만들 수 있습니다.

개체 예제와 구조 조정이 코드를 더 읽기 쉽게 만드는 데 어떻게 도움이 되는지 살펴보겠습니다.

개체 비교

이전 예제의 person 개체를 사용합니다.

구조 분해가 없으면 다음 코드를 작성해야 합니다.

const person = {
  name: ' John Doe ',
  age: 30,
  country: ' United States '
};

console.log(person.name); // John Doe
console.log(person.age); // 30
console.log(person.country); // United States

구조 분해를 사용하면 다음 코드를 작성할 수 있습니다.

const person = {
  name: ' John Doe ',
  age: 30,
  country: ' United States '
};

const { name, age, country } = person;

console.log(name); // John Doe
console.log(age); // 30
console.log(country); // United States

구조 분해를 사용하면 코드를 더 쉽게 읽을 수 있습니다.

추출 함수 인수 비교

마지막으로 Destructuring을 사용하여 함수 인수를 추출하는 것이 이해하고 작업하기 쉽게 만드는 방법을 살펴보겠습니다.

위의 예에서 이미 익숙한 sayHello 함수를 사용합니다.

구조 분해가 없으면 다음 코드를 작성해야 합니다.

function sayHello(person) {
  console.log(`Hello, my name is ${person.name}. I'm ${person.age} years old and I'm from ${person.country}.`);
}

sayHello({
  name: ' John Doe ',
  age: 30,
  country: ' United States '
});

구조 분해를 사용하면 다음 코드를 작성할 수 있습니다.

function sayHello({ name, age, country }) {
  console.log(`Hello, my name is ${name}. I'm ${age} years old and I'm from ${country}.`);
}

sayHello({
  name: ' John Doe ',
  age: 30,
  country: ' United States '
});

우리의 해체된 예는 더 간결하고 읽기 쉽습니다.

결론

Destructuring은 코드를 더 읽기 쉽고 간결하게 만드는 데 사용할 수 있는 강력한 기능입니다. 많은 코드를 작성할 필요 없이 데이터 구조에서 데이터를 추출하는 편리한 방법입니다.

아직 JavaScript 코드에서 구조 분해를 사용하고 있지 않다면 시도해 보시기 바랍니다. 도구 상자에 추가할 가치가 있습니다.