반응형
구조분해(Destructuring) 할당이란?
Destructuring 할당은 개체 또는 배열에서 값을 추출하여 개별 변수에 할당할 수 있는 JavaScript(및 일부 다른 프로그래밍 언어)의 기능입니다. 복잡한 데이터 구조에서 값을 압축 해제하는 간결하고 편리한 방법을 제공합니다.
Destructuring 할당 구문은 객체에 중괄호 {}를 사용하고 배열에 대괄호 []를 사용하여 값을 추출하기 위한 패턴을 지정합니다. 패턴은 개체 또는 배열의 구조와 일치하며 값은 해당 패턴을 기반으로 변수에 할당됩니다.
1. 객체에 대한 구조분해 할당
이 예에서는 person 개체의 name, age 및 city 속성이 추출되어 동일한 이름을 가진 변수에 할당됩니다.
// Object
const person = { name: 'John', age: 25, city: 'London' };
// Destructuring assignment
const { name, age, city } = person;
// Output
console.log(name); // 'John'
console.log(age); // 25
console.log(city); // 'London'
2. 배열에 대한 구조분해 할당
이 예에서는 'numbers' 배열의 첫 번째, 두 번째 및 네 번째 요소가 추출되어 변수 'first', 'second' 및 'fourth'에 각각 할당됩니다. 세 번째 요소는 구조 분해 패턴의 빈 슬롯을 사용하여 건너뜁니다.
// Array
const numbers = [1, 2, 3, 4, 5];
// Destructuring assignment
const [first, second, , fourth] = numbers;
// Output
console.log(first); // 1
console.log(second); // 2
console.log(fourth); // 4
마무리
Destructuring 할당은 다른 사용 사례 중에서 기본값 할당, 변수 교체, 여러 수준의 개체 또는 배열 중첩, 함수 매개 변수 작업에 사용할 수 있습니다. 보다 간결한 방식으로 복잡한 데이터 구조로 작업할 수 있는 강력하고 표현적인 방법을 제공합니다.Destructuring 할당은 다른 사용 사례 중에서 기본값 할당, 변수 교체, 여러 수준의 개체 또는 배열 중첩, 함수 매개 변수 작업에 사용할 수 있습니다. 보다 간결한 방식으로 복잡한 데이터 구조로 작업할 수 있는 강력하고 표현적인 방법을 제공합니다.
반응형
'Front-end > Javascript' 카테고리의 다른 글
| [Javascript] 열거형 Enum (0) | 2023.06.30 |
|---|---|
| [Javacript ] 변수 선언 방식 (0) | 2023.06.30 |