Medium - How to check for null in JavaScript
in Trend
Trend 파악을 Medium 기고문 요약 포스팅 - 자바스크립트에서 널체크를 하는 법; 자바스크립트에서 typeof null은 “object”를 리턴합니다, 어떻게 널체크를 할 수 있을까요?
Photo by Ben Hershey on Unsplash
What is null?
“널 값은 특정 객체의 값이 부재한다는 것을 나타냅니다. 자바스크립트의 기본 값들 중 하나입니다.” - MDN Docs
널은 자바스크립트에서 기본형으로 값이 없다는 것을 나타냅니다. 보통 의도적으로 값이 설정됩니다. 이것은 비슷한 기본형 값인 undefined와의 차이점으로 undefined는 비의도적으로 객체의 값이 없다는 것을 나타냅니다. 예를 들어 값이 선언되었으나 어떤 값으로도 할당이 되지 않으면 null이 아니라 undefined가 됩니다.
슬프게도 null에 typeof를 사용하면 object를 리턴합니다. 이것은 a historical bug in JavaScript 때문이며 절대 고쳐지지 않을 것입니다. 이 말은 널은 typeof를 사용해서 체크할 수 없다는 것이죠.
Photo by Eugene Triguba on Unsplash
null is falsy
“널은 falsy 값입니다.(불값으로 강제할 경우 false로 평가됩니다)” - Josh Clanton at Drip of JavaScript
가장 간단하게 널을 체크하는 방법은 불린값으로 강제하여 false인지 조건문에서 확인하는 것입니다.
const maybeNull = null
if(maybeNull) { console.log("Not null") } else { console.log("Could be null") } //could be null
for(let i = 0; null; i++) { console.log('Won't run) }
maybeNull ? console.log("truthy value") : consloe.log("Falsy value")
물론 이렇게하면 다른 falsy 값들과 null을 구분할 수 없습니다. 다음번에는 ==, === 연산자를 사용해 보겠습니다.
Photo by Nicholas Ruggeri on Unsplash
Falsy equality using ==
“null이 [falsy]여도 다른 자바스크립트에서 falsy 값들과 loosely equal로 고려되지 않습니다. 사실 null이 loosely equal로 간주되는 값은 null과 undefined 입니다.” - Josh Clanton at A Drip of JavaScript
자바스크립트에서 null을 체크하는 방법으로 추천되는 것중 한가지는 == 연산자를 사용해서 null과 loosely equal한지 체크하는 것입니다.
console.log("The 7 falsy values")
0 ? consloe.log("truthy") : console.log("falsy") //falsy
0n ? consloe.log("truthy") : console.log("falsy") //falsy
null ? consloe.log("truthy") : console.log("falsy") //falsy
undefined ? consloe.log("truthy") : console.log("falsy") //falsy
false ? consloe.log("truthy") : console.log("falsy") //falsy
NaN ? consloe.log("truthy") : console.log("falsy") //falsy
"" ? consloe.log("truthy") : console.log("falsy") //falsy
console.log("The value null")
console.log(null==0) // false
console.log(null==0n) // false
console.log(null==null) // true
console.log(null==undefined) // true
console.log(null==false) // false
console.log(null==NaN) // false
console.log(null=="") // false
위에서 보이듯이 null은 null, undefined에게만 loosely equal 입니다. 그리고 다른 falsy 값들과는 동일하지 않습니다. 이것은 값이 있는지 없는지 체크하는 데 유용하게 사용될 수 있습니다. null/undefined 는 둘다 값이 없음을 나타내므로 서로 loosely equal 입니다. 그래서 걔네들은 타입은 다르지만 동일한 값을 가지고 있는 것입니다.
따라서 프로그래밍을 할 때 변수가 값이 있는지 확인하려면 == null을 사용해서 null이나 undefined를 체크할 수 있습니다.
Photo by David Becker on Unsplash
Strict equality using ===
undefined를 제외하고 정확히 null값인지 체크하려면 === 연산자를 사용하면 됩니다.
console.log("The value null")
console.log(null===0) // false
console.log(null===0n) // false
console.log(null===null) // true
console.log(null===undefined) // false
console.log(null===false) // false
console.log(null===NaN) // false
console.log(null==="") // false
일반적으로 null과 undefined를 별개로 캐치하는 것이 더 좋기 때문에 ==을 사용하는 것보다는 ===을 사용해서 널을 검사하는 것이 더욱 추천됩니다.
Photo by David Becker on Unsplash
A real world example of when to check fo null
“실제로 발생하는 [‘null is not an object’]에러는 여러분이 로드되지 않은 DOM 요소를 사용하려고 할 때 발생합니다. DOM API가 null을 공백을 조회하는 객체로 리턴하기 때문입니다.” - Rollbar on the Top 10 JavaScript errors
이 타입에러는 스크립트가 로딩되기 전에 DOM 엘리먼트가 생성되지 않았을 때 발생할 수 있습니다. 스크립트는 페이지의 HTML보다 더욱 높은 곳에 있기 때문에 위에서 아래로 해석되는 것이죠. 이것의 솔루션은 페이지가 로딩이 완료되었을 때 알려주는 이벤트 리스너를 사용해서 해당 이벤트 리스너에서 스크립트를 실행하는 것입니다. 그래도 신중하게 DOM element를 사용하기 전에 null인지 체크하는 것이 좋습니다.
Photo by Denys Nevozhai on Unsplash
Use typeof anyway with falsy power
“null이 진짜 객체가 아니기 때문에 null은 오직 false값을 가지는 유일한 객체로써 empty object들은 truthy값이 됩니다” - Casey Morris in Daily JS
널을 체크하는 다른 방법은 null이 falsy값이고 비어있는 객체들은 truthy이기 때문에 null이 유일한 falsy object라는 사실을 기반으로 한 것입니다. 이것은 !연산자를 사용해서 편하게 체크할 수 있습니다.
console.log(typeof null === "object" && !null) //true
console.log(typeof {} === "object" && !{}) // false
const isNull = (value) => typeof value === "object" && !value
console.log(isNull(null)) //true
Photo by Dylan Freedom on Unsplash
Conclusion
널을 체크하는 것은 자바스크립트 개발자들에게는 일상적인 업무일 것입니다. typeof 키워드가 null에대해 “object”를 리턴하기 때문에 조금의 노력이 더 필요하죠. null은 falsy 값이지만 비어있는 객체의 값은 truthy이기 때문에 typeof null === “object” && !null은 매우 편리하게 널을 체크하는 방법입니다.
아니면 null === null , null == undefined 로 비교할 수도 있죠. 이제 null 비교하는 것에 자신감을 가지세요!
Photo by Dylan Freedom on Unsplash
Summary
- null은 falsy 값이지만 typeof의 리턴값은 “object” 이다.
- loosely equal 한것은 null 자체와 undefined이다. (null == undefined) // true
- typeof value === “object” && !value는 매우 간단하게 널을 체크할 수 있다. 비어있는 오브젝트는 truthy 값이므로 두번째 피연산자에서 false값을 나타낸다.
