반응형
[JavaScript] Null check, 빈 값 체크 v2019
JavaScript는 데이터형에 대해서 꽤 자유로운 언어입니다.
var value = 1; // Number 형 1
console.log(value, typeof value); // 1 number
value = "1" // String 형 1
console.log(value, typeof value); // 1 string
이렇게 처음에 value에 정수형 1을 넣고 변수 생성후에
로그를 찍으면 1인 정수가 나오고
문자형 '1'을 value에 넣을수 있습니다.
자바와 c 같은 타입을 확실히 검사하는 언어와는 다릅니다.
자바스크립트에서 어떤 값이 비어있는지 체크하려면
var value2 = ""
if( value2 == ""){
console.log("비어 있음");
}else{
console.log("값이 있음");
}
비어있음 출력
이렇게 하지말고
var value2 = ""
if( !value2 ){
console.log("비어 있음");
}else{
console.log("값이 있음");
}
이런식으로 not 연산을 해줍니다.
자바스크립트 자료형에서 false로 반환되는 값은
"", null, undefined, 0, NaN 이 있고
나머지는 모두 true
if('' || null || undefined || 0 || NaN){
// ...
}else{
console.log("여기가 실행");
}
if 조건식에 true로 반환되는 값이 하나도 없어서 else 문이 실행됩니다.
하지만, 어떤 값이 들어올지 모르는 상황에서 빈값이 생기는 경우는
단순히 빈문자열( ' ' ), null 값, 정의되지 않은 값(undefined) 말고
빈 배열( [] ), 빈 객체( {} ) 가 있을 수 있습니다.
그리고 중요한 0, 0은 실제로 비어있지 않은 특정값 0을 의미 할수도 있지만
이경우엔 false를 반환합니다.
그래서 어떤 값이 자료형에 상관없이 빈 값인지 알고 싶을때는
// 넘어온 값이 빈값인지 체크합니다. | |
// !value 하면 생기는 논리적 오류를 제거하기 위해 | |
// 명시적으로 value == 사용 | |
// [], {} 도 빈값으로 처리 | |
var isEmpty = function(value){ | |
if( value == "" || value == null || value == undefined || ( value != null && typeof value == "object" && !Object.keys(value).length ) ){ | |
return true | |
}else{ | |
return false | |
} | |
}; |
이런식으로 명시적으로 빈 값을 체크하는 함수를 사용합니다.
출처 : 이상학의 개발블로그 https://sanghaklee.tistory.com/3
반응형
'FE > Javascript' 카테고리의 다른 글
React Custom hook 이용하여 인원 수 체크 하기 (1) | 2024.01.31 |
---|---|
React hook 의 개념과 사용법 (0) | 2024.01.31 |
<Next.js-TypeScript-React> - 1 기본 개요 (0) | 2023.08.07 |
[Javascript] File Drag and Drop 구현 (0) | 2023.04.12 |
[Javascript] 다중 파일 다운로드 구현 (0) | 2023.02.14 |