JavaScript에서 조건문에 대한 모범 사례
이 글에서는 JavaScript에서 조건문을 작성할 때의 모범 사례를 설명합니다.
YouTube Video
JavaScript에서 조건문에 대한 모범 사례
if 문은 JavaScript 프로그램에서 기본적인 제어 구조입니다. 하지만 코드가 복잡해지면서 if 문이 많아지면 코드의 가독성이 떨어질 수 있습니다. 이번에는 JavaScript에서 if 문을 올바르게 설계하여 가독성과 유지보수를 향상시키는 모범 사례를 살펴보겠습니다.
플래그를 사용하여 코드를 단순화하세요.
불리언 값을 사용하여 여러 기준을 포함하는 조건을 단순화하세요.
피해야 할 예시
1// Bad Example
2if (isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0) {
3 console.log('Proceed to checkout');
4}개선된 예시
조건을 명확히 하기 위해 플래그를 사용하세요.
1// Good Example
2const canProceedToCheckout = isUserLoggedIn && user.hasPaymentInfo && user.cartItems.length > 0;
3
4if (canProceedToCheckout) {
5 console.log('Proceed to checkout');
6}조건문을 간단하게 유지하기
조건식이 복잡해지면 코드 가독성이 감소하므로 조건을 단순하게 유지하는 것이 필요합니다.
피해야 할 예시
1// Bad example
2if (user && user.isLoggedIn &&
3 user.permissions && user.permissions.includes('admin')) {
4 console.log('Welcome, admin!');
5}개선된 예시
조건을 구체적인 의미를 가진 변수로 분리함으로써 의도를 명확히 할 수 있습니다.
1// Good Example
2const isUserLoggedIn = user?.isLoggedIn;
3const hasAdminPermission = user?.permissions?.includes('admin');
4
5if (isUserLoggedIn && hasAdminPermission) {
6 console.log('Welcome, admin!');
7}논리 연산자의 우선순위를 명확히 하세요
JavaScript의 if 문에서 논리 연산자의 우선순위를 잘못 이해하면 의도하지 않은 동작이 발생할 수 있습니다.
피해야 할 예시
1// Bad example
2if (isAdmin && isActive || isPremium) {
3 // The precedence of `&&` is higher than `||`,
4 // so this expression is interpreted as
5 // ((isAdmin && isActive) || isPremium)
6 console.log("Access granted");
7} else {
8 console.log("Access denied");
9}개선된 예시
연산자의 우선순위가 명확하지 않을 경우 괄호를 적절히 사용하여 명확하게 할 수 있습니다.
1// Good Example
2if (isAdmin && (isActive || isPremium)) {
3 console.log("Access granted");
4} else {
5 console.log("Access denied");
6}단락 평가(short-circuit evaluation) 활용하기
JavaScript는 && (AND)와 || (OR) 연산자 모두에 대해 단락 평가를 지원합니다. 단락 평가란 조건의 결과가 평가 중 결정되면 나머지 부분은 평가되지 않는 것을 의미합니다.
AND(&&): 왼쪽이 false로 평가되면 오른쪽은 평가되지 않고 해당 값이 반환됩니다.OR(||): 왼쪽이 true로 평가되면 오른쪽은 평가되지 않고 해당 값이 반환됩니다.
피해야 할 예시
1// Bad Example
2if (user?.someComplexFunction() && user?.isLoggedIn) {
3 // ...
4}개선된 예시
이 코드에서는 user?.isLoggedIn이 false여도 user?.someComplexFunction() 함수가 호출됩니다.
단락 평가를 이해하면 불필요한 연산을 피하고 효율적인 코드를 작성할 수 있습니다.
1// Good Example
2if (user?.isLoggedIn && user?.someComplexFunction()) {
3 // ...
4}else 문 사용 최소화
else 문은 코드를 추적할 때 인지 부담을 증가시킬 수 있습니다. 대신, 초기 반환을 활용하는 것을 고려하세요.
피해야 할 예시
1// Bad Example
2function getUserRole(user) {
3 if (!user) {
4 return 'Guest';
5 } else {
6 return user.role;
7 }
8}개선된 예시
초기 반환을 사용해 조건을 명확히 하세요.
1// Good Example
2function getUserRole(user) {
3 if (!user) return 'Guest';
4 return user.role;
5}삼항 연산자의 적절한 사용
간단한 조건에서는 삼항 연산자를 사용하여 코드를 더 짧게 작성할 수 있습니다. 그러나 중첩되거나 복잡한 로직은 피하세요.
피해야 할 예시
1// Bad Example
2let message = user.isLoggedIn ? user.isAdmin ?
3 'Welcome, admin!'
4 : 'Welcome, user!'
5 : 'Please log in.';개선된 예시
조건을 나눠 가독성을 우선하세요.
1// Good Example
2if (!user.isLoggedIn) {
3 message = 'Please log in.';
4} else if (user.isAdmin) {
5 message = 'Welcome, admin!';
6} else {
7 message = 'Welcome, user!';
8}기본값과 단락 평가 활용하기
기본값과 단락 평가를 사용하여 분기를 줄이고 코드를 단순화하세요.
피해야 할 예시
1// Bad Example
2let displayName;
3if (user && user.name) {
4 displayName = user.name;
5} else {
6 displayName = 'Guest';
7}개선된 예시
이 경우 논리 연산자를 사용하면 더 간결하게 만들 수 있습니다.
1// Good Example
2displayName = user?.name || 'Guest';switch 문을 사용할 때를 적절히 구분하세요.
여러 조건이 필요한 경우, switch 문이 의도를 더 분명하게 할 수 있습니다.
피해야 할 예시
1// Bad Example
2if (status === 'success') {
3 console.log('Operation was successful.');
4} else if (status === 'error') {
5 console.error('There was an error.');
6} else if (status === 'pending') {
7 console.log('Operation is still pending.');
8} else {
9 console.log('Unknown status.');
10}개선된 예시
switch 문을 사용하면 코드를 체계적으로 정리할 수 있습니다.
1// Good Example
2switch (status) {
3 case 'success':
4 console.log('Operation was successful.');
5 break;
6 case 'error':
7 console.error('There was an error.');
8 break;
9 case 'pending':
10 console.log('Operation is still pending.');
11 break;
12 default:
13 console.log('Unknown status.');
14}사전 조건문(guard clause)과 조기 종료 조건 활용하기
가드 절은 if 문을 사용하여 함수에서 조기에 종료하는 기술입니다.
피해야 할 예시
1// Bad Example
2function processOrder(order) {
3 if (order && order.isValid) {
4 if (order.items && order.items.length > 0) {
5 // Continue processing
6 }
7 }
8}개선된 예시
가드 절을 사용해 중첩을 줄이세요.
1// Good Example
2function processOrder(order) {
3 if (!order?.isValid) return;
4 if (!order.items?.length) return;
5
6 // Continue processing
7}의도를 명확히 하기 위해 주석을 작성하세요.
복잡한 조건이나 중요한 분기에서는 짧고 명확한 주석을 추가하여 코드의 의도를 전달하세요.
피해야 할 예시
1// Bad Example
2if (stock > 10 && !isRestricted) {
3 console.log('Available for purchase.');
4}개선된 예시
의도를 명확히 하기 위해 주석을 추가하세요.
1// Good Example
2// The product must have at least 10 items in stock
3// and not be on the restricted list.
4if (stock > 10 && !isRestricted) {
5 console.log('Available for purchase.');
6}결론
JavaScript의 if 문을 효과적으로 사용하면 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.