초보자를 위한 JavaScript의 객체 분해 🛴
소개👩🏫
ES6는 let, const, 화살표 함수와 같은 다른 것들과 함께 객체 분해의 개념을 도입했습니다. 객체 구조 분해는 JavaScript에서 매우 유용한 기능입니다. React와 같은 프런트엔드 프레임워크와 Node.js와 같은 백엔드 서비스에서도 광범위하게 사용됩니다. 이 문서는 객체 구조 분해에 대한 지식을 제공하는 데 중점을 둡니다.
디스트럭처링이란? 🏏
Destructuring은 배열이나 객체에서 데이터를 추출하는 것을 의미합니다. 구조 분해를 사용하면 복잡한 객체나 배열을 더 작은 부분으로 나눌 수 있습니다. Destructuring은 객체나 배열에서 한 번에 여러 데이터를 추출할 수 있는 기능도 제공합니다. 또한 속성이 아직 설정되지 않은 경우 속성의 기본값을 설정하는 기능도 제공합니다.
예제로 분해하기 🎳
객체 분해의 개념을 이해하려면 카운트에서 예를 들어야 합니다.
다음과 같은 키-값 속성을 가진 객체가 있다고 가정합니다.
let person = {
firstName: "Captain",
lastName: "Nemo"
}
ES6 이전에는 이와 같은 코드를 작성하는 데 필요한 값을 사용하려면
const firstName = person.firstName;
const lastName = person.lastName;
console.log(`Hi ${firstName} ${lastName}! Nice to meet you. 😄`);
작은 개체이지만 키-값 쌍이 많은 큰 개체가 있다고 가정하면 속성에 액세스하기 위해 코드가 매우 반복적이며 DRY의 신을 거역하고 싶지 않습니다! 😅

이 문제를 해결하기 위해 ES6는 Destructuring 기능을 제공합니다. 구조 분해를 사용하면 다음 코드를 사용하여 속성을 쉽게 추출할 수 있습니다.
const { firstName, lastName } = person;
console.log(`Hi ${firstName} ${lastName}! Nice to meet you. 😄`);
이것을 처음 보는 경우 혼란스러워 보일 수 있습니다. 구문을 처음 보았을 때 가장 먼저 떠오른 질문은 중괄호가 왼쪽에 있는 이유였습니다. 블록인가요? 아니면 객체입니까?
사실 둘 다 아니다. 구조 분해 구문이 어떻게 생겼는지입니다.
기본적으로는 말뿐이다.
Give me a variable called firstName and a variable called lastName from the object called person.
중첩된 개체의 구조 분해
객체 구조 분해는 중첩된 객체로 작업할 때 더 편리합니다.
아래와 같은 객체를 상상해보십시오.
const person = {
firstName: "Captain",
lastName: "Nemo",
address: {
street: "1234 Ave",
city: "Antilaw State",
zip: 1234
}
}
이전 접근 방식을 사용하여 요소에 액세스하려면 코드가 너무 많이 반복되고 매우 지저분해 보일 것입니다.
console.log(person.firstName);
console.log(person.lastName);
console.log(person.address.street);
console.log(person.address.city);
console.log(person.address.zip);
산출

이제 ES6 객체 분해를 사용하여 살펴보겠습니다.
const { firstName, lastName, address: { street, zip, city } } = person;
console.log(firstName);
console.log(lastName);
console.log(street);
console.log(city);
console.log(zip);
이것은 분명히 요소에 액세스하는 더 나은 접근 방식입니다. 게다가 더 적은 줄을 써야 합니다.

적은 코드 작성에 대한 Eloquent JavaScript Book에서 읽은 아름다운 인용문이 있습니다. 여기서는 다음과 같습니다.
Tzu-li and Tzu-ssu were boasting about the size of their latest programs. ‘Two-hundred thousand lines,’ said Tzu-li, ‘not counting comments!’ Tzu-ssu responded, ‘Pssh, mine is almost a million lines already.’ Master Yuan-Ma said, ‘My best program has five hundred lines.’ Hearing this, Tzu-li and Tzu-ssu were enlightened.
Master Yuan-Ma, The Book of Programming
개체 값을 사용자 지정 변수에 저장
이제 추출된 속성을 사용자 지정 변수에 저장해야 한다고 가정해 보겠습니다. 우리는 또한 객체 파괴로 이것을 할 수 있습니다.
firstName
개체의 person
요소를 first
라는 변수에 저장하고 lastName
를 last
라는 변수에 저장한다고 가정합니다. 이는 다음 코드를 사용하여 달성할 수 있습니다.const { firstName: first, lastName: last } = person;
console.log(first);
console.log(last);
그리고 네, 원하는 요소만 추출할 수도 있습니다. 위의 코드에서는 객체에서
firstName
와 lastName
만 추출했습니다.배열을 파괴
이 기사의 시작 부분에서 배열에도 디스트럭처링을 사용할 수 있다고 말했습니다. 어떻게?
다음은 예입니다.
배열에 3개 과목의 학생 점수가 포함되어 있다고 가정합니다.
const scores = [85, 90, 74];
다음 코드를 사용하여 점수를 쉽게 구조화할 수 있습니다.
const [maths, geography, biology] = scores;
console.log(maths);
console.log(geography);
console.log(biology);
따라서 왼쪽의 단순
array literal
을 사용하여 배열을 분해할 수 있습니다. 배열 요소는 우리가 정의한 지역 변수에 저장됩니다. 각 지역 변수는 해당 배열 요소와 매핑됩니다.산출:

결론 👨🌾
나는 이 글이 ES6에서 사용되는 디스트럭처링을 사용하여 꽤 이해했다고 생각합니다. 이 문서가 도움이 되었거나 피드백이 있는 경우 아래에 댓글을 달아주세요. 당신의 의견을 듣고 싶습니다. 😊
이 문서는 원래 내 Hashnodeblog에 게시되었습니다.
Reference
이 문제에 관하여(초보자를 위한 JavaScript의 객체 분해 🛴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nemo011/object-destructuring-in-javascript-for-beginners-3a66텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)