소개👩‍🏫

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에 게시되었습니다.