[JavaScript] 구조 분해 할당(Destructuring assignment)

---

리액트 훅으로 시작하는 개요

리액트 훅에 useState 라는 API가 있다.

useState는 최초의 상태값을 갱신해주는 역할을 한다.

 

아래와 같이 쓴다.

const [state, setState] = useState('default');

첫번째 state는 최초의 상태값이며 최초 값은 오른쪽 useState의 인자로 설정해준다.

setState는 그 다음 설정할 값들을 받는다. 디폴트에서 계속 1을 더한다거나 하는 것.

 

하지만 이 형태는 구조 분해 할당 이라는 문법을 이용해 만들어진 형태이다.

 

구조 분해 할당이 없다고 생각해보자.

그렇다면 useState API는 아래와 같은 형태 일 것이다.

const stateArr = useState('default');
const state = stateArr[0];
const setState = stateArr[1];

정확한 useState 구조를 확인하기 위해 app 함수에 useState()라고 첫번째 매개변수에 값을 아무것도 넣지 않고 콘솔에 찍어보았다.

정말 useState는 두 개의 원소로 이루어진 배열이었고, 첫번째 디폴트는 정의되지 않았다고 나온다.

---

배열에서의 구조 분해 할당

 

정한 변수에 해당 배열의 값을 하나씩 할당시켜보자.

const score = [85, 90, 95];
const [bplus, a, aplus] = score;

console.log(bplus); // 85

이는 사실 아래처럼 했어야 할 것이다.

const score = [85, 90, 95];
const bplus = score[0];
const a = score[1];
const aplus = score[2];

console.log(bplus); // 85

상당히 짧아졌다. 만약 이 score 배열이 사실 30개의 원소로 이루어졌다면?

최소 30줄로 적어야 할 일을 단 두 줄로 해결 가능하다는 것이다.

 

기본값 할당

그런데 만약에 특정 변수에는 값을 할당하지 않는다면?

그렇게 된다면 해당 변수의 값은 undefined가 뜰 것이다.

 

하지만 아래와 같은 방법으로 디폴트 값을 지정해줄 수 있다.

let arr = [1, 2, 3];
let [a = 'empty', b = 'empty', c = 'empty' , d = 'empty'] = arr;

console.log(a);	// 1
console.log(d); // 'empty'

arr 원소의 숫자를 다 할당해버려 할당받을 수가 없는 변수 d는 undefined가 아닌 미리 지정해둔 empty가 할당된다.

 

반환 값 무시

나에겐 세 개의 원소가 있는 배열이 있다. 하지만, 해당 배열의 두 번째 요소는 빼고 변수에 할당시키고 싶다.

 

아래와 같이 할당한다.

const arr = [1, 2, 3];
const [first, ,third] = arr;

console.log(third); // 3

 

스프레드 연산자를 이용한 할당

스프레드 연산자는 '...'으로 배열의 모든 값을 한번에 할당하게 도와준다.

첫번째 변수는 첫번째 변수에 두고 나머지는 다 두번째 변수에 할당하고자 한다면 아래와 같이 한다.

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

console.log(a);	// 1
console.log(_else);	//	[2, 3, 4, 5]

---

객체에서의 구조 분해 할당

 

객체의 구조 분해 할당은 형태가 비슷하지만 새로운 변수 이름으로 할당할 시 아래와 같이 이용한다.

let newObj = {first: 24, second: 'adorevoy'};
let {first: age, second: name} = newObj;

console.log(name); // 'adorevoy'

---

IE 추방 운동 팀원 모집중

---

참고:

ko.javascript.info/destructuring-assignment

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment