본문 바로가기
Language/HTML, JavaScript

자바스크립트 각종 NULL 처리방법 정리

by wakestand 2020. 6. 17.
반응형

일단 자바스크립트에서

NULL을 어떻게 보냐에 따라 해결방법이 두가지인데

"" 만을 NULL로 본다면

 

값 === ""

으로 비교해주면 된다

 

함수로 만들어 사용한다면

위 스크린샷과 같이

값 === "" 일 경우 true를 반환시키고

아닐 경우에는 false를 반환시키게 된다

 

코드는 다음과 같다

 

	// ""만 NULL로 봤을 경우
	function nullChk(data) { 
		if(data === "") { // 함수로 사용
			// 맞을 경우
			return true;
		} else {
			// 안맞을 경우
			return false;
		}
	}
	
	console.log(nullChk(""));    // true
	console.log(nullChk("ABC")); // false

 

다음으로는 NULL의 범위를 넓게 잡아서

"", " ", undefined, null, {}, [] 

와 같이 띄어쓰기한 빈값과 undefined, null

배열 빈값도 모두 NULL 처리할 경우에는

 

체크 내용이 많기 때문에

반드시 함수를 만들어서

함수를 끌어다 쓰는 식으로 하는 것이 좋으며

 

NULL일 경우 true,

아닐 경우 false를 반환시키면 된다

 

굳이 직접 만들지 말고

아래 내용을 가져다 쓰면 된다

 

 

사용한 코드는 아래와 같다

 

	// "", " ", null, undefined, {}, [] 도 NULL이라고 봤을 때
	var isEmpty = function(data) {
	    if(typeof(data) === 'object'){
	        if(JSON.stringify(data) === '{}' || JSON.stringify(data) === '[]'){
	            return true;
	        }else if(!data){
	            return true;
	        }
	        return false;
	    }else if(typeof(data) === 'string'){
	        if(!data.trim()){
	            return true;
	        }
	        return false;
	    }else if(typeof(data) === 'undefined'){
	        return true;
	    }else{
	        return false;
	    }
	}	
	
	console.log(isEmpty()); // true
	console.log(isEmpty(null)); // true
	console.log(isEmpty('')); // true
	console.log(isEmpty('  ')); // true
	console.log(isEmpty(undefined)); // true
	console.log(isEmpty({})); // true
	console.log(isEmpty([])); // true
	console.log(isEmpty("Value")); // false

 

마지막으로 위의 NULL 처리에서

NaN, 0도 NULL처리를 하려는 경우에는

위 함수에서 else if를 추가해주면 되는데

 

코드는 아래와 같다

 

	// "", " ", null, undefined, {}, [], NaN, 0 도 NULL이라고 봤을 때
	var isEmpty = function(data) {
	    if(typeof(data) === 'object'){
	        if(JSON.stringify(data) === '{}' || JSON.stringify(data) === '[]'){
	            return true;
	        }else if(!data){
	            return true;
	        }
	        return false;
	    }else if(typeof(data) === 'string'){
	        if(!data.trim()){
	            return true;
	        } 
	        return false;
	    }else if(typeof(data) === 'undefined'){
	        return true;
	    }else if(isNaN(data) == true){ // 신규 NaN 처리
	    	return true;
		}else if(data === 0){ // 신규 0 처리
			return true;
		}else{
	        return false;
	    }
	}	
	
	console.log("new test");
	console.log(isEmpty(parseInt(10) * "ABC")); // NaN을 만들기 위해 숫자 * 문자 true 
	console.log(isEmpty(0)); // true
	console.log("ABC"); // false

 

마지막으로 NULL 처리 시

undefined, NaN은 NULL에서 빼고 싶다면

위 코드의 else if 부분에서 

해당 항목만 제거해주면

 

원하는 항목만 NULL 처리하는

isEmpty() 함수를 만들어 사용할 수 있게 된다

 

그리고 return true, false 대신

다른 값으로 반환하고 싶다면

해당 true, false 값만

원하는 값으로 치환해주면 된다

반응형

댓글