[JS] 구조분해 할당

🚀구조 분해 할당이란 ?

- 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS 표현식이다.

- 디스트럭처링 할당이라고도 부른다.

 

 

- 구조 분해 할당 구문이 없던 ES5에선 다음과 같이 할당 하였다.

 

var categories = ['IT', 'life', 'TIL']; // 할당을 해주고자 하는 배열

var category1 = categories[0];
var category2 = categories[1];
var category3 = categories[2];

console.log(category1, category2, category3);
// IT life TIL

 

위 코드와 같이 배열의 인덱스를 활용하여 요소에 접근하는 방법을 사용했다.

하지만 n개를 할당해줄시 n줄의 코드작성이 필요했다.

 

---

 

그렇다면 ES6의 구조 분해 할당에 대해 알아보자.

 

먼저 알아야 할 점은 배열 구조 분해 할당의 대상은 (즉 할당문의 우변에 해당) 이터러블이어야하며,

할당 기준은 배열의 인덱스이다. 따라서 순서대로 할당된다.

 

* 배열,문자열,Map,Set : 이터러블 , 객체는 이터러블 하지 않다.

 

 

[예제-1] -구조 분해 할당 예

const categories = ['IT', 'life', 'TIL']; 

// 아래의 두 코드는 동일하게 작동한다.
const [category1, category2, category3] = ['IT', 'life', 'TIL'];
const [category1, category2, category3] = categories;

console.log(category1, category2, category3);
// IT life TIL

이렇듯 배열값을 나열해 할당해줄 수 도 있고, 배열 이름 형태로 선언할 수도 있다.

주의해야할 점은 우측에는 꼭 이터러블한 것이 와야한다는 점이다.

 

 

 

[예제-2] - 우변에 배열메소드도 사용가능

const [a, b, c ] = 'true,true,true'.split(',');
console.log([a,b,c]);

'ture'라는 문자열을 split하여 배열의 각 요소로 들어간다.

 

[결과]

 

 

 

[예제-3] - 선언과 할당 분리

선언과 할당을 분리할 수도 있다. 하지만 이경우 const 키워드를 사용할 수 없으므로 권장하지 않는다.

let x,y ;
[x,y] = [1,2];
console.log([x,y]);

 

 

 

[예제-4] - 변수 갯수

만약 좌변에 변수의 갯수가 우변의 배열요소의 갯수보다 많다면?

에러가 날것같지만 에러가 나지 않는다.

const categories = ['IT', 'TIL']; // 배열 요소의 갯수 : 2

const [category1, category2, category3] = categories; // 변수의 갯수 : 3

 

 

[결과]

하지만 category3은 할당된 값이 없으므로 undefined가 뜬다.

 

 

 

[예제-5] - 객체 구조 분해 할당

객체 구조 분해 할당의 대상(할당문의 우변)은 객체여야하며, 할당 기준은 프로퍼티 키다.

순서는 의미가 없으며,  선언된 변수이름과 프로퍼티 키가 일치하면 할당된다. 

 

const todos = [
	  { id: 1, content: 'HTML', completed: true },
	  { id: 2, content: 'CSS', completed: false },
	  { id: 3, content: 'JS', completed: false }
];

const [, {id}] = todos;
console.log(id); // 2

const content = todos;
console.log(content); // 'JS'

 

 

 

[예제-6] - 객체 구조 분해 할당 기본값

const post = ['JS-study', ['til', 'fe', 'it']];

// 기본값을 설정하지 않은 경우
const [title, categories, isPrivate] = post;
console.log(isPrivate);
// undefined

// 기본값을 설정한 경우
const [title, categories, isPrivate = false] = post;
console.log(isPrivate);
// false

기본값을 설정하지 않는다면 undefined가 나오지만,

기본값을 설정한다면 (isPrivate = false) false 값이 나온다.

 

- 참고로 title은 'JS-study'가 , categories는 ['til', 'fe', 'it']가 할당 되었다.

 

 

 

[예제-7] - 변수 값 교환

let wade = {
	  name : 'wade',
	  ranking : '1st',
};

let licat = {
	  name : 'licat',
	  ranking : '2nd',
};

[wade.ranking, licat.ranking] = [licat.ranking, wade.ranking];

console.log(wade, licat);

wade.ranking과 licat.ranking이 교환된다.

 

 

[예제-8] - 배열과 Rest 요소

Rest요소 ? 

구조 분해 할당에서 선언된 변수에 값을 할당 받을시, 나머지 요소를 배열로 받는것

 

사용방법 : 마지막 요소로 전개구문 ( . . . )을 사용한다.

 

const categories = ['IT', 'life', 'TIL', 'javascript'];
const [firstCategory, ...restCategories] = categories;

console.log(firstCategory);
// 'IT'
console.log(restCategories);
// ['life', 'TIL', 'javascript'] 나머지 요소들이 배열로 할당이 된다.

...restCategories의 값이 배열인것을 알 수 있다.

 

[결과]

 

 

* 주의

- 만약 전개구문으로 받은 값이 하나여도 배열로 받아온다.

- 무조건 배열의 마지막에서 Rest요소를 작성해야한다. 그렇지 않으면 에러가 발생한다.