구조화된 객체 또는 배열을 Distructuring (비구조화, 파괴) 하여 사용하기
같이 일하시는 분의 코드를 리뷰 하던 중 처음 보는 문법을 발견했다.
let [
{
result: { riskLevelCount, riskLevelRanking, riskLevelHistory },
pending: loading,
},
execGetAnalysis,
] = (() => [{result:{riskLevelCount:[1,2,3], riskLevelRanking: [4,5,6], riskLevelHistory: [7,8,9]}, pending: false}, (a) => console.log(a) ])() ;
console.log(riskLevelCount); // 결과 : [1,2,3]
console.log(loading) // 결과 : false
React 를 공부 하면서 Hooks 에서 다음과 같이 사용하는 하는 건,
const [hasInt, setHasInt] = useState(false);
console.log(hasInt) // false;
setHasInt(true);
console.log(hasInt) // true;
그냥 받아들이고 사용하고 있었는데, 다시 보니 이해하지 못하는 문법이있다.
해당 문법은 ES6에서 제공되는 Distructuring(비구조화, 파괴) 라고 한다.
디스트럭처링(Destructuring)은 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것
2015년에 올라온 포스트인 ES6 In Depth: 디스트럭처링(Destructuring)을 보면 자세하게 설명 되어 있다.