위트있게 구조 분해 할당 사용하기
No Filled
구조 분해 할당
최근 구조 분해 할당과 관련해서 재밌는 코드를 공유받아 관련 학습 내용을 남겨두고자 한다.
기본값 갖는 새로운 이름의 변수에 할당하기
새로운 이름의 변수와 기본값을 함께 사용할 수도 있다.
const { a: nickname = 'jg', b: test = 'nah' } = { a: 'jgjgill' }
console.log(nickname) // jgjgill
console.log(test) // nah조금 낮설어 보이지만 변수명과 기본값을 한 번에 할당할 수 있어서 유용하게 느껴진다.
중첩의 복잡함을 없애서 가독성 높이기
하지만 중첩된 객체 형태에서는 어떨까?
const test = { a: { b: 'jgjgill' } }보통 다음과 같이 그대로 구조 분해 할당을 하려고 할 것이다.
const test = { a: { b: 'jgjgill' } }
const {
a: { b: nickname = 'jg', c: nah = 'nah' },
} = test
console.log(nickname) // jgjgill
console.log(nah) // nah복잡해 보인다. 하나의 중첩만 생겼음에도 굉장히 실수할 가능성이 높아진다.
중첩을 없애보자.
const test = { a: { b: 'jgjgill' } }
const { b: nickname = 'jg', c: nah = 'nah' } = test.a
console.log(nickname) // jgjgill
console.log(nah) // nah훨씬 가독성이 좋아졌고 실수할 가능성 또한 현저히 낮아질 것이다.
이와 관련해서 몇몇 오픈 소스에서도 인사이트를 얻을 수 있다.
별거 아니면서 간단한 코드이지만 굉장히 많은 것을 느꼈다.
평소 아무 생각없이 관성적으로 써온 코드에 대해 생각의 틀을 벗어날 수 있었다.