[자바스크립트] 자바스크립트 6가지 false 값 자세히 알아보기

자바스크립트에서 조건문이나 논리 연산에서 거짓(false)으로 평가되는 값들을 falsy 값이라고 합니다. 이러한 falsy 값들을 정확히 이해하는 것은 자바스크립트를 효과적으로 사용하기 위해 매우 중요합니다.

6가지 falsy 값

1. false:
   • 논리형 값 false 자체는 당연히 falsy 값입니다.
2. null:
   • 객체를 참조하지 않는 값으로, 아무것도 없는 상태를 나타냅니다.
3. undefined:
   • 아직 값이 할당되지 않은 변수나 존재하지 않는 객체의 프로퍼티를 참조할 때 나타나는 값입니다.
4. 0:
   • 숫자 0은 falsy 값입니다.
5. NaN:
   • Not a Number의 약자로, 숫자가 아닌 값을 나타냅니다. 예를 들어, 숫자가 아닌 문자열을 숫자로 변환하려고 할 때 발생합니다.
6. "" (빈 문자열):
   • 아무런 문자가 없는 빈 문자열도 falsy 값입니다.

falsy 값의 활용

falsy 값은 주로 조건문에서 유용하게 활용됩니다. 예를 들어, 변수에 값이 있는지 확인하거나, 특정 조건이 만족되는지 확인할 때 falsy 값을 이용하여 간결하게 표현할 수 있습니다.

JavaScript

let name = '';

if (name) {
    console.log('이름이 있습니다.');
} else {
    console.log('이름이 없습니다.');
}

코드를 사용할 때는 주의가 필요합니다.

 

위 코드에서 name 변수에 값이 없으므로 (빈 문자열이므로) else 블록이 실행됩니다.

falsy 값과 truthy 값

falsy 값과 반대로, truthy 값은 조건문에서 참(true)으로 평가되는 모든 값을 의미합니다. 즉, 위에 언급된 6가지 falsy 값을 제외한 모든 값은 truthy 값입니다. 예를 들어, 숫자 1, 문자열 "hello", 배열, 객체 등이 모두 truthy 값입니다.

falsy 값 주의 사항

• == 연산자와 === 연산자:
  • == 연산자는 두 값을 비교할 때 형 변환이 일어날 수 있지만, === 연산자는 형 변환 없이 값과 타입까지 비교합니다. 따라서 falsy 값을 비교할 때는 === 연산자를 사용하는 것이 일반적입니다.
• undefined와 null의 차이:
  • undefined는 변수가 선언되었지만 값이 할당되지 않은 상태를 나타내고, null은 값이 의도적으로 비어 있음을 나타냅니다. 둘 다 falsy 값이지만 의미가 다릅니다.

// Boolean 변환
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean("")); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false
console.log(Boolean(false)); // false
console.log(Boolean(120 / 'two')); // false (NaN -> false)

// 타입 변환 및 Boolean 변환
console.log(Boolean('')); // false
console.log(Boolean(undefined)); // false
console.log(Number(undefined)); // NaN
console.log(String(undefined)); // "undefined"
console.log(Boolean(null)); // false
console.log(Number(null)); // 0
console.log(String(null)); // "null"

// 비교 연산자
console.log(undefined == NaN); // false
console.log(undefined === NaN); // false
console.log(null == NaN); // false
console.log(null === NaN); // false
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(NaN == "NaN"); // false
console.log(NaN === "NaN"); // false
console.log(null === undefined); // false
console.log(isNaN(10)); // false
console.log(0 === false); // true

// 값이 할당되지 않은 변수, 존재하지 않는 속성, 함수의 반환값
let name;
console.log(name); // undefined
let obj = { name: 'jooing' };
console.log(obj.age); // undefined
let func = function() {};
console.log(func()); // undefined

// 빈 배열
let arr1 = [];
arr1.length = 5;
console.log(arr1); // [empty × 5]
console.log('' === false); // false

 

console.log(isNaN('test'));  // true
console.log(0 == false);     // true
console.log('' == false);     // true
console.log(null == undefined); // true
console.log('hello'.includes('ll')); // true
console.log(!!'hello');      // true
console.log(Boolean('hello')); // true
console.log(Boolean(1));     // true