자바스크립트 소멸자
이 기사는 주로 ES6의 가장 훌륭하고 유용한 기능 중 하나인 JavaScript 분해에 중점을 둡니다. De-structuring은 배열 항목 또는 개체 속성을 별도의 변수, 배열, 개체, 중첩된 개체로 풀고 모든 데이터 추출을 허용하는 변수에 대한 할당을 가능하게 하는 JavaScript 문입니다.
동시에 몇 가지 예를 살펴보고 배열, 객체 및 둘 다에 대해 구조 분해를 사용하는 방법을 살펴보겠습니다.
객체에 Destructuring 사용
// object
const employee = {
id: 001,
name: 'John Oliver',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
앞에서 언급한 JS 코드의 employee 개체가 표시됩니다. 오른쪽에는 이 직원의 기본 속성인 id, name, age 및 department가 있습니다. 일부 데이터가 포함된 콘솔이 표시됩니다.
// object
const employee = {
id: 001,
name: 'John Oliver',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
const name = employee.name;
const age = employee.age;
console.log(name);
console.log(age);
그래서 우리는 먼저 객체와 함께 분해를 사용하는 방법을 볼 것입니다.
이 직원의 자산에 액세스하려면 어떻게 해야 합니까? 우리는 이름을 쓸 수 있습니다. employee.name을 변경합니다.
연령에 액세스하려는 경우 employee.age로 변경됩니다.
console.log(name);을 사용하여 이름과 나이를 콘솔에 출력한다고 가정합니다. 및 console.log(age);. 코드를 실행하면 이름과 나이가 출력되는 것을 볼 수 있습니다.
여기에서 동일한 작업을 반복적으로 수행했음을 알 수 있습니다. 이름을 두 번, 나이를 두 번, 직원을 반복했습니다.
그러나 ES6는 작은 구문으로 간결하게 수행할 수 있기 때문에 반복할 필요가 없을 때 구조 분해 할당을 위한 몇 가지 최상의 기능을 제공합니다.
구조 분해를 통해 이 작업을 수행할 수 있는 방법을 살펴보겠습니다. 먼저 변수를 씁니다.
여기서 이 상수는 employee와 같습니다.
// object
const employee = {
id: 001,
name: 'John Oliver',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
//const name = employee.name;
//const age = employee.age;
const { name, age } = employee;
console.log(name);
console.log(age);
그러나 왼쪽에서 개체 구문을 만든 다음 employee 개체에서 액세스하려는 속성 이름을 작성할 수 있습니다. 따라서 이름과 나이에도 액세스하려고 합니다.
위의 코드를 실행할 때 여전히 동일한 출력 또는 결과를 받습니다.
여기서는 employee.name 또는 employee.age를 반복하지 않습니다. 우리는 이러한 속성 이름을 직접 사용하고 있습니다.
속성으로 이름을 사용하지 않고 다른 이름을 지정하려는 경우 한 가지 더 수행할 수 있습니다.
// object
const employee = {
id: 001,
name: 'John Oliver',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
//const name = employee.name;
//const age = employee.age;
const { name: fullName, age } = employee;
console.log(fullName);
console.log(age);
그런 다음 콜론을 쓰고 fullName을 사용할 수 있으며 여전히 동일한 결과를 얻을 수 있습니다. 그리고 이 디스트럭처링에 대한 한 가지 멋진 점은 여기에서 기본 매개변수를 사용할 수 있다는 것입니다.
// object
const employee = {
id: 001,
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
// const name = employee.name;
// const age = employee.age;
const {name: fullName = 'Lora Noah ', age} = employee;
console.log(fullName);
console.log(age);
Lora Noah의 기본 매개변수를 사용한다고 가정합니다. 이제 기본 매개변수를 사용했음을 알 수 있습니다.
속성 이름을 포함하지 않는 이 employee 개체를 살펴보겠습니다. 이 경우 기본값인 Lora Noah를 사용합니다.
employee와 같은 중첩된 객체를 해체한다고 가정합니다. 특정 직원이 거주하는 도시를 알고 현재 알고 있는 주소에 추가해야 합니다.
그러면 우리도 그렇게 할 수 있습니다. 먼저 주소가 있어야 합니다.
이 주소를 콘솔하면 개체가 제공됩니다. 코드를 실행해 봅시다.
// object
const employee = {
id: 001,
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
// const name = employee.name;
// const age = employee.age;
const {address} = employee;
console.log(address);
아래와 같이 출력이 수신됩니다. 그러나 우리는 그것의 도시만을 원합니다.
우리는 그것을 변경할 수 있기 때문에 여기에서 완전한 개체를 원하지 않습니다. 우리는 무엇을 해체할 수 있습니까? 우리는 도시에 대해 쓸 수 있습니다.
주소를 제거한 다음 콘솔에 도시를 사용하십시오.
// object
const employee = {
id: 001,
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
// const name = employee.name;
// const age = employee.age;
const {address: {city}} = employee;
console.log(city);
다음은 우리가 얻은 결과입니다.
그런 다음 함수에서 구조 분해를 사용할 수 있을 때 Colombo를 출력으로 얻습니다. 우리가 빌드하는 함수는 displayEmployee라고 해야 합니다.
이 함수는 employee를 받은 다음 console.log()가 필요합니다. 우리는 콘솔에 문자열 리터럴을 사용합니다.
우리는 직원 이름을 ${name}로 쓰고 나이는 ${age};로 씁니다. 콘솔용.
// object
const employee = {
id: 001,
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
function displayEmployee(employee) {
console.log(`The employee name is ${name} and age is ${age}`);
}
displayEmployee(employee);
그 이름들을 출력하고 싶다면 보통 어떻게 해야 할까요? 콘솔의 employee.name 및 employee.age.
// object
const employee = {
id: 001,
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
function displayEmployee(employee) {
console.log(
`The employee name is ${employee.name} and age is ${employee.age}`);
}
displayEmployee(employee);
이 코드 실행에서 employee.name이 정의되지 않은 것으로 표시되는 것을 볼 수 있습니다.
그래서 employee 개체에서 name 속성을 제거했습니다. 이제 John이라는 이름과 24라는 나이를 얻을 수 있습니다.
코드 및 코드 실행 후 예상되는 출력은 다음과 같습니다.
// object
const employee = {
id: 001,
name: 'John',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
function displayEmployee(employee) {
console.log(
`The employee name is ${employee.name} and age is ${employee.age}`);
}
displayEmployee(employee);
출력:
그러나 우리는 함수의 구조를 해체할 수도 있습니다. 따라서 이 기능을 해체하려면 연령이 필요합니다. 이름이 필요합니다.
여기서 순서를 유지할 필요가 없습니다. 다른 말로 설명하면 이름과 나이를 쓸 수 있습니다.
정해진 순서가 없기 때문에 필요에 따라 변경할 수 있습니다.
// object
const employee = {
id: 001,
name: 'John',
age: 24,
department: 'Marketing',
address: {
city: 'Colombo',
country: 'Sri Lanka',
},
};
function displayEmployee(age, name) {
console.log(
`The employee name is ${employee.name} and age is ${employee.age}`);
}
displayEmployee(employee);
이 코드를 실행하면 여전히 동일한 출력을 얻습니다.
배열에 Destructuring 사용
배열을 만들어야 합니다. 배열의 모든 값에 액세스할 수 있기를 원합니다.
단어 apple, mango, banana 및 pineapple이 배열로 작성됩니다. 배열을 나타내기 위해 변수 fruits를 사용합니다.
첫 번째 요소인 apple은 인덱스 0에 기록되고 두 번째 요소인 mango는 인덱스 1에 사용됩니다.
그리고 console.log(apple) 및 console.log(mango)를 표시합니다.
// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];
const apple = fruits[0];
const mango = fruits[1];
console.log(apple);
console.log(mango);
출력은 아래와 같습니다.
그 결과 사과와 망고가 생성됩니다. 그러나 배열을 해체하려면 서면으로 작성해야 합니다.
배열을 해체하기 위해 이 상수는 fruits 배열과 유사하게 설정됩니다.
여기서는 배열이 필요하며 값은 배열에 사용됩니다. fruit1과 fruit2를 입력하면 첫 번째 인덱스의 apple이 출력됩니다.
// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];
// const apple = fruits[0];
// const mango = fruits[1];
const [fruit1, fruit2] = fruits;
console.log(fruit1);
console.log(fruit2);
따라서 apple에는 fruit1 값이 지정되고 mango에는 fruit2 값이 지정될 수 있습니다. 위의 fruit1이라는 용어는 배열의 첫 번째 값과 관련이 있습니다.
배열의 두 번째 값은 fruit2입니다. 배열의 두 번째 값인 mango입니다.
망고를 건너뛰려면 세 번째 값인 바나나가 필요합니다. 따라서 비어 있음을 실행합니다.
참조가 없으면 배열의 두 번째 값을 건너뜁니다. 그것은 우리에게 세 번째 가치를 제공합니다.
// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];
// const apple = fruits[0];
// const mango = fruits[1];
const [fruit1, , fruit2] = fruits;
console.log(fruit1);
console.log(fruit2);
그런 다음 apple과 banana를 출력으로 얻을 수 있습니다.
배열을 사용한 구조 분해에 Rest 연산자 사용
구조 분해를 위해 나머지 연산자를 사용할 수도 있습니다. 배열의 처음 세 항목과 나머지 값을 원하는 경우 나머지 연산자를 사용할 수 있습니다.
나머지 연산자를 입력하고 console.log()를 실행하여 pineapple을 포함하는 나머지 배열을 얻을 수 있습니다.
코드에서 연산자의 동작을 볼 수 있습니다.
// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];
// const apple = fruits[0];
// const mango = fruits[1];
const [fruit1, , fruit2, ...rest] = fruits;
console.log(fruit1);
console.log(fruit2);
console.log(rest);
이것이 출력입니다.
배열에서 구조 분해 부분을 수행하는 방법은 다음과 같습니다.
배열과 객체에 Destructuring을 동시에 사용
먼저 배열과 객체를 작성할 수 있습니다. 이 식료품 배열은 아래 코드에서 볼 수 있습니다.
// Array and Object
const groceryList = [
{item: 'Apples', price: 25, category: 'fruits'},
{item: 'Mangoes', price: 35, category: 'fruits'},
{item: 'Tomatoes', price: 15, category: 'vege'},
{item: 'Milk', price: 20, category: 'misc'},
{item: 'Bread', price: 12, category: 'misc'},
{item: 'Eggs', price: 18, category: 'misc'},
];
console.log(groceryList[0].item);
Apples에 액세스하려면 일반적으로 console.log(groceryList[0].item);를 수행합니다. 그러면 Apples가 출력으로 표시되는 것을 볼 수 있습니다.
구조 분해를 사용하면 이렇게 작성할 수 있습니다. 우리는 상수를 쓰고 사과라고 씁니다.
이러한 Apples는 groceryList와 같습니다. 먼저 배열의 첫 번째 요소를 통과하려는 경우 배열이 있습니다.
// Array and Object
const groceryList = [
{item: 'Apples', price: 25, category: 'fruits'},
{item: 'Mangoes', price: 35, category: 'fruits'},
{item: 'Tomatoes', price: 15, category: 'vege'},
{item: 'Milk', price: 20, category: 'misc'},
{item: 'Bread', price: 12, category: 'misc'},
{item: 'Eggs', price: 18, category: 'misc'},
];
// console.log(groceryList[0].item);
const [apple] = groceryList;
console.log(apple);
다음은 출력입니다.
여기서 배열은 완성되지만 개체는 필요하지 않습니다. 우리는 해체를 위해 객체의 항목만 원합니다.
개체를 해체하면 항상 속성과 함께 가져옵니다. 그리고 사과와 같은 속성은 없습니다.
따라서 이러한 방식으로 속성을 할당해야 합니다. 아래 코드를 보세요.
변수에 대해 사과로 다른 구성 요소를 사용해 볼 수 있습니다. 하지만 아이템으로 직접 사용한다면 쓸 수 있습니다.
// Array and Object
const groceryList = [
{item: 'Apples', price: 25, category: 'fruits'},
{item: 'Mangoes', price: 35, category: 'fruits'},
{item: 'Tomatoes', price: 15, category: 'vege'},
{item: 'Milk', price: 20, category: 'misc'},
{item: 'Bread', price: 12, category: 'misc'},
{item: 'Eggs', price: 18, category: 'misc'},
];
// console.log(groceryList[0].item);
const [{item}] = groceryList;
console.log(item);
출력에 Apples가 표시됩니다.
출력이 Tomatoes가 되도록 하려면 처음 두 단계를 건너뛰면 걱정할 것이 없습니다. 배열에서 세 번째로 토마토를 볼 수 있습니다.
// Array and Object
const groceryList = [
{item: 'Apples', price: 25, category: 'fruits'},
{item: 'Mangoes', price: 35, category: 'fruits'},
{item: 'Tomatoes', price: 15, category: 'vege'},
{item: 'Milk', price: 20, category: 'misc'},
{item: 'Bread', price: 12, category: 'misc'},
{item: 'Eggs', price: 18, category: 'misc'},
];
// console.log(groceryList[0].item);
const [, , {item}] = groceryList;
console.log(item);
위에서 구현한 코드 청크의 출력입니다.
토마토를 받은 후 다른 항목도 원한다고 가정합니다. 이를 위해서는 동일한 나머지 연산자를 적용하고 콘솔에 console.log()를 추가해야 합니다.
일단 가지고 있으면 나머지 개체 배열을 검색할 수 있습니다.
// Array and Object
const groceryList = [
{item: 'Apples', price: 25, category: 'fruits'},
{item: 'Mangoes', price: 35, category: 'fruits'},
{item: 'Tomatoes', price: 15, category: 'vege'},
{item: 'Milk', price: 20, category: 'misc'},
{item: 'Bread', price: 12, category: 'misc'},
{item: 'Eggs', price: 18, category: 'misc'},
];
// console.log(groceryList[0].item);
const [, , {item}, ...rest] = groceryList;
console.log(item);
console.log(rest);
출력은 아래에서 볼 수 있습니다.
그만큼 파괴력이 강합니다. 개체에 배열이 포함된 다른 접근 방식의 그림을 살펴보겠습니다.
위치 Singapore를 선택하려고 합니다. 따라서 싱가포르의 위치를 얻으려면 console.log(company.(locations[0]))를 수행할 수 있습니다.
// Array and Object
const company = {
name: 'Google',
locations: ['Singapore', 'India', 'Germany'],
};
console.log(company.locations[0]);
가치/출력을 싱가포르로 얻을 수 있습니다. 아래를 참조하십시오.
우리는 디스트럭처링을 사용하여 이를 달성하고자 합니다. 회사라는 객체와 동일한 상수를 쓸 수 있습니다.
객체에 대한 구조 분해를 수행하려면 중괄호를 사용합니다. 중괄호에서는 속성 이름을 위치로 사용합니다.
위치에서 인덱스 0의 첫 번째 값에 액세스해야 합니다. 따라서 여기에 배열을 작성하고 위치에 loc을 사용할 수 있습니다.
// Array and Object
const company = {
name: 'Google',
locations: ['Singapore', 'India', 'Germany'],
};
const {
locations: [loc],
} = company;
console.log(loc);
그리고 우리는 이 loc을 인쇄하고 싶습니다. 따라서 console.log(loc)를 사용합니다. 그런 다음 Singapore를 출력으로 얻을 수 있습니다.
결과를 인도로 원한다고 가정합니다. 따라서 첫 번째 값을 건너뜁니다. 그런 다음 해당 값(인도)을 출력할 수 있습니다.
// Array and Object
const company = {
name: 'Google',
locations: ['Singapore', 'India', 'Germany'],
};
const {
locations: [, loc],
} = company;
console.log(loc);
여기에서 출력을 볼 수 있습니다.
구조 분해에 대해 논의하는 마지막 사용 사례가 있습니다. 여기에서는 새 사용자로 상수를 사용합니다.
const Users = [
['John', 'Oliver'],
['James', 'Smith'],
['Mary', 'Elizabeth'],
];
[{
firstName: 'John',
lastName: 'Oliver',
},
{
firstName: 'James',
lastName: 'Smith',
},
{
firstName: 'Mary',
lastName: 'Elizabeth',
},
];
이러한 사용자에는 중첩 배열이 있습니다. 결과가 아래 출력이 되기를 원하면 객체를 포함하고 객체 내부에 있는 것을 볼 수 있습니다.
키-값 쌍이 필요합니다. firstName은 John이고 lastName은 Oliver입니다. 디스트럭처링을 사용하면 매우 쉽게 할 수 있습니다.
여기서는 지도인 고차 배열 함수를 사용합니다. 따라서 Users를 사용하는 Users 개체로 상수를 생성합니다.
그것은 당신에게 첫 번째 사용자를 줄 것입니다. 첫 번째 사용자와 함께 원하는 개체를 반환할 수 있습니다. 여기서는 firstName을 사용합니다.
이 firstName은 0의 사용자 인덱스와 같고 lastName의 경우 사용자 인덱스 1을 수행합니다.
해당 콘솔 다음에 console.log(UsersObj)를 사용하는 Users 개체;
const Users = [
['John', 'Oliver'],
['James', 'Smith'],
['Mary', 'Elizabeth'],
];
[{
firstName: 'John',
lastName: 'Oliver',
},
{
firstName: 'James',
lastName: 'Smith',
},
{
firstName: 'Mary',
lastName: 'Elizabeth',
},
];
const UserObj = Users.map((User) => {
return { firstName: User[0], lastName: User[1] };
});
console.log(UserObj);
여기에서 세 개체의 firstName 및 lastName을 얻습니다.
해체와 관련하여 여기서 무엇을 할 수 있습니까? 배열에서 첫 번째 값을 firstName으로 할당하고 두 번째 값을 lastName으로 할당할 수 있습니다.
const Users = [
['John', 'Oliver'],
['James', 'Smith'],
['Mary', 'Elizabeth'],
];
[{
firstName: 'John',
lastName: 'Oliver',
},
{
firstName: 'James',
lastName: 'Smith',
},
{
firstName: 'Mary',
lastName: 'Elizabeth',
},
];
const UserObj = Users.map(([firstName, lastName]) => {
return { firstName: firstName, lastName: lastName };
});
console.log(UserObj);
여기에서도 위의 출력과 같은 결과가 나옵니다.
그러나 ES6에는 향상된 객체 리터럴이 있으므로 한 가지 더 할 수 있습니다. 키에 대해 그렇게 할 수 있으며 값은 동일합니다.
제거할 수 있습니다. 그러나 남은 것으로 여전히 동일한 결과를 얻을 수 있습니다.
const Users = [
['John', 'Oliver'],
['James', 'Smith'],
['Mary', 'Elizabeth'],
];
[{
firstName: 'John',
lastName: 'Oliver',
},
{
firstName: 'James',
lastName: 'Smith',
},
{
firstName: 'Mary',
lastName: 'Elizabeth',
},
];
const UserObj = Users.map(([firstName, lastName]) => {
return { firstName, lastName };
});
console.log(UserObj);
그것이 우리가 구조 분해를 사용할 수 있는 방법입니다.
결론
이 기사에서는 구조 분해가 무엇이며 JavaScript에서 이를 수행하는 방법에 대해 논의했습니다. React와 같은 언어로 작업할 때 유용합니다.
React로 작업하지 않더라도 깨끗한 코드를 작성할 수 있습니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.