[JavaScript] 유효성 검사 (빈 값 체크)

 안녕하세요 코북입니다. 글을 썼던 게.. 언제.. 였더라..

기억도 안 나요..^^ 최근 새롭게 맡게 된 일 때문에 더 바빴던 것 같기도 하고(핑계) 오늘부터 잘하면 되죠ㅎㅎ.. 아무튼 최근에 자바스크립트 유효성 검사하면서 헷갈렸던 부분이 있어 정리하는 글을 적어보려고 합니다.

 

 

자바스크립트의 자료형에 대해서 유효성 검사(빈 값 체크)를 하는 경우가 많이 있습니다. 자바스크립트 자료형에서 빈 값을 확인하는 대표적인 방법은 not 연산자를 사용하여 처리하는 것입니다.

 

var val = "";
if(!val){
	console.log("값이 없음");
} else {
	console.log("값이 있음");
}

 

 이와 같은 방법으로 유효성 검사를 할 수 있는 이유는 

"", null, undefined, 0, NaN

다음과 같은 값들이 자바스크립트 자료형에서 false로 반환되기 때문입니다.

따라서 각각의 값들을 == 이나 === 를 사용하지 않고 not 연산자를 사용하여 간단하게 처리할 수 있습니다.

 

 

 

1. 값을 명시해야 하는 경우

 0의 경우 고려할 점은 0이 빈 값이 아닌 특정 값으로서 0을 의미할 수도 있지만 not연산자의 결과로 false를 반환한다는 것입니다. 따라서 빈 값 체크 시 0을 특정한 값으로서 인정하는 경우라면 명시적으로 빈 값을 체크해주면 됩니다.

var num = 0;
if(num == null || num == undefined){
	console.log("빈 값");
} else {
	console.log("값");
}

결과

 

 

 또한 단순히 boolean 값의 false 만 판정하고 싶을 때도 확인하려는 값을 명시해주면 됩니다.

if(chk == false)

 

 

 

2. 배열이나 객체의 경우

 배열이나 객체의 경우 new 연산자를 통해 메모리에 데이터를 저장할 공간을 할당받은 상태지만, 선언 시 빈 값이라면 not 연산자 사용 시 false로 나오게 됩니다. 이런 경우에는 length를 사용하여 빈 값인지 체크할 수 있습니다. 객체의 경우 length를 사용할 수 없기 때문에 Obejct.keys 함수를 사용하여 key값으로 구성된 배열을 생성 후 length를 통해 객체의 크기를 체크할 수 있습니다.

var arr = new Array(); // or var arr = [];

if(!arr.length){
	console.log("값이 없음");
} else {
	console.log("값이 있음");
}

var obj = new Object(); // or var obj = {};

if(!(Object.keys(obj).length)){
	console.log("값이 없음");
} else {
	console.log("값이 있음");
}

 

 

 

3. 값을 리턴하는 객체

 객체 중에 값을 리턴하는 경우엔 요구사항에 맞게 빈 값에 대한 개념을 정의하고 값을 처리해주면 된다.

new Date() // Thu Oct 27 2022 13:36:24 GMT+0900 (한국 표준시)
new Boolean() // Boolean{false}, == false
new Number() // Number{0}, == 0
new RegExp() // /(?:)/
new Error() // Error at <anonymous>:1:11

 

예를 들어 Date Object의 경우 값을 예외처리하고 싶다면 다음과 같이 조건을 줄 수 있다.

var obj = new Date();

if (typeof obj === 'object' && obj.constructor.name === 'Date' && Object.keys(obj).length < 1){
	console.log("값이 있음");
} else {
	console.log("값이 없음");
}

 

 

 

배운 점 

 유효성 검사에서 빈 값을 체크하는 경우에 대한 개념을 정리할 수 있는 시간이었다. 특히 다양한 자료형, 객체를 처리하는 경우를 생각해 볼 수 있었기 때문에 각각의 케이스에 대한 이해가 머릿속에 좀 더 체계적으로 정리가 된 것 같습니다. 코드는 정말 간단하고 쉽지만 골자는 요구사항을 판단하여 적재적소에 이 코드를 쓸 수 있느냐 없느냐인 것 같다는 생각이 듭니다.