[실무에서 필요했던 단단한 기초 시리즈] 분기처리에 사용하는 연산자 뽀개기 (feat. falsy, nullish, &&, ||, ??)

| 실무에서 일하면서 느꼈던 헷갈리기 쉬운 기초를 모아보는 시리즈

포스팅 대상 독자

• and 연산자, or 연산자를 사용할 때 결과를 별도로 찍어본다
• 조건에 따른 컴포넌트 분기 처리할 때 if문만 사용한다
• 도대체 falsy, nullish가 뭐야

요구사항 예시

• Case 1 : 데이터가 있을 때는 데이터를 화면에 표시해주고 OR 데이터가 없을 때는 'no data'를 표시해줘요.
• Case 2 : 객체의 속성을 화면에 표시하고 싶은데 해당 속성이 없을 때 예외처리를 하지 않으면 에러가 나요.

Intro

조건에 따라 다른 컴포넌트를 표시하는 일은 프론트에서 자주 겪는 문제입니다. 이 때 실무에서는 주로 && || 또는 삼항 연산자를 사용하는데요, 조건에 들어가는 데이터가 0인지, undefined인지에 따라 연산자를 다르게 써야하는 건 주니어부터 시니어까지 할 수 있는 실수입니다. 한 케이스의 분기처리를 하면서도 온갖 연산자를 써보고, 의도대로 나오는 지 일일이 확인해야 한다면 시간이 두배로 걸리겠죠? 이 참에 제대로 알아보고, 익혀봅시다.

사전 지식 - nullish, falsy

by namnamiroo

참, 거짓으로 쓰이는 true, false 외에 JavaScript가 true인 것으로 퉁치자! false인 것으로 퉁치자! 하는 truthy, falsy값이 있다는 것을 알고 계신가요? 0, undefined, NaN, null, ""(빈문자열) 은 falsy값으로 boolean의 false는 아니지만 조건식에서 false로 취급되는 특징을 가진 값들입니다.

nullish를 왜 알아야하는데?

유저의 입력 내용이 없을 때, 표시할 데이터를 아래 코드로 작성했다고 생각해보겠습니다.

    // ... 생략
    return (
        // ... 생략
        !userInput && '입력값이 없습니다.'
    )

이 때 0~9의 유효한 입력값을 가진다고 할 때, 위 코드는 의도대로 동작하지 않습니다. 숫자 10개의 입력값 중 0만 falsy값으로 인식해 &&가 'no data'를 반환하지 않기 때문입니다. 따라서 별도의 validation 조건으로 대체해주거나 혹은 nullish만 발라내주는 ?? 연산자를 사용하는 방법이 있을 것입니다.

즉, nullish는 JavaScript가 취급하는 독특한 값들 중 null, undefined만 지칭하는 용어라고 할 수 있습니다.

• falsy - null, undefined 외에 NaN(Not A Number), 0, ""(빈 문자열) 까지 포함
• nullish - 오직 null, undefined 만 속함

이 개념을 잘 이해하고 계신다면, 앞으로 만날 세 연산자들이 각각 nullish, falsy, truthy에 대해 true 또는 false로 반환한다는 흐름을 파악하기 쉬워질 거에요.

틀린 친구 만날 때까지 가보자 - &&

(조건문) && (조건문) && (조건문) ...
물론 이렇게까지 연산자를 길게 연결해두는 것은 실무에서 사용하는 방법이 아니지만, &&의 반환값에 대한 정확한 이해를 위해 기차처럼 죽 이어진 조건문 행렬을 가정해보겠습니다. &&로 연결된 식은 false를 만나는 순간 해당 값을 반환하고, 뒤에 이어진 식을 실행하지 않습니다. 전부 true라면 마지막 true를 반환합니다.
true && true && false // 반환값 false, 뒤에 뭐가 이어지건 false 만나는 순간 멈춤

맞은 친구 만날 때까지 가보자 - ||

&&, || 두 연산자 모두 falsy값을 false로 인식합니다. 다만 &&와 달리 ||는 true값을 만나면 이어지는 우측식들을 실행하지 않고 멈춥니다. 전부 false라면 마지막 false를 반환합니다.
false || false || true // 반환값 true, 뒤에 뭐가 이어지건 true 만나는 순간 멈춤

null, undefined (nullish)만 검출해보자 - ??

nullish값 ?? default
왼쪽항에 nullish가 아닌 모든 값(true, false, undefined, 0, 1, 모든 문자열 및 숫자)이 들어오면 그대로 반환하고, nullish일 경우에만 우측 항을 실행해 반환합니다. 따라서 변수에 병합해서 할당할 때, 변수의 default value 설정할 때 사용합니다.

null ?? 0                // 0을 반환
undefined ?? 0    // 0을 반환

실행 case

• !userInput && '입력값이 없습니다.'
• data && 컴포넌트A    // data가 없으면(false) 컴포넌트A에 도달하지 않음.
• true || console.log('a')   // true가 이미 등장했으면 콘솔을 찍지 않음, 실행X
• data ?? 0     // data가 nullish(null, undefined)면 0을 반환해라

연습문제

내용을 숙지했는지 확실하게 확인해보세요

1. false && false && false && false && true
2. 0 && 0 && 1 && false && true
3. false || false || false || false || true
4. 0 || 0 || 1 || false || true
5. 0 || undefined || 1 || false || true
6. true ?? 1 ?? 0
7. false ?? 1 ?? 0
8. 1 ?? null
9. undefined ?? 1
10. !1
11. !0

답/ false, 0, true, 1, 1, true, false, 1, 1, false, true

요약

or 연산자 (||)는 false 값에 대해 작동합니다.
and 연산자 (&&)는 true 값에 대해 작동합니다.
null 병합연산자 (??)는 nullish값에 대해 작동합니다.
nullish값들은 falsy값의 부분집합입니다.
falsy값에는 NaN undefined "" null, 0이 있습니다.

 

피드백은 언제나 환영합니다. 🤩

 

/ 참고 /

https://ko.javascript.info/logical-operators

논리 연산자

https://medium.com/programming-essentials/what-are-the-differences-between-falsy-and-nullish-values-7d0c1d81a20e

What Are the Differences Between Falsy and Nullish Values?