모든 값에는 불리언 "기분"이 있다
자바스크립트에서는 불리언이 들어가야 할 자리에 아무 값이나 넣을 수 있다. if 문 안이든, while의 조건이든, &&나 || 옆이든 상관없다. 이때 그 값은 자동으로 true 또는 false로 변환되는데, false로 변환되는 값들을 falsy 값, 나머지는 전부 truthy 값이라고 부른다.
변환 함수도, 명시적 캐스팅도 필요 없습니다. 자바스크립트가 알아서 처리해 주거든요. 규칙 자체가 고정돼 있고 양도 적어서, falsy 값 목록만 외워두면 나머지는 자연스럽게 따라옵니다.
자바스크립트 falsy 값 전체 목록
falsy로 취급되는 값은 정확히 일곱 개뿐입니다. 이 일곱 개를 제외한 나머지는 전부 truthy라고 보면 됩니다.
이게 전부입니다. 목록은 다음과 같아요:
false— 불리언 그 자체.0과-0— 두 종류의 0.0n— BigInt 형태의 0.""— 빈 문자열 (작은따옴표, 큰따옴표, 백틱 모두 동일).null— "의도적으로 비어 있음"을 나타내는 값.undefined— "설정되지 않음"을 나타내는 값.NaN—0 / 0같은 잘못된 연산의 결과.
이 일곱 가지만 외워두세요. 그리고 어떤 값이 헷갈릴 때마다 스스로 물어보면 됩니다. "이게 저 일곱 개 중 하나인가?" 아니라면 전부 truthy입니다.
함정에 빠지기 쉬운 값: "0", [], {}
초보자들이 가장 많이 당하는 부분이 바로 여깁니다. 비어 보이는데 실제로는 truthy인 값들이 꽤 많거든요:
문자열은 길이가 0일 때만 falsy로 취급됩니다. "0"은 문자 하나짜리 문자열이라 truthy죠. 배열과 객체는 언제나 truthy입니다. 비어 있어도 마찬가지예요. 자바스크립트에서는 이들을 객체로 보는데, 객체는 내용물과 상관없이 무조건 truthy로 평가되기 때문입니다.
Python을 쓰다 넘어왔다면 이 부분이 가장 큰 사고방식 전환 포인트입니다. Python에서는 []와 {}가 falsy지만, 자바스크립트에서는 그렇지 않아요.
"비어 있음"을 제대로 확인하는 방법
[]와 {}가 truthy이기 때문에, if 조건문에 그대로 넣어서 비었는지 판단할 수 없습니다. 아래처럼 명시적으로 검사해야 해요:
문자열도 마찬가지로, 공백만 있는 문자열을 빈 값으로 처리하고 싶다면 다음과 같이 하면 됩니다:
Truthy/falsy는 어디까지나 편의를 위한 개념일 뿐, 내 데이터에서 "비어있다"가 무엇을 뜻하는지 고민하는 걸 대체할 수는 없습니다.
진짜 불리언 값으로 변환하기
값이 truthy인지 정도가 아니라, 실제로 true나 false가 필요할 때가 있습니다. 자바스크립트 불리언 변환에는 대표적인 두 가지 방식이 있습니다.
Boolean(x)는 명시적으로 불리언 변환을 하는 방법이고, !!x는 이걸 짧게 쓰는 방식이에요. 첫 번째 !가 값을 불리언으로 바꾸면서 반대로 뒤집고, 두 번째 !가 다시 원래 의미로 뒤집어 주는 거죠. 둘 다 실무에서 자주 쓰입니다. !!는 타이핑이 짧고, Boolean()은 의도가 더 명확하게 읽힌다는 차이가 있어요.
함수가 깔끔한 불리언 값을 반환해야 할 때 return 문에서 !!를 쓰는 코드를 흔히 볼 수 있습니다:
&&와 ||로 보는 truthy/falsy
자바스크립트의 논리 연산자는 true나 false를 돌려주지 않습니다. 피연산자 중 하나를 그대로 반환하죠. 어떤 값이 반환될지는 truthy/falsy 판별에 따라 달라집니다.
그래서 기본값을 지정할 때 value || defaultValue 패턴을 흔히 쓰는 겁니다. 하지만 함정이 하나 있어요. 모든 falsy 값을 똑같이 취급한다는 점인데요, 0이나 ""처럼 실제로는 유효한 입력값인 경우까지 싸잡아 걸러버립니다:
정말로 null이나 undefined일 때만 기본값으로 넘어가게 하고 싶다면, 대신 널 병합 연산자 ??를 사용하세요. 이 연산자는 별도의 문서에서 따로 다루고 있습니다.
한눈에 보는 정리
출력해서 모니터에 붙여두고, 다음으로 넘어가면 됩니다.
다음 주제: 이터레이터와 제너레이터
조건문과 반복문을 익혔으니, 이제 자바스크립트가 값을 필요할 때마다 만들어내는 방식을 살펴볼 차례입니다. 이터레이터와 제너레이터는 for...of, 스프레드 연산자, 그리고 최신 API 상당수가 동작하는 밑바탕이 되는 메커니즘인데요, 바로 이어서 다룹니다.
자주 묻는 질문
자바스크립트의 falsy 값에는 어떤 것들이 있나요?
딱 7개입니다: false, 0, -0, 0n(BigInt 0), ''(빈 문자열), null, undefined, NaN. 이 목록에 없는 건 전부 truthy예요. '0', 'false', [], {}도 전부 truthy입니다. falsy 목록만 외워두면 나머지 값은 소거법으로 판단할 수 있습니다.
빈 배열은 truthy인가요, falsy인가요?
truthy입니다. if ([]) { ... }는 블록이 실행돼요. 파이썬이나 PHP에서 넘어온 분들이 가장 자주 헷갈리는 부분인데, 배열과 객체는 내용과 상관없이 _객체_이기 때문에 무조건 truthy입니다. 배열이 비었는지 확인하려면 arr.length === 0처럼 명시적으로 비교해야 합니다.
값을 불리언으로 변환하려면 어떻게 하나요?
두 가지 방법이 있어요. 명시적으로 쓰려면 Boolean(value), 짧게 쓰려면 !!value(한 번 뒤집고 다시 뒤집는 이중 부정)입니다. 둘 다 같은 truthy/falsy 규칙을 따르고, truthy-ish 값이 아니라 실제 true/false가 필요할 때 사용합니다.
