[JS] 구조 분해 할당(Destructuring assignment)

구조 분해 할당이란?

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.
JavaScript는 객체와 배열에서 값들을 추출하고 변수에 할당하는 강력한 구조분해할당(Destructuring Assignment) 기능을 제공합니다. 이 기능을 사용하면 코드를 간결하게 작성하고 가독성을 향상시킬 수 있습니다.

---

객체의 속성 추출하기

객체의 속성 접근 방법과 구조 분해 할당

let a = {  
        name: "son",  
        age: 30  
    };  
// 객체 속성에 직접 접근하는 방법
console.log(a.name); // son 
console.log(a.age);  // 30

// 직접 변수에 할당하는 방법
let myName = a.name;  
let myAge = a.age;  
console.log(myName); // son  
console.log(myAge);  // 30 

// 구조분해할당을 사용하여 속성 추출
let {name, age} = a; // Destructuring Assignment  
console.log(name);   // son  
console.log(age);    // 30

 

객체의 특정 속성 분해

let c = {  
        email: "abc@gmail.com",  
        price: 300  
    };  
// 객체의 특정속성만 추출할 수도 있다.  
let {email} = c;

 

객체 분해 시 기본 값 할당

let c = {  
        email: "abc@gmail.com",  
        price: 300  
    };  
// 객체의 특정속성만 추출할 수도 있다.  
let {email} = c;

 

배열의 구조 분해 할당

• ... 연산자는 “나머지 연산자” 또는 "확산 연산자"라고도 불립니다. 이 연산자를 사용하면 배열에서 원하는 요소를 추출한 뒤 나머지 요소를 새 배열로 저장할 수 있습니다.
• 할당하는 순서는 왼쪽에서 오른쪽으로 순서대로 이루어집니다.

let g = [30, 40, 50];  

// 배열의 구조분해할당
let [h, i, j] = g;  //destructuring assignment  
console.log(h); // 30  
console.log(i); // 40  
console.log(j); // 50  

// m에 30을 할당, 나머지를 n에 할당
let [m, ...n] = g;  
console.log(m); // 30  
console.log(n); // [40, 50]  

// 배열 g를 복사하여 o에 할당
let [...o] = g;  
console.log(o); // [30, 40, 50]

 

객체 내 중첩된 구조 분해 할당

let person = {
  name: "John",
  address: {
    city: "New York",
    zipCode: "10001"
  }
};

// 중첩된 구조분해를 사용하여 주소 정보 추출
let { name, address: { city, zipCode } } = person;

console.log(name);      // "John"
console.log(city);      // "New York"
console.log(zipCode);   // "10001"

 

 

 

Reperence
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment