구조 분해 할당(destructuring)이란?

MDN 에서는 구조분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 라고 정의한다.

 

구조 분해 할당이 필요한 이유는 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생긴다. 가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부가 필요한 경우가 생기는 것처럼 말이다.

 

이럴 때 객체나 배열으 ㄹ변수로 '분해'할 수 있게 해주는 문법이 구조 분해 할당(destructuring assignment) 을 사용하면 된다. 이 외에도 함수의 매개 변수가 많거나 기본값이 필요한 경우 등에서 구조 분해를 사용하기도 한다.

 

 

배열 분해 예제)

let arr = ["JungHyun", "Lee"]
 
let [firsName, surname] = arr;
 
alert(firstName); //JungHyun
alert(sername);   //Lee
 
//구조 분해 할당을 사용하지 않으면 밑에처럼 직접할당해야한다.
 
// let [firsName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

const fruit = ['WaterMelon', 'Grape']
 
const [Apple, Orange] = fruit
console.log(Apple) //WaterMelon
console.log(Orange) //Grape 
 
console.log(fruit) //['WaterMelon', 'Grape']

 

 

구조분해문법에 REST문법이 들어갈경우 예제)

// 구조분해할당을 위해 REST문을 사용했지만, ...bName 대신 ...rest
// 사용하는 경우도 많다. 다만 바꿔도 상관은 없다. 
const [aName, ...bName] = ['dama', 'jjung', 'dom', 'eddy']
console.log(aName) // 'dama'
console.log(BName) // [ 'jjung', 'dom', 'eddy' ] 

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어