smart function parameters

자바스크립트 다시 한번 꼼꼼히 다지던 중 구조분해 할당 파트에서 아주 좋은 내용을 읽었다. 똑똑한 매개변수 사용이라.. 단순히 함수를 실행할 때 보다도 리액트 생각이 번뜩 났다.

리액트 프로젝트를 완성 해 갈수록 컴포넌트간에 넘겨 주는 props는 점점 지저분해지곤 한다. 한줄에 다 담을 수 없을 만큼.

나 같은 경우 컴포넌트들의 계층구조가 조금만 복잡해져도 props를 명징하게 넘겨주는게 너무 어려웠다. 나름대로 props를 통째로 넘겨줄 객체를 만들어서 활용 해 보기도 했는데, 코드라인 자체는 짧아졌어도 머리속에 논리까지 간결해지진 못했다. 그런데 우연히 발견한 이 파트가 큰 도움이 될 것 같다.

글에서는 이런 상황을 예로 든다.

많은 수의 매개변수를 가진 함수를 정의 할 때, 특히 대부분의 상황에서 그 매개변수들이 기본값으로 충분할 때 어떻게 함수를 정의하는가?

//	this is ugly :

function showMenu(width = 100, height = 150, title = 'Untitled', items = []) {...}

이것을 호출 한다면?

//	ugly function arouse ugly function call :

showMenu(undefined, undefined, 'New Menu', [item1, item2]);

할당 해줄 필요 없는 매개변수에 굳이 undefined를 할당 해 줘야 하고, 그 순서를 지켜야 하는 것이 문제다. 매개변수의 길이가 클 수록 사용하기 번거롭다. 주석을 잘 달아줘야만 할 것이다.

이런 상황에서 구조분해 할당이 해결책이 될 수 있다. 객체 구조분해 할당에서 key값을 찾을 수 없으면 undefined가 할당 되는 것을 활용하는 것이다.

//	better function

function showMene({
	width = 100,
	height = 150,
    title = 'Untitled',
    items = []
}) {...}

//	better call
const option = {
	title = MenuTitle : 'New Menu',
    item = contents : [item1, item2]
}
showMene(option);

주의 할 점이 있다면 인자를 최소한 빈 배열이라도 넘겨줘야 한다는 것이다. 이점 또한 함수를 정의 할 때 같이 다음과 같이 처리 해 줄 수 있다.

//	way better
function showMene({
	...
} = {}) {...}