구조분해 개요

• 비구조화 할당 혹은 디스트럭쳐링이라고 부른다. 오브젝트에만 활용된다고 알려졌으나 함수, 어레이에도 사용 가능하며 조건은 각각 다르나 원리는 같다.

오브젝트 예시

// 이와같은 오브젝트가 있다는 가정하에,
const location = {
	state: {
		item: {
			id: ...,
			price: ...,
			msg: ...,
			date: ...
		}
	}
}

const id = location.state.item.id;
const price = location.state.item.price;
const msg = location.state.item.msg;
const date = location.state.item.date;

같은 경로로 위와같이 변수를 여러개 만든다면 줄여서 한줄로 가능하다.

const {id, price, msg, date} = location.state.item;

함수예시

함수형으로도 사용이 가능하며 중요한건 데이터가 오브젝트 형태로 반환할 때에 가능하다.

const a = (num) => {
  const hehe = num + num;
  const hoho = hehe + num;
  const haha = hoho + hehe;
  return {haha, hoho};
};

const {haha, hoho} = a(1);

console.log(haha + hoho); // 결과는 a 라는 함수가 1이라는 숫자로 작동된 이후의 값

이와같이 특정함수의 내부변수에 접근하여 데이터를 조작하고 싶다면 구조분해를 통해 가능하다. 이는 함수가 저 특정 매개변수로 작동했을때의 결과를 말한다. 함수가 오브젝트를 return 하기 때문에 가능. 이는 MongoDb 에서 데이터 함수에 사용한것이 대표적이다. 혹은 React 에서 Cotext 컴포넌트를 사용할 때에 내부 함수들을 이렇게 불러오고 있다는것도 알면 좋을듯

• 어레이 구조분해 재지정 예시

어레이에도 구조분해를 사용할 수 있는데, 재지정이라 칭하는 이유는 이미 있는 어레이데이터에 변수를 임의로 지정하는 것이기 때문, 전개연산자를 사용하여 독특한 지정이 가능하다.

let array = [1, 2, 3, 4, 5];
// let [a1, a2, a3, a4, a5] = array; 원래는 이 방식에서 전개연산자를 응용한다.
let [a1, a2, ...newArray] = array;

console.log(a1, a2, newArray); // 1, 2, [3, 4, 5] 이렇게 나온다.

이전에 적혀있던 “이 중에 a1, a2 로 앞에 써놓으면 해당 인덱스의 어레이 값만 제외된다??” 의 의미일 확률이 높다. 저기서 지정된 array 가 인덱스의 첫째 둘째가 제외된 위에서 말한 값이 될것이다.