JavaScript에서 Boolean 타입으로 평가될 때 false로 판정되는 값들을 '거짓 값(Falsy Value)'이라고 합니다. 조건문이나 논리 연산을 다룰 때 이 개념을 정확히 이해하는 것은 매우 중요합니다.
JavaScript의 대표적인 거짓 값
다음 값들은 Boolean으로 변환되면 모두 false로 평가됩니다.
- false — 불리언 리터럴 그 자체
- 0 — 숫자 0
- 빈 문자열 — "", '' 또는 ``(백틱)으로 표현된 길이가 0인 문자열
- null — 의도적으로 비어 있음을 나타내는 값
- undefined — 값이 할당되지 않은 상태
- NaN — 숫자가 아님(Not a Number)
반대로 위 목록에 속하지 않는 값(예: 비어 있지 않은 문자열, 0 이외의 숫자, 객체, 배열 등)은 모두 참 값(Truthy Value)으로 평가됩니다.
거짓 값 식별 예제 코드
아래는 JavaScript에서 거짓 값을 직접 확인할 수 있는 전체 HTML 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result{
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript에서 거짓 값 식별하기</h1>
<div class="result"></div>
<br />
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 JavaScript의 주요 거짓 값들을 확인할 수 있습니다.</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
BtnEle.addEventListener("click", () => {
if(!0){
resEle.innerHTML = '0은 boolean false로 평가됩니다 <br>';
}
if(!''){
resEle.innerHTML += " ''(빈 문자열)은 boolean false로 평가됩니다 <br>";
}
if(!null){
resEle.innerHTML += 'null은 boolean false로 평가됩니다 <br>';
}
if(!undefined){
resEle.innerHTML += 'undefined는 boolean false로 평가됩니다 <br>';
}
if(!NaN){
resEle.innerHTML += 'NaN은 boolean false로 평가됩니다 <br>';
}
});
</script>
</body>
</html>코드 설명
이 예제의 핵심 원리는 논리 NOT 연산자(!)입니다. 어떤 값 앞에 !를 붙이면 해당 값이 Boolean으로 강제 변환된 후 반전됩니다. 따라서 거짓 값에 !를 적용하면 true가 되어 if 문 내부의 코드가 실행됩니다.
버튼을 클릭하면 각각의 값(0, 빈 문자열, null, undefined, NaN)에 대해 ! 연산 결과가 true인지 검사하고, true라면 화면에 해당 값이 false로 평가된다는 메시지를 출력합니다.
실행 결과
'클릭하세요' 버튼을 누르기 전 초기 화면은 아래와 같습니다.
버튼을 클릭한 후에는 다음과 같이 각 거짓 값의 평가 결과가 화면에 표시됩니다.
마무리
거짓 값 개념은 if문, 논리 연산자(&&, ||), 기본값 할당 등 JavaScript의 다양한 곳에서 활용됩니다. 특히 변수나 파라미터의 유효성을 검사할 때 자주 사용되므로, 어떤 값이 거짓으로 평가되는지 정확히 기억해 두면 예상치 못한 버그를 예방하는 데 큰 도움이 됩니다.