[javascript] null, undefined, ’‘, 0 을 손쉽게 체크하기

null, undefined, ’‘, 0 을 손쉽게 체크하는 법~

 

이래 저래 코딩을 하다보면 null, undefined 에 대한 부분을 체크하는 경우가 허다하다.

특히나 api 통신을 하다보면 해당 부분은 머 거의 달고 살 정도이다.

 

 

1.    !(not) 연산자 활용 

대략 다음과 같은 코딩을 주로 하게 된다. 명확해 보이기도 하다. 

if( testObj === null ) { 
// 어쩌고 저쩌고
}
if( testObj === undefined ) { 
// 어쩌고 저쩌고 
}
if( testObj === '' ) { 
// 어쩌고 저쩌고 
}

if( testObj !== null ) { 
// 어쩌고 저쩌고 
}
if( testObj !== undefined ) { 
// 어쩌고 저쩌고 
}
if( testObj !== '' ) { 
// 어쩌고 저쩌고 
}

근데 위의 코드를 좀 더 단순하게 표시 할 수 있다. 

if( testObj === null ) { 
// 어쩌고 저쩌고 
}
if( testObj === undefined ) { 
// 어쩌고 저쩌고 
}
if( testObj === '' ) { 
// 어쩌고 저쩌고 
}

// 위의 3가지 코드들을 다음과 같이 표현 할 수 있다.
if(!testObj){ 
// 어쩌고 저쩌고 
}


///////////////////////////////////////////////////////


if( testObj !== null ) { 
// 어쩌고 저쩌고 
}
if( testObj !== undefined ) { 
// 어쩌고 저쩌고 
}
if( testObj !== '' ) {
// 어쩌고 저쩌고 
}

// 위의 3가지 코드들을 다음과 같이 표현 할 수 있다.
if(testObj){ 
// 어쩌고 저쩌고
}

처음엔 나도 아 저거 눈으로 보기에 좀 명확하지 않은 거 같고 진짜 저게 제대로 걸러질라나 하는 의구심으로 잘 쓰질 않았다.

하지만 변수 함수 클래스 등의 코드 양이 많아지고 하다 보니 코드의 경량화는 자주 화두가 되곤 했다.

근데 저런 사소한거 고친다고 머 양이 줄겠어??? 라고 했지만 통합검색을 해보니 꽤 많이 저런 패턴의 null, undefined 를 직접 체크하는 구문이 되게 많았다. 정리하다 보니 나름 깔끔해진 if 구문과 리턴 함수가 보기도 좋았다.

 

 

 

2.   !! (double negation operator) 연산자 활용 

저거 외에도 느낌표 두개 -> !! (double negation operator) 를 사용해서 null, undefined, ''(빈문자열) 을 손쉽게 다룰 수 있다.

// 아래 코드들은 구글 개발자도구에서 바로 테스트해봐도 알 수 있다.
!!undefined  // false
!!null // false
!!""   // false
!!0    // false

만약 어떤 데이터나 결과 값을 리턴하는 함수가 있다면 위험을 무릅쓰고 null 이나 undefined 를 전달 할 필요가 없다.

특히 로그인 후 token 발급받는 경우 초기값과 로그 아웃할 시엔 token 값은 null 처리를 한다. 근데 그 token 값 확인은 주로 값이 있다면 true,  없다면 false 를 처리하는 식의 getter 함수에서 확인하다 보니 null 체크하는게 여엉 불편한게 이만 저만 아니다. 그럴때 !! 연산자로 해당 부분을 가볍게 처리 할 수 있다. 해당하지 않는 부분은 그냥 !! 연사자를 통해 false 를 전달해 주면 되는 것이다.

 

 

3.  || ( OR ) 연산자 

이것 외에도 급 생각이 난게 하나 있다. 바로 ‘OR’ 연산자 이다. 좌변 || 우변 이라고 할 시 좌변값이 있다면 true 이기에 우변을 실행하지 않는다. 만약 좌변값이 없거나 존재하지 않으면 false 이기에 true 가 나올때까지 우변에 있는 것을 실행한다. 그래서 a || b || c 형태의 여러개를 나열해서 평가할 수 도 있다.

// 0 은 false 로 판단된다. 
let a = 0 || 'text'  
console.log( a ) // 'text'

let b = undefined || 'text'  
console.log( b ) // 'text'

let c = null || 'text'  
console.log( c ) // 'text'


// 함수의 매개변수 지정시 
function test( a, b=2, c=false){ 
  const speed = 0.2;
  let resetType = a || speed;
  return resetType;
}
console.log( test(0, 1) ) // 0.2
console.log( test(null, 1) // 0.2
console.log( test(undefined, 10, true) )  // 0.2


// 글로별 변수 선언시
const Utils = Utils || {};

이것은 주로 매개변수값 지정시 보통 사용하였다. 매개변수의 디폴트값을 다 정해주면 좋겠지만 그렇지 못할 상황이 생기기도 한다.

그럴때 나름 편하게 쓸 수 있다.

 

그것 외에도 글로벌 변수 선언시 체크도 할 겸 선언할 수 도 있다.  ( 겸사겸사 undefined 체크도 하는 것이다 )