구조 분해 할당이란?

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

배열 또는 객체의 구조를 분해하여, 그 값(분해된 속성)을 개별 변수에 담는 표현식을 의미합니다.

 

 

배열 구조 분해

초기화된 배열에서 값을 가져오려면 해당 값이 있는 인덱스에 접근해 가져와야 사용을 할수 있습니다.

const arr = [1, 2, 3, 4, 5];

const firstvalue = arr[0];
const secondvalue = arr[1];
const thirdvalue = arr[2];

console.log(firstvalue, secondvalue, thirdvalue); // 1 2 3

 

위의 방법을 간단하게 해결할수 있는 방법이 있습니다.

배열에서 변수명을 선언해준뒤 arr의 값을 차례대로 할당받으면 됩니다.

const arr = [1, 2, 3, 4, 5];
const [firstvalue,secondvalue,thirdvalue] = arr;
console.log(firstvalue, secondvalue, thirdvalue); // 1 2 3

 

만약 값 사이를 생략하고 싶다면 (2를 제외한 1과 3을 얻고 싶다면) , 로 중간값을 무시할수 있습니다.

const arr = [1, 2, 3, 4, 5];
const [firstvalue, ,thirdvalue] = arr;
console.log(firstvalue, thirdvalue); // 1 3

 

나머지 남은 요소들을 전부 받고싶다면 전개구문(...arg)를 사용하여 받아 올수가 있습니다.

const arr = [1, 2, 3, 4, 5];
const [firstvalue,secondvalue, ...thirdvalue] = arr;
console.log(firstvalue, secondvalue, thirdvalue); // 1 2 [ 3, 4, 5 ]

 

 

객체 구조 분해

객체 구조 분해도 배열과 마찬가지로 { } 객체임을 알려주는 중괄호를 써서 차례대로 할당받으면 됩니다.

배열과 다른점은 배열은 변수명을 자유롭게 지정할 수 있지만 객체는 분해하려는 프로퍼티의 Key를 사용해야 합니다.

해당하는 키가 없다면 값을 가져 오지 못하게 됩니다.

const obj = {
	firstvalue : 1,
	secondvalue : 2
};
const{firstvalue,secondvalue} = obj;
const{a,b} = obj;
console.log(firstvalue, secondvalue);// 1 2
console.log(a, b);// undefined undefined

만약 키값이 아닌 다른 이름을 사용하고 싶다면 :을 붙여 사용할 변수 이름을 지정하면됩니다.

const obj = {
	firstvalue : 1,
	secondvalue : 2
};
const{firstvalue : a,secondvalue : b} = obj;
console.log(a, b);// 1 2

 

 

중첩된 객체의 구조 분해

객체 안에 객체가 들어가 있는 중첩객체에서 값을 가져 오기 위해선 해당하는 키를 계속 타고 들어가야 합니다.

var obj = {
	a: 1,
	b: {
		c: {
			d: 1
		},
		
	}
};
const num = obj.b.c.d;
console.log(num); // 1

이  부분을 구조분해할당으로 사용한다면 변수명(키)옆에 : 을 붙인다음 { }를 열어 중첩 관계를 표시하면 됩니다.

var obj = {
	a: 1,
	b: {
		c: {
			d: 1
		},
		
	}
};
const {b:{c:{d}}} = obj;
console.log(d); // 1

 

함수 인자 구조분해

함수 인자로 전달되는 배열 또는 객체에 대해서도 구조 분해 할당 표현식을 적용할 수가 있습니다.

const obj = {
	name : 'coriny',
	job : 'stratcoriny',
	hobby : ['game','singing']
};

function print(obj){
	console.log(`Hello, ${obj.name}`)
	console.log(`You are a ${obj.job}`)
	console.log(`your hobby is ${obj.hobby[0]} and ${obj.hobby[1]}`)
}
print(obj); 
/*
Hello, coriny
You are a stratcoriny
You are hobby game and singing
*/

이렇게 하면 일일이 넘겨 받은 객체에 점표기법(obj.name)을 사용하고 있습니다.

이러한 방법이 번거롭다면 객체에 각각 변수로 선언해서 값을 할당하고, 선언한 변수를 사용하면 됩니다.

인자를 작성하는 ()안에 객체 구조 분해 할당과 같이 { }로 사용할 변수명을 한뒤 변수명만 가져와서 사용할 수가 있습니다.

const obj = {
	name : 'coriny',
	job : 'stratcoriny',
	hobby : ['game','singing']
};

function print({name, job, hobby}){
	console.log(`Hello, ${name}`)
	console.log(`You are a ${job}`)
	console.log(`your hobby is ${hobby[0]} and ${hobby[1]}`)
}
print(obj); 
/*
Hello, coriny
You are a stratcoriny
You are hobby game and singing
*/

 

변수 값 교환

구조 분해 할당은 변수의 값을 교환 할때에도 사용될수 있습니다.

할당을 받는 변수와 구조 분해할 값을 서로 반대로 작성하면 됩니다.

let a = 'start';
let b = 'coriny';

[a,b] = [b, a];
console.log(a,b); // coriny start

 

 

 

 

 

배워나가는 코린이 입니다!!

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊