[JavaScript]문자열이 null인지 빈 값인지 체크하는 방법

문자열이 null인지 빈 값인지 체크하는 방법

JavaScript에서 문자열이 null인지 혹은 빈 값인지 체크해야 하는 상황이 발생할 수 있습니다.

 

만약, null이 할당된 문자열 변수에서 toString() 메서드를 호출하면, 다음과 같이 TypeError가 발생하므로 문자열이 null 및 undefined인지 체크하는 습관을 길들이는 게 좋습니다.

const strValue = null;
strValue.toString(); // Uncaught TypeError: Cannot read properties of null (reading 'toString')

참고로 문자열 빈 값은 문자열 변수가 "" 또는 ''으로 할당된 경우를 의미합니다.

const strValue = ""; // 또는 ''으로 할당된 경우

이번 포스팅은 JavaScript에서 문자열이 null인지 빈 값인지 확인할 수 있는 유용한 방법을 소개합니다.

---

null  및 undefined 체크 방법

JavaScript에서 null 또는 undefined인지 체크하는 방법으로 동치 연산자(===)를 사용할 수 있습니다.

const strValue = null;

if(strValue !== null && strValue !== undefined) {
  // null 및 undefined가 아닌 경우 실행되는 로직
} else {
  // null 및 undefined인 경우 실행되는 로직
}

동치 연산자를 사용하여 null 또는 undefined를 체크할 수 있지만, 이 방법의 단점은 타이핑을 많이 해야한다는 것입니다.

 

더 간결한 코드를 작성하기 위해 !! 연산자를 사용합니다. JavaScript에서 null, undefined를 false로 간주하지만, null과 undefined가 false라는 의미는 아닙니다.

null == false;  // false
null === false; // false

undefined == false;  // false
undefined === false; // false

하지만, null과 undefined 앞에 !! 연산자를 사용하면, Boolean 값으로 변환되므로 다음 예제는 true를 반환합니다.

!!null == false;  // true
!!null === false; // true

!!undefined == false;  // true
!!undefined === false; // true

따라서, null과 undefined를 체크하는 조건식을 더 간결하게 작성할 수 있습니다.

const strValue = null;

if(!!strValue) {
  // true인 경우(null 및 undefined가 아닌 경우) 실행되는 로직
} else {
  // false인 경우 실행되는 로직
}

---

문자열이 빈 값인지 체크하는 방법

문자열이 빈 값인지 체크하는 방법으로 length 프로퍼티를 사용할 수 있습니다. 빈 값의 길이는 0이므로 length 프로퍼티의 값이 0이 아닌 경우 변수에 문자열이 할당되었다는 의미입니다.

const strValue = "";

if(strValue.length !== 0) {
  // 문자열 변수가 빈 값("")이 아닌 경우 실행되는 로직
} else {
  // 문자열 변수가 빈 값("")인 경우 실행되는 로직
}

 

하지만, length 프로퍼티를 사용하는 방법은 한 가지 문제점이 있는데, 빈 값이 다음 예제처럼 할당된 경우 length 프로퍼티의 값이 0보다 큰 문제가 발생합니다.

const strValue = "       ";

if(strValue.length !== 0) {
  // 문자열 변수가 빈 값("")이 아닌 경우 실행되는 로직
} else {
  // 문자열 변수가 빈 값("")인 경우 실행되는 로직
}

 

위 예제처럼 빈 값이 할당된 경우 trim() 메서드로 공백을 제거 후 length 프로퍼티를 호출합니다. trim() 메서드는 문자열 양 끝에 존재하는 공백이 제거된 새로운 문자열을 반환합니다.

const strValue = "       ";

if(strValue.trim().length !== 0) {
  // 문자열 변수가 빈 값("")이 아닌 경우 실행되는 로직
} else {
  // 문자열 변수가 빈 값("")인 경우 실행되는 로직
}

---

null, undefined, 빈 값을 동시에 체크 시 발생하는 문제

JavaScript에서 빈 문자열은 false로 간주합니다. 따라서, 빈 문자열에 !! 연산자를 사용하면 false를 반환합니다.

!!'';      // false
!!'     '; // true

하지만, 공백으로 구성된 문자열은 true로 간주하므로 !! 연산자를 사용할 수 없으며, 문자열 변수가 null 또는 undefined로 할당된 경우 trim() 메서드를 사용할 수 없습니다.

 

그렇기 때문에 다음 예제를 실행하면, TypeError가 발생합니다.

const strValue = null;

// Uncaught TypeError: Cannot read properties of null (reading 'trim')
if(!!strValue.trim()) {
  // 문자열 변수가 빈 값(""), null, undefined가 아닌 경우 실행되는 로직
} else {
  // 문자열 변수가 빈 값(""), null, undefined인 경우 실행되는 로직
}

---

옵셔널 체이닝을 활용하여 동시에 체크하기

옵셔널 체이닝(?.)을 활용하여 null, undefined, 빈 값을 동시에 체크할 수 있습니다.

 

옵셔널 체이닝은 평가 대상이 undefined 또는 null인 경우 undefined를 반환합니다.

 

다음 예제는 코드 한 줄로 null, undefined, 빈 값을 체크합니다.

const strValue = '    ';

if(!!strValue?.trim()) {
  // null, undefined, 빈 값이 아닌 경우 실행되는 로직
  console.log(true);
} else {
  // null, undefined, 빈 값인 경우 실행되는 로직
  console.log(false);
}

// false

[실행 순서]

순서 1. 옵셔널 체이닝이 strValue가 null인지 undefined인지 체크합니다. null 또는 undefined가 아닌 경우 trim() 메서드를 실행하고 그렇지 않으면 undefined를 반환합니다.

순서 2. !! 연산자가 null, undefined 또는 trim() 메서드 반환 결과를 Boolean 값으로 변환합니다.

 

조건식에서 매번 !! 연산자와 옵셔널 체이닝 그리고 trim() 메서드를 호출하는 것이 번거로운 경우 문자열에 값이 존재하는지 체크하는 함수를 정의 후 해당 함수를 호출하여 문자열에 값이 존재하는지 체크합니다.

function isStringValue(val) {
  return !!val?.trim()
}

console.log(isStringValue(''));        // false
console.log(isStringValue('   '));     // false
console.log(isStringValue(null));      // false
console.log(isStringValue(undefined)); // false
console.log(isStringValue('Hello'));   // true