js&ts에서 null 및 빈 값 체크

not연산을 통해 빈 값 체크 하기

Javascript 및 Typescript에서 빈 값인지 체크를 하기 위해서 not연산!을 많이 사용합니다.
not연산을 통해 자료형 자체에서 반환하는 값이 false인 경우 true가 되어 빈 값 인지 확인하는 경우가 많습니다.

자료형에서 false가 반환되는 값은 '', null, undefined, NaN, 0, false 이 있습니다.

if (!'') {
	console.log('빈 값입니다.);
}
if (!null) {
	console.log('빈 값입니다.);
}
if (!undefined) {
	console.log('빈 값입니다.);
}
if (!NaN) {
	console.log('빈 값입니다.);
}
if (!0) {
	console.log('빈 값입니다.);
}
if (!false) {
	console.log('빈 값입니다.);
}
              

위 코드는 전부 빈 값입니다를 호출합니다. 위 자료형들이 false를 반환하기 때문에 not연산!을 통해 빈 값인지 체크를 진행을 합니다.

다만, 개발을 진행하다 보면 빈 배열 [] 빈 객체 {} 처럼 자료형 자체에서 true를 반환하여 not 연산을 통해 빈 값이지만 처리가 안되는 경우가 있습니다.

lodash의 isEmpty 활용해서 빈 값 체크 하기

타입스크립트로 프로젝트를 진행하다보면 편한 연산을 위해 lodash를 사용하는 경우가 많습니다. 그 중 isEmpty를 활용하면 아래와 같이 빈 값 체크가 가능합니다.

_.isEmpty([]) // true
_.isEmpty({}) // true
_.isEmpty(null) // true
_.isEmpty(undefined) // true
_.isEmpty([1, 2]) // false
_.isEmpty({"a": 1}) // false

위와 같이 빈 배열 [] 빈 객체 {} 같은 경우를 체크할 수 있습니다.
다만 isEmpty같은 경우 위의 not 연산자를 통해 했던 것과 다르게 체크되는 것이 있습니다.

_.isEmpty(false) // true
_.isEmpty(true) // true
_.isEmpty(0) // true
_.isEmpty(10) // true

boolean값과 number 같은 경우 isEmpty는 값이 비어있다고 판단을 합니다.

함수를 만들어서 빈 값 체크하기

위 방법들은 각각 어느 경우에 빈 값인지 체크가 안되는 부분들이 있습니다. 그렇기에 저는 명시적으로 빈 값인지 체크하기 위한 함수를 하나 만들어서 빈 값인지 체크를 진행합니다.

isNullOrEmpty(value: any): boolean {
  return (
    !value ||
    (Array.isArray(value) && value.length === 0) ||
    (typeof value === 'object' && Object.keys(value).length === 0)
  );
}

빈 배열 [] 빈 객체 {} 및 자료형 연산자에서 false가 나오는 경우도 빈 값체크가 가능합니다. 아래는 해당 함수의 테스트 코드 입니다.

describe('isNullOrEmpty', () => {
  it('value가 0인 경우 true를 반환하는 지 확인한다.', () => {
    expect(appService.isNullOrEmpty(0)).toBe(true);
  });

  it('value가 null인 경우 true를 반환하는 지 확인한다.', () => {
    expect(appService.isNullOrEmpty(null)).toBe(true);
  });

  it('value가 undefined인 경우 true를 반환하는 지 확인한다.', () => {
    expect(appService.isNullOrEmpty(undefined)).toBe(true);
  });

  it('value가 []인 경우 true를 반환하는 지 확인한다.', () => {
    expect(appService.isNullOrEmpty([])).toBe(true);
  });

  it('value가 ""(공백)인 경우 true를 반환하는 지 확인한다.', () => {
    expect(appService.isNullOrEmpty('')).toBe(true);
  });

  it('value가 {}인 경우 true를 반환하는 지 확인한다.', () => {
    expect(appService.isNullOrEmpty({})).toBe(true);
  });

  it('value가 NaN인 경우 true를 반환하는 지 확인한다.', () => {
    expect(appService.isNullOrEmpty(NaN)).toBe(true);
  });

  it('value가 1인 경우 false를 반환하는 지 확인한다.', () => {
    expect(appService.isNullOrEmpty(1)).toBe(false);
  });

  it('value가 [1]인 경우 false를 반환하는 지 확인한다.', () => {
    expect(appService.isNullOrEmpty([1])).toBe(false);
  });
});