[JS] 구조분해할당

구조분해할당..정말 입에 안 붙는 단어이다
그치만 단어는 참...정이안가지만, 유용함 만큼은 만점이다!

공식문서에 따르면 구조분해할당이란? 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이라 한다.

[객체] 구조분해할당

react 를 배우면서 요부분은 많이 써봐서 자연~스럽에 익혀진 상태!

this.state.id
this.state.type
this.state.name

➡️ const { id, type, name } = this.state;

기본구조

const o = {p: 42, q: true};
const {p, q} = o;

console.log(p); // 42
console.log(q); // true

[배열] 구조분해할당

기본변수할당

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

함수가 반환한 배열

간단한 예제

function f() {
  return [1, 2];
}
?
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

잠깐! 리액트 속 함수가 반환한 배열 구조분해 찐 예제?!

React 함수형 컴포넌트 hooks를 떠올려보면! 아하! useState 함수가 반환한 배열 구조분해

const [state, setState] = useState(initialState);

useState() 함수는 state, setSate를 reurn하고 있다는 것을! useState()함수 내부를 파보지는 않았지만...느낌적인 느낌으로 봤을때 아래와 같지 않을까 싶다

const useState = (init = undefinded) => {
  let value = init;  
  const getter = () => value; //0
  const setter = next => (value = next);//0
 
  return [getter, setter]
}

const [state, setState] = useState(0)