December 03, 2021
개발 하다보면 조건문 사용이 잦은데, 이를 어떻게 작성해야 가독성이 좋고 불필요한 로직 실행을 줄일 수 있을까 생각하게 된다.
switch문이나 삼항연산자는 어떤 값으로 분기처리 할 때 사용한다. 반면, 조건이 복잡한 경우 if문을 사용하지만 이를 중첩으로 사용할 경우 코드가 한 없이 복잡해진다.
제일 최악인 상황은 나중에 내가 짠 코드임에도 불구하고 다시 처음부터 어떤 조건으로 분기 처리했는지 봐야할 때다. 이런 고통스러운 상황을 피하기 위해 Early return을 하려는 편이다.
Early return은 조건과 맞지 않는 결과를 일찍 반환하는 것이다. 그래서 if/else
대신 if/return
을 사용한다.
기존 회원에게는 5% 할인 쿠폰을, 오늘 이후에 가입한 회원에게 신규회원 이벤트 팝업을 띄워주는 조건문을 만들어보자.
const openEventPopup = () => {
const isCreatedBeforeEventUser = userCreatedDate - new Date() < 0
if (isCreatedBeforeEventUser) {
return <DiscountCouponModal />
} else {
return <NewbieEventModal />
}
}
이는 주로 운영한지 오래 되어 신규 회원보다 기존 회원이 더 많을 경우에 사용한다.
만약 서비스를 갓 오픈 하여 기존 회원보다 신규 회원이 더 많을 경우, 위의 코드는 불필요한 일을 여러 번 반복하는 꼴이다. 따라서, 신규 회원 팝업을 early return 하는 것이 좋다.
// 기존 회원보다 신규 회원이 더 많을 경우
const openEventPopup = () => {
const isCreatedAfterEventUser = new Date() - userCreatedDate < 0
if (isCreatedAfterEventUser) {
return <NewbieEventModal />
}
return <DiscountCouponModal />
}
만약 성별에 따라 주고자하는 할인 쿠폰이 다를 경우를 가정해보자.
const getRoom = (userGender, category) => {
const gender = ['male', 'female']
if (!gender.includes(userGender)) {
return '성별을 입력해주세요'
}
const isMale = userGender === 'male'
const isFemale = userGender === 'female'
if (isMale) {
if (category) {
// 특정 카테고리에 따른 할인 쿠폰
}
// 남성 제품 중 어디서나 사용 가능한 할인 쿠폰
}
if (isFemale) {
if (category) {
// 특정 카테고리에 따른 할인 쿠폰
}
// 여성 제품 중 어디서나 사용 가능한 할인 쿠폰
}
}
만약 성별을 정확히 입력하지 않았다면, 바로 에러 메세지를 보여주기 때문에 아래의 로직을 수행하지 않는다. 성별을 입력했고, 특정 카테고리 내에 들어갔을 경우 그에 대응하는 할인 쿠폰을 보여준다.
하지만 필요없는 곳까지 early return을 쓸 경우, 되려 가독성을 해할 수도 있다.
const updateName = name => {
// 불필요한 return
if (!name) {
return
}
this.name = name
}
위 코드는 아래처럼 사용하면 더 깔끔하게 읽힌다.
const updateName = name => {
if (name) {
this.name = name
}
}
참고