본문 바로가기
Front-end/Javascript

[Javascript] 구조분해(Destructuring ) 할당

by sky-j 2023. 7. 11.
반응형

구조분해(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