자바스크립트는 동적 타입 언어로, 상황에 따라 자동으로 형변환이 일어난다. 이를 이해하고 활용하면 더 간결한 코드를 작성할 수 있다.
조건문에서의 불필요한 비교
// 😕 불필요하게 긴 조건문
if ('string'.length > 0) {}
if (!isNaN(10)) {}위 코드들은 명시적인 비교를 하고 있지만, 사실 불필요한 과정을 거치고 있다
조건문에서 자동으로 boolean으로 형변환 하기 때문
Truthy를 활용한 개선
// 👍 더 간결한 조건문
if ('string'.length) {} // 0이 아닌 숫자는 truthy
if (10) {} // 0이 아닌 숫자는 truthy- 조건문은 주어진 값을 자동으로 boolean으로 평가함
- 이때 ‘truthy’한 값들은 true로 평가됨
- 불필요한 비교 연산을 줄여 코드가 더 간결해짐
1. 단축평가 (Short-circuit Evaluation)
단축평가는 논리 연산자를 사용해 코드를 더 간결하게 만든다
기본적인 조건문 사용
function favoriteDog(someDog){
let favoriteDog;
if(someDog){
favoriteDog = dog;
}else{
favoriteDog = '냐옹';
}
return favoriteDog + '입니다';
}문제점
- 불필요한 임시 변수 사용
- 코드가 길어지고 복잡해짐
- 가독성이 떨어짐
단축평가를 사용한 개선
// 👍 단축평가 활용
function favoriteDog(someDog){
return (someDog || '냐옹') + '입니다'
}개선점
- 임시 변수 제거
- 코드가 간결해짐
- 의도가 더 명확해짐
2. 복잡한 조건문의 단축평가
중첩된 if문 사용
// 😱 복잡한 중첩 조건문
const getActiveUserName(user, isLogin){
if (isLogin){
if (user) {
if (user.name){
return user.name
} else {
return '이름없음'
}
}
}
}문제점
- 중첩된 if문으로 인한 복잡성
- 코드의 깊이가 깊어짐
- 유지보수가 어려움
단축평가로 개선
// 👍 단축평가로 개선된 버전
const getActiveUserName(user, isLogin){
if (isLogin && user){
return user.name || '이름없음'
}
}개선점
- 조건문의 깊이가 줄어듦
- 로직이 명확해짐
- 코드의 가독성 향상
주의사항
- 과도한 단축평가는 오히려 가독성을 해칠 수 있음
- 팀의 코딩 컨벤션을 고려해야 함
- 복잡한 로직에서는 명시적인 조건문이 더 좋을 수 있음
Hello