안녕하세요.
오늘은 최근 업무에서 사용한 패턴 매칭(pattern matching) 을 소개하고자 합니다.

아직 자바스크립트에서 정식으로 패턴 매칭 문법을 지원하고 있지 않아서
builder, fuctor 를 통해 직접 구현하면 어떨까 하다가
패턴 매칭의 다양한 기능을 구현하기에는 아직 실력이 부족하다? 고 판단해서
'ts-pattern' 이라는 라이브러리를 사용했습니다.

최근 타입스크립트를 쓰면서 "정말 잘 만들어진 언어다" 라는 생각을 자주 하는데
(주변에 소개도 많이 드리고 있고)
한가지 아쉬운 점이 패턴 매칭을 지원하지 않는다는 점이었는데
얼른 자바스크립트에서도 패턴 매칭을 정식으로 지원했으면 좋겠네요!

계기

본론으로 들어가서, 최근 웹 링크를 모바일 링크로 변환하는 작업을 진행했습니다.
사용자가 휴대폰에서 웹 링크를 클릭했을 때, 휴대폰에서 앱이 실행되고
클릭한 링크와 매칭되는 모바일 페이지를 띄우기 위함이었어요.

if 문

우선 if 문을 사용한다면 다음과 같이 코드를 짤 수 있습니다.
케이스가 많아진다면, if 문을 아래 계속 적어야겠죠.
조금 가독성이 떨어지기 때문에 개선하면 좋겠지만
생각보다 나쁘지 않은 코드라고 생각해요.

switch 문

"그럼 switch 문을 사용하면, 훨씬 깔끔하게 짤 수 있지 않을까?" 라는 생각이 자연스럽게 떠오를 거에요.
하지만 case 에는 '값' 만 들어올 수 있어요. predicate 을 넣을 수가 없습니다.

패턴 매칭

하지만 패턴 매칭을 사용하면, predicate 통한 비교를 할 수 있습니다!

위의 코드에서 include 는 직접 만든 고차함수이며,

const include = (searchString) => (target) => target.includes(searchString);

match & when & otherwise 는 'ts-pattern' 라이브러리에서 지원하는 API 입니다.
'when' 은 첫번째 인자로 predicate 을 받고
predicate 의 결과값이 true 인 경우 두번재 인자 콜백을 실행합니다.

코드가 포인트 프리 스타일로 작성되어 있어 조금 풀어보자면 아래와 같습니다.

when(webLink => include('/hot-topic')(webLink), webLink => linkConverter.hotTopic(webLink))

정리

지금까지 패턴 매칭을 어떤 케이스에서 사용할 수 있는지
그리고 패턴 매칭으로 리팩토링해 가는 과정에서 아주 간략하게 패턴 매칭에 대해 살펴 보았습니다.

패턴 매칭에는 predicate 비교말고도 다양한 기능들이 있는데요.
'ts-pattern' API 를 보면서 학습해 나가는 것도 좋을 것 같아요.
아래 'ts-pattern' npm 링크 남기도록 하겠습니다.
여러분들도 보시고 한번 적용해 보면 좋을 것 같아요! 감사합니다!

https://www.npmjs.com/package/ts-pattern

0개의 댓글