함수 형태로 감싼다고 함수형 프로그래밍이 아니다

제목이 내 얘기였던 건 안 비밀

const signupHandler = (e) => {
  e.preventDefault();
};

const connectForm = () => {
  const form = document.getElementById("user-input");
  form.addEventListener("submit", signupHandler);
};

 

이 코드를 함수형 프로그래밍을 했다고 할 수 있을까?

정답은 '형태는 맞지만, 용도는 틀렸다'고 할 수 있다.

 

함수형 프로그래밍의 핵심은 4가지다.

• '순수' 함수일 것 (하나의 기능만 하거나, 한가지 데이터만 리턴)
• 모든 데이터를 '매개변수'로 받을 것
• 최대한 '예측'이 가능할 것
• '재사용'이 가능할 것

위 코드는 'user-input', 'signupHandler'와 같이 데이터를 매개변수로 받지 않고 하드코딩했다.

이렇게 되면 재사용하기 어려워지고, 어떤 데이터를 받을지 실행하기 전엔 모르기 때문에 예측도 어려워진다.

 

그래서 (진정한) 함수형 프로그래밍으로 코드를 바꾸면 이렇게 된다.

const signupHandler = (e) => {
  e.preventDefault();
};

const connectForm = (formId, formSubmitHandler) => {
  const form = document.getElementById(formId);
  form.addEventListener("submit", formSubmitHandler);
};

connectForm("user-input", signupHandler);

 

connectForm이 'formId', 'formSubmitHandler'라는 매개변수들을 받기 시작했고

이 함수는 이제 'user-input' 폼뿐만 아니라 다른 폼을 가져올 수 있고,

signupHandler뿐만 아니라 다른 핸들러도 사용할 수 있다.

또한 매개변수명을 통해 connectForm이 어디에 어떻게 작용할 지도 알 수 있다.