본문 바로가기
📌 Front End/└ JavaScript

[JavaScript] 자바스크립트 구조 분해 할당

by 쫄리_ 2024. 9. 4.
728x90
반응형

📌 구조 분해 할당(Destructuring assignment)

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 

그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 한다. 

가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다. 

이럴 때 객체나 배열을 변수로 '분해’할 수 있게 해주는 

특별한 문법인 구조 분해 할당(destructuring assignment) 을 사용할 수 있다.


📌 배열 분해

구조 분해 할당 [first, second, third] = numbers는 numbers 배열의 값을 

별도의 변수 first, second 및 third로 추출합니다.

// Example 1: Extracting values from an array
const numbers = [1, 2, 3];

// Extracting values into separate variables
const [first, second, third] = numbers;

console.log(first);  // Output: 1
console.log(second); // Output: 2
console.log(third);  // Output: 3


📌 객체 분해

구조 분해 할당 { name, age, city } = person

person 객체에서 name, age 및 city 속성을 별도의 변수로 추출합니다.

// Example 2: Extracting properties from an object
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// Extracting properties into separate variables
const { name, age, city } = person;

console.log(name);  // Output: 'John'
console.log(age);   // Output: 30
console.log(city);  // Output: 'New York'

 


728x90
반응형