배열, 객체의 속성을 해체하여 그 값을 여러 변수에 할당하는 Destructuring(구조 분해 할당) 표현식

Destructuring

Destructuring(구조 분해 할당)은 배열의 요소나 객체의 속성을 해채하여 그 값을 여려 변수에 할당 할 수 있는 자바스크립트의 표현식이다.

배열에 있는 요소 전체를 개별의 변수에 할당하고 싶거나, 요소의 일부분을 개별의 변수에 할당할때 더 간편하게 담기 위해서 사용한다.

Destructuring 사용법

Destructuring을 할 데이터의 형식에 따라 사용법이 다르다.

배열일 경우 요소를 할당할 개별의 변수명을 [ ] (대괄호)로 감싸고 배열을 할당해준다

let [변수명1, 변수명2] = 배열명

객체일 경우 속성을 할당할 개별의 변수명을  { } (중괄호)로 감싸고 객체를 할당해준다

let {변수명1, 변수명2} = 객체명

배열 Destructuring 사용 전

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

let arr0 = arr[0];
let arr1 = arr[1];
let arr2 = arr[2];
let arr3 = arr[3];
let arr4 = arr[4];

console.log(arr0, arr1, arr2, arr3, arr4); // 1 2 3 4 5

 

배열 Destructuring 사용 후

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

let [arr0, arr1, arr2, arr3, arr4] = arr;

console.log(arr0, arr1, arr2, arr3, arr4); // 1 2 3 4 5

 

 

Destructuring 사용 전에는 배열의 요소를 일일히 인덱스를 지정해줘서 할당했지만

사용 후에는 할당할 개별의 변수을 묶고 배열을 할당하는 방식으로 더 편하게 개별의 변수에 할당할 수 있어졌다.

 

또한, 배열의 요소에서 특정한 요소만 배열에 할당하고 싶을 때는 요소의 인덱스에 맞춰 , (쉼표)를 이용해서 할당할 수 있다.

특정 요소만 변수에 할당

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

let [, arr1, , arr3,] = arr;

console.log(arr1, arr3); // 2 4

 

 

---

 

객체 Destructuring 사용 전

let obj = {
	name : "ludeno",
	From : "Korea",
	Learn : "Javascript",
	BlogURL : "https://ludeno-studying.tistory.com"
}

let name = obj.name;
let From = obj.From;
let Learn = obj.Learn;
let BlogURL = obj.BlogURL;

console.log(name, From, Learn, BlogURL); 
// "ludeno" "Korea" "Javascript" "https://ludeno-studying.tistory.com"

 

 

객체 Destructuring 사용 후

let obj = {
	name : "ludeno",
	From : "Korea",
	Learn : "Javascript",
	BlogURL : "https://ludeno-studying.tistory.com"
}

let {name, From, Learn, BlogURL} = obj;

console.log(name, From, Learn, BlogURL);
// "ludeno" "Korea" "Javascript" "https://ludeno-studying.tistory.com"

 

 

배열과 마찬가지로 사용 전에는 객체의 속성을 일일히 지정해줘서 할당했지만

사용 후에는 할당할 개별의 변수을 묶고 배열을 할당하는 방식으로 더 편하게 개별의 변수에 할당할 수 있어졌다.

 

하지만, 배열과 객체의 Destructuring은 차이점이 존재한다.

배열은 원하는 변수명을 이용하여 값을 할당하며 요소를 특정할 경우 쉼표로 구분해야 하지만

객체는 속성의 Key를 변수명으로 이용해야 하며, Key를 변수명으로 사용하기에 쉼표로 구분이 불필요하다.

특정 속성만 변수에 할당

let obj = {
	name : "ludeno",
	From : "Korea",
	Learn : "Javascript",
	BlogURL : "https://ludeno-studying.tistory.com"
}

let {name, Learn} = obj;

console.log(name, Learn);
// "ludeno" "Javascript"

 

 

그렇다고 원하는 변수명으로 사용 못하는 것은 아니다.

속성 Key : 사용할 변수명을 이용하여 원하는 변수명으로 지정이 가능하다.

원하는 변수명으로 속성 값 할당

let obj = {
	name : "ludeno",
	From : "Korea",
	Learn : "Javascript",
	BlogURL : "https://ludeno-studying.tistory.com"
}

let {name:myName, Learn:language} = obj;

console.log(myName, language);
// "ludeno" "Javascript"