[클린코드 JS] truthy-falsy와 단축평가 다루기

1. truthy, falsy

• falsy 거짓 같은 값(8개)
  1. false
  2. 0 (숫자 zero)
  3. -0 (음수 zero)
  4. 0n (BigInt)
  5. "" (빈 문자열)
  6. null
  7. undefined
  8. NaN
• truthy 참 같은 값
  • 거짓 같은 값(8개)으로 정의된 값이 아니면 모두 참 같은 값으로 평가된다.
  • 자바스크립트는 불리언 문맥에서 형 변환이 되므로, 예를 들어 아래와 같은 참 같은 값을 true로 변환한다.

// 모두 true 조건으로서 if 블록 실행된다.
if (true)
if ({}) // 빈 배열이나 빈 객체도 모두 true이다.
if ([])
if (42)
if ("0")  // string "0"은 true이다.
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

falsy 활용 예

if (name === undefined || name === null) {
      return '사람이 없네요';
}

• 위와 같이 undefined나 null의 경우를 거르기 위한 조건을 다음과 같이 falsy를 이용하여 간단하게 리팩토링 할 수 있다.

if (!name) {        // falsy에 null과 undefined 포함된다.
    return '사람이 없네요';
}

2. 단축 평가

• 단축평가(short-circuit evalution) : 좌항에서 오른쪽으로 순차적으로 체크한다.

AND 연산자

• AND 연산자는 최우항으로 가기 전까지 모두 true여야 최우항으로 도달해서 최우항을 반환한다.

console.log(true && true && '도달 O'); // '도달 O'

• AND 연산자는 좌항부터 우항으로 순차적으로 평가하면서 falsy 확인한 즉시 그 falsy의 값을 반환된다.

console.log(true && undefined && false && null && '도달 X'); // undefined

OR 연산자

• OR 연산자는 최우항으로 가기 전까지 모두 false여야 최우항으로 도달해서 최우항을 반환한다.

console.log(false || false || '도달 O'); // '도달 O'

• OR 연산자는 좌항부터 우항으로 순차적으로 평가하면서 truthy를 확인한 즉시 그 truthy인 값을 반환된다.

console.log(false || '값1' || '값2' || '도달 X'); // 값1

리팩토링 예시 1

• 단축 평가는 기본값 표현 시에 가장 유용하다.

// 이러한 케이스를
function fetchData() {
  if (state.data) {
    return state.data;
  } else {
    return 'Fetching...';
  }
}

• 위와 같은 코드를 아래와 같이 단축평가를 활용하여 리팩토링

function fetchData() {
  return state.data || 'Fetching';
  // state.data가 존재(truthy)하면 state.data가 반환되고, 존재하지 않으면(falsy) 최우항의 'Fetching'을 반환한다.
} 

리팩토링 예시 2

function favoriteDog(someDog) {
  let favoriteDog;
  if (someDog) {
    favoriteDog = someDog;
  } else {
    favoriteDog = '냐옹';
  }
  return favoriteDog + '입니다';
}

console.log(favoriteDog());  // '냐옹입니다'
console.log(favoriteDog('포메'));  // '포메입니다'

• 위와 같은 코드를 아래와 같이 단축평가를 활용하여 리팩토링

function favoriteDog(someDog) {
  return (someDog || '냐옹') + '입니다';
}

console.log(favoriteDog());  // '냐옹입니다'
console.log(favoriteDog('포메'));  // '포메입니다'

리팩토링 예시 3

function getActiveUserName(user, isLogin) {
    if (isLogin) {
        if (user) {
            if (user.name) {
                return user.name
            } else {
                return '이름없음'
            }
        }
    }
}

• 위와 같은 코드를 아래와 같이 단축평가를 활용하여 리팩토링

function getActiveUserName(user, isLogin) {
  if (isLogin && user) {
    return user.name || '이름없음';
  }
}