[javascript] 구조 분해 할당

MDN 설명에 따르면 구조분해 할당은

 

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

 

그러니까 배열이나 객체를 분해한다는 말이니까 추론하자면

순서나 키값이 있는 녀석들중에 필요한 것 만 골라서 쓸 수 있다는 것이다.

 

이 분법을 몰랐을 때 리액트의 문법인 줄 알았다.

리액트의 훅폼을 사용할 때 아래와 같은 문법이 쓰인다.

const [data, setData] = useState(defaultValue);

 

단순히 처음 변수가 값의 벨류고 두번째 변수가 첫번째 변수의 값을 수정해주는 문법인 줄 알았으나

이는 useState라는 함수 안에 정의되어있던 것을 단순히 순서대로 꺼내 쓴 것 뿐이었다.

 

 

 

예를들면

 

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

const [first, second] = data;

// first : 1
// second : 2

위처럼 순서대로 꺼내쓴다.

 

선언 시점과 할당 시점이 다르더라도 상관 없다.

 

let a, b;

[a, b] = [4, 6];

// a: 4
// b: 6

 

 

 

타입스크립트 처럼 타입에 민감하거나 undefined를 대응하기위해 기본값을 설정할 수 있다.

 

let a, b;

[a=5, b=7] = [1];

//a: 1
//b: 7

 

 

순서대로 값을 받다보니 필요 없는 값이 있다면 쉼표로 구분해주면 된다.

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
//a: 1
//b: 3
// 2가 무시되었다.

 

 

객체의 경우 KEY 값을 매칭시켜서 꺼내면 된다.

 

const data = { a: 5, b:10};

const {a, b} = data;
//a: 5
//b: 10

 

객채 분해 역시 기본값을 사용할 수 있다.

 

let {a: aa = 10, b: bb = 5} = {a: 3};

//a: 3
//b: 5