휴먼스케이프 Frontend Software Engineer Henry입니다.
함수를 기획하고 작성하는 것부터, 실제 사용하기까지 어떤 방식으로 진행하고 있나요? 이번 포스트에서는 함수를 작성하는 것에 초점을 맞춰서 JavaScript에서 좋은 함수를 작성하기 위한 방법과 약간의 활용 방법에 대해 알아보겠습니다.
순수 함수
아래 두 조건을 만족하는 함수를 순수 함수라고 합니다.
- 동일한 인자를 주었을 때 항상 동일한 값을 반환한다.
- 부수 효과가 없다.
순수 함수로 작성한 코드는 함수를 그저 재사용하기만 하면 되기 때문에, 모듈성이 높아지고 쉬운 디버깅과 테스트가 가능합니다.
순수 함수는 여기에서 더 자세하게 알아볼 수 있습니다.
예시
현재 디바이스가 갤럭시 S10인지 체크하는 함수입니다.
이 함수는 여러 개선점이 보이는데, 하나하나씩 짚어봅시다.
- (화웨이 S10이란 디바이스가 있다고 가정하면) 갤럭시 S10인지 화웨이 S10인지 제대로 알 수 없음.
- 현재 디바이스로만 상태를 체크할 수 있음.
따라서 아래처럼 개선할 수 있습니다.
단일 책임 함수
함수는 하나의 목적을 가져야 합니다. 둘 이상의 목적을 가질 시, 함수가 복잡해지고 변경에 용이하지 않게 됩니다.
알림을 보내는 아래의 함수를 살펴봅시다.
이 함수는 알림을 보내는 일만을 하고 있지 않습니다. 알림을 보내기 전에 알림을 허용했는지 체크하는 구문이 들어있습니다.
한 번 좋은 방향으로 개선해볼까요?
인자가 적은 함수
함수의 인자가 많으면 많아질수록, 해당 함수에 대해 테스트해야 하는 경우의 수가 더욱 많아집니다. (혹은 함수가 하나 이상의 일을 한다는 걸 묵시적으로 대변하기도 합니다.)
수학적으로 단순히 접근해도, 함수에서 테스트해야 할 경우의 수는 인자 하나마다 최소 두 배 정도 더 늘어납니다.
그러면 아래의 경우는 어떻게 할까요?
JavaScript에서는 객체를 만드는 데 큰 노력을 하지 않아도 되고, 사용하는 것도 아주 용이하게 사용할 수 있습니다. 어떤 방법으로 개선해볼 수 있을까요?
바로 객체 하나를 인수로 받는 것입니다. 이 방법을 사용하면 아래의 이점들이 생깁니다.
- Named Parameters 기능을 흉내낼 수 있습니다.
- 같은 모양의 객체를 함수에 전달하는 것만으로 사용할 수도 있습니다.
추가
최근들어 계속 발전하고 있는 JavaScript 문법 덕분에, 아래처럼 더욱 개선할 수 있습니다.
번외
함수 합성
이렇게 만든 함수들은 함수 합성이 용이합니다. 아래에 있는 pipe() 혹은 compose() 를 사용해서 함수들을 합성할 수 있습니다.
여기서 정의한 pipe() 와 compose() 는 인자로 들어온 함수들을 합성하는 일을 하는데, pipe() 는 인자로 들어온 함수 순서의 정방향, compose() 는 역방향으로 합성해서 하나의 함수를 생성합니다.
pipe() 를 실제로 사용한 예시를 한 번 볼까요?
이렇게 함수를 합성할 수 있는데, 함수의 크기가 작고 인자가 하나면 합성해서 사용하기에 최적의 환경이 만들어집니다. (함수가 조각같은 느낌이라 재사용하기도 편해집니다.)
JavaScript에서 좋은 함수를 작성하기 위한 방법들을 알아보았습니다. 감사합니다 :)
참고하면 좋을 곳
Get to know us better!
Join our official channels below.
Telegram(EN) : t.me/Humanscape
KakaoTalk(KR) : open.kakao.com/o/gqbUQEM
Website : humanscape.io
Medium : medium.com/humanscape-ico
Facebook : www.facebook.com/humanscape
Twitter : twitter.com/Humanscape_io
Reddit : https://www.reddit.com/r/Humanscape_official
Bitcointalk announcement : https://bit.ly/2rVsP4T
Email : support@humanscape.io
