Truthy / Falsy

자바스크립트에서는 boolean 값을 기대하는 구문에서 값이 true/false 중 어떤 값을 가지는가에 따라 truthy / falsy 로 구분한다. 쉽게 말해 if 문과 같은 조건문에서 boolean이 아닌 값이 조건에 들어갔을때 어떻게 판단하느냐 를 뜻한다.

truthy 값은 falsy를 제외한 모든 값 이기 때문에 falsy 값에 포커스를 맞춰 살펴보자.

자바스크립트에는 총 6가지의 falsy 값이 존재한다. 이 중 3개는 false, 0, "" (빈 문자열)로 매우 익숙한 키워드이기 때문에 나머지 3개에 대해 중점적으로 살펴보려 한다.

null

자바스크립트의 원시값 중 하나인 null이다. 정의를 살펴보면 어느 값이 의도적으로 비어있음을 나타내는 값이다 라고 쓰여있다. 보통은 그냥 값이 없다 라는 의미로 이해하고 있지만 정확히 말하면 참조하는 레퍼런스 변수의 주소값이 없다 라는 의미이다.

reference variable : 메모리 상에 생성된 인스턴스를 가리키는 변수

➡️ 즉 우리가 흔히 사용하는 변수를 뜻한다.

const inputRef = useRef<HTMLInputElement>()
if (inputRef.current === null){
    ~~~
}

즉, 위 코드의 조건은 inputRef 의 현재 대상의 주소값이 없다면, 즉 현재 해당 ref가 어떤 element도 참조하고 있지 않다면 이라는 의미로 해석된다.

여기서 유의할 부분은 없다 라는 단어인데 null은 현재 해당 변수의 주소값이 없다 라는 의미이지 주소를 저장할 공간이 없다 라는 의미가 아니다. 따라서 언제든지 주소값이 할당되어 값이 참조될수 있다.

추가적으로 null을 typeof 키워드로 확인해보면 "object" 가 나오는데 이는 자바스크립트의 유명한 구현 버그 중 하나이다.

undefined

단어 그대로 해석하면 "정의되지 않은 / 알수 없는" 등의 뜻이다.

자바스크립트의 undefined는 값이 할당되지 않은 상태 를 의미한다. "어 그러면 null이랑 뭐가 다르지?" 라는 의문이 자동으로 생기는데 두 값의 차이는 메모리 측면에서 발생한다.

undefined는 변수가 초기화 되지 않은 경우 처럼 자동으로 자바스크립트에서 할당해주는 값이다. 호이스팅을 생각해보자. 자바스크립트는 최초에 변수 선언부를 확인하여 모두 undefined로 초기화 시킨다. 이때, undefined로 초기화된 변수 자체는 메모리에 적재되지만 값이 아직 없으며 그 크기가 매우 작다.

이에 반해 null은 개발자가 의도적으로 값이 없다는 것을 나타내기 위해 사용된다. null로 선언된 변수는 현재 메모리 주소값이 없지만 추후에 주소값을 할당해야 하는 객체 포인터이기 때문에 undefined 보다 상대적으로 많은 메모리를 차지하게 된다.

정리하자면 undefined는 아직 값이 할당되지 않은 상태를 나타낼때, null은 의도적으로 값이 없다라는 것을 나타낼때 사용한다.

NaN

NaN은 Not a Number의 약자로 단어 그대로 숫자가 아닌 값이라는 뜻이다. 그런데 왜 숫자가 아닌 값을 나타내는 NaN이라는 키워드를 사용해야 하는 걸까?

자바스크립트는 브라우저에서 동적인 이벤트들을 처리하기 위해 사용되는 프로그래밍 언어이다. 따라서 사용자들의 입력값, 클릭 이벤트 등의 여러 이벤트를 처리할수 있도록 개발되었다.

사용자가 전화번호를 입력하는 입력폼을 생각해보자. 당연하게도 숫자만 입력되어야 할 것이다. 그런데 사용자가 입력시 업데이트 되는 input 값의 형태는 string이지만 실제로 확인해야하는것은 이 string을 number로 형변환한 값인것이다. 이러한 경우에 "jsk123" 등의 값을 형변환 하게 되면

let test = "jsk123"
console.log(Number(test)) // NaN

이렇게 NaN이 출력된다. 즉, 숫자가 아니라는 것이다. 이외에도 문자열과 숫자를 연산하려고 해도 NaN이 출력된다.

특이한점은

console.log(typeof Number(test)) // number

이렇게 NaN이 출력되는 변수를 typeof 키워드로 확인해보면 number로 나온다. 이유는 변수가 숫자로 변환은 되었으나 변환된 값이 숫자가 아니다 라는 것을 알려주기 위함이다.