자바스크립트의 디스트럭처링

이것은 아마도 매우 중요하고 유용한 개념에 대한 짧은 기사가 될 것입니다. 이 기사에서는 JavaScript에서 분해 할당의 몇 가지 기본 사용법을 살펴보겠습니다!

구조 분해 할당은 객체 또는 배열에서 속성을 추출할 수 있는 특수 구문입니다. 거기에서 변수에 바인딩할 수 있습니다.

Destructuring은 사용법의 기본 사항을 이해하면 매우 유용합니다. 이 개념을 사용하면 배열, 객체 및 맵에서 데이터를 가져와 새롭고 고유한 변수에 연결할 수 있습니다. 한 번에 배열에서 여러 속성이나 요소를 추출할 수도 있습니다.

이 개념이 어떻게 작동하는지 이해하기 위해 예를 살펴보겠습니다.

이것을 쓰는 대신:

const inviteList = ["John", "Anna", "Paulina", "Chris"];

const guestOfHonor = inviteList[0];
const guestOne = inviteList[1];
const guestTwo = inviteList[2];
const guestThree = inviteList[3];

Destructuring을 사용하여 배열에서 값을 풀거나 객체가 변수에 첨부할 수 있습니다.

const inviteList = ["John", "Anna", "Paulina", "Chris"];

const [honoredGuest, firstGuest, secondGuest, thirdGuest] = inviteList;

해체를 통해 HonoredGuest(John), firstGuest(Anna), secondGuest(Paulina) 및 thirdGuest(Chris)를 할당할 수 있습니다.


개체 작업을 할 때의 예를 살펴보겠습니다!

const cat = {
name: 'Cleo',
age: 3,
breed: 'Calico'
}

const { name, age, breed } = cat

console.log(name) //Cleo
console.log(age) // 3
console.log(breed) // Calico

위에서는 고양이의 이름, 나이, 품종에 별도의 변수를 할당했습니다.


이제 변수 이름을 변경하는 방법을 살펴보겠습니다.

const cat = {
name: 'Cleo',
age: 3,
breed: 'Calico'
}

const { name: catName, age: catAge, breed: catBreed } = cat

console.log(catName) //Cleo
console.log(catAge) // 3
console.log(catBreed) // Calico

배열에 대한 구조 분해 할당의 중첩된 예를 살펴보겠습니다.

const nestedArr = [1, [2,4], [5,7,9]]

const [first, [second, third], fourth] = nestedArr

console.log(first) //1
console.log(second) //2
console.log(third) //4
console.log(fourth) // [5,7,9]

마지막으로 객체를 사용한 구조 분해 할당을 살펴보겠습니다.

let employee = {
id: 1001,
name: {
   firstName: 'John',
   lastName: 'Doe'
   }
};

const {
   name: {
    firstName,
    lastName
    },
 name
} = employee;

console.log(firstName); // John
console.log(lastName); // Doe
console.log(name); //{firstName: 'John', lastName:'Doe'}

이것은 파괴가 무엇을 할 수 있는지에 대한 빙산의 일각에 불과합니다!