들어가며
Early Return 패턴에 대하여 들어본 적이 있나요? Early Return 패턴은 프로그래밍에서 조건문을 사용하여 함수나 메소드의 실행 흐름을 일찍 종료시키는 기법을 말합니다. 오늘은 이 패턴에 대하여 다뤄보고자 합니다.
Early Return 패턴과 중첩 if문 개선하기 (JavaScript 예제)
Early Return 패턴은 함수 내에서 조건에 맞지 않거나 더 이상 처리할 필요가 없을 경우 바로 반환하는 기법입니다. 중첩된 if 문을 간소화하고 가독성을 높이기 위해 이 패턴을 사용할 수 있습니다. 중첩 if 문을 Early Return으로 개선하는 예제를 보여드리겠습니다.
function validateUser(user) {
if (user) {
if (user.isActive) {
if (user.hasPermission) {
return true;
} else {
return "No permission";
}
} else {
return "Inactive user";
}
} else {
return "No user data";
}
}
위 코드에서는 user 객체가 존재하는지, 활성 상태인지, 권한이 있는지 차례대로 확인하고 있습니다. 조건을 만족하지 않으면 각 조건에서 반환을 하고 있지만 여러 개의 중첩된 if 문은 가독성을 떨어뜨릴 수 있습니다.
Early Return 패턴으로 개선하기
Early Return 패턴을 적용하면 조건이 맞지 않으면 바로 반환하고 나머지 로직은 처리하지 않게 할 수 있습니다. 이를 통해 코드가 더 깔끔하고 직관적으로 변합니다.
function validateUser(user) {
if (!user) {
return "No user data";
}
if (!user.isActive) {
return "Inactive user";
}
if (!user.hasPermission) {
return "No permission";
}
return true;
}
변경된 코드 설명
- 조건을 빨리 처리: if (!user)와 같은 조건을 처음에 처리하여 데이터가 없으면 바로 "No user data"를 반환합니다. 이후 불필요한 코드 실행을 방지할 수 있습니다.
- 중첩 if 문 제거: 각 조건문을 개별적으로 처리하여 코드가 더 간결해졌습니다. 불필요한 중첩을 없애고 각 조건이 실패하면 즉시 반환되므로 함수의 흐름이 명확해졌습니다.
- 가독성 향상: Early Return 패턴을 사용하여 함수의 흐름을 쉽게 파악할 수 있습니다. 함수의 각 반환 지점은 조건에 따라 직관적으로 결정됩니다.
Early Return 패턴 적용의 장점은 아래와 같이 정리할 수 있습니다.
가독성 향상: 조건을 빠르게 처리하고 불필요한 중첩을 제거하여 코드가 읽기 쉬워졌습니다.
로직 단순화: 복잡한 조건 검사를 간결하게 처리하면서 코드가 간단해졌습니다.
버그 감소: 조건을 명확히 구분하여 예기치 않은 동작을 방지할 수 있습니다.
성능 최적화: 조건에 맞지 않으면 일찍 반환하여 불필요한 처리를 하지 않게 됩니다.
마치며
Early Return 패턴은 중첩된 if 문을 간소화하고 코드의 가독성을 크게 향상시킬 수 있습니다. 이 패턴을 효과적으로 사용하면 함수의 흐름을 명확히 하고, 조건을 빠르게 처리하여 불필요한 계산을 줄일 수 있습니다.
하지만 Early Return은 각각의 반환 시점에 신경 써서 작업할 필요가 있습니다. 함수들이 반환되는 위치가 달라 생기는 일관성 결여로 인하여 오히려 코드가 직관적이지 않아질 가능성이 있습니다.
'Web' 카테고리의 다른 글
[HTML] async, defer 스크립트에 대하여 알아보자 (feat. next/script) (0) | 2025.02.11 |
---|---|
[Github Action] 공짜로 Github Organization 저장소 vercel 배포하기 (0) | 2024.12.05 |
[UX/UI] '마지막으로 로그인한 소셜 계정' 어떻게 관리하는 것일까? (0) | 2024.12.03 |
[Webview] foreground, background 전환 감지하기 (0) | 2024.12.02 |
[Next.js] next/head 안에 next/script를 넣으면 동작하지 않는다? (0) | 2024.11.27 |