복잡한 조건에 이름 붙이기

개요

코드를 작성하고 얼마 후 확인해 보면 이해하기 쉽지 않은 코드들이 너무 많다. 내가 작성 하고 내가 이해 하기 힘들면 이것은 무슨 코드인가,, 그래서 공부하고 적용해 보려고 한다. 물론 좋은코드에 정답은 없다. 하지만 더 많이 공부하고, 적용하고, 협업해 본 사람들이 기록해 둔 코드들이 정답에 가깝지 않을까? 그래서 훔치려고 한다. 토스 개발자가 작성한 기록들을,, 물론 이 또한 좋은 코드라고 할 수는 없다. 그렇지만 여러 코드들을 보다 보면 좋은 코드를 볼 수 있는 능력이 향상될 것이라 믿으며 나는 적용한다.

 

토스 개발자가 기록한 좋은 코드

https://frontend-fundamentals.com/

Frontend Fundamentals

 

 

복잡한 조건에 이름 붙이기

 

복잡한 조건식이 특별한 이름 없이 사용되면, 조건이 뜻하는 바를 한눈에 파악하기 어려워요.

---

📝 코드 예시​

다음 코드는 상품 중에서 카테고리와 가격 범위가 일치하는 상품만 필터링하는 로직이에요.

---

👃 코드 냄새 맡아보기​​

이 코드에서는 익명 함수와 조건이 복잡하게 얽혀 있어요. filter와 some, && 같은 로직이 여러 단계로 중첩되어 있어서 정확한 조건을 파악하기 어려워졌어요.

코드를 읽는 사람이 한 번에 고려해야 하는 맥락이 많아서, 가독성이 떨어져요.

---

✏️ 개선해보기​

다음 코드와 같이 조건에 명시적인 이름을 붙이면, 코드를 읽는 사람이 한 번에 고려해야 할 맥락을 줄일 수 있어요.

---

✔️ 적용하기

예시 코드와 같이 배열과 배열에서 값을 도출하는 것은 그렇게 많지 않다. 또는 map을 사용해서 배열 안의 값을 props를 통해 하위컴포넌트에서 배열과 props된 값을 비교하곤 한다. 나의 경우는 이렇다. 카카오API에서 제공하는 매장 id값과 유저가 작성한 리뷰의 매장 id 값을 비교해야 되고, 리뷰를 작성한 유저의 id값과 로그인한 유저의 id값을 비교해야 한다. 처음 작성한 코드를 확인해 보자.

 

 

작성해보니까 생각보다 복잡해 보이진 않는다. 그래도 적용해보자.

 

 

예제보다는 간단한 코드이지만 변수명을 사용함으로써

어떠한 값을 리턴하려고 하는지 조금 더 쉽게 보이는 것 같다.