구조 분해 할당

구조 분해 할당(Destructuring Assignment)이란?

말뜻 그대로 구조를 분해해서 할당하는 것인데, 배열or객체에서 요소를 해체해서 개별 변수에 그 값을 담을 때 사용한다.

 

배열의 구조 분해 할당

let arr = [1, 2, 3]
let [fisrt, second, third]= arr;

console.log(arr);

//출력 : 1 2 3

 

---

 

객체의 구조 분해 할당(1)

let car = {
	model : "K5",
	color : "black",
	release : 2023
    };
  
let {model, color, release} = car

console.log(model, color, release) 

//출력 : K5 black 2023

위의 결과는 3개의 property가 있는 객체를 생성한 후에 구조 분해 할당으로 property의 value를 변수에 대입한 것

 

객체의 구조 분해 할당(2)

let car = {
	model : "K5",
	color : "black",
	release : 2023
    };
  
let {relase, model, color} = car 

console.log(model, color, release) 

//출력 : K5 black 2023

객체를 구조 분해 할당할 때는 데이터 저장 순서가 아니라 key가 기준이다.
그러므로 7번째 줄처럼 변수의 순서가 변화해도 객체 프로퍼티의 key를 기준으로 value값이 할당되므로 출력값은 변함 없다.

객체의 구조 분해 할당(3) - 함수의 매개변수가 객체일 때

function fnc({model, color, release}){
	console.log(model, color, release);
}

let car = {
	model : "K5",
	color : "black",
	relesae : 2023
    };
    
 fnc(car);
 
 //출력값 : K5 black 2023

함수 fnc에서는 전달된 객체의 프로퍼티의 value를 매개변수 model, color, release에 각각 구조 분해 할당한다.
역시나 property의 key값을 기준으로 value값이 할당된다.

 

 

 

이해한 부분을 정리하자면 구조 분해 할당은 결국 {a, b, c}처럼 새로운 변수를 만들고 값을 할당할 객체에 있는 value를 변수에 할당하기 위해 사용한다. 아마도 추후에  객체의 값을 변수로 손쉽게 넘겨주기 위한 방법으로 많이 사용되는 것 같다.

(+property의 key와 value쌍에서 key값은 변수 a,b,c와 이름이 같음)

(++)변수를 {a,b,c}와 같은 형식으로 만드는 이유는 아마 객체의 value를 할당하기 때문에 형식을 맞추기 위해서 객체 형식 안에 변수를 지정하는 것 같다. 내 주관적인 생각임.