How can I check for a blank value in JavaScript?

Angelos Chalaris · JavaScript, Type · Sep 25, 2022

JavaScript doesn't have a built-in way to check if a value is blank, but it's easy to create one. Before we do, however, we should define the behavior of such a method. The inspiration for this comes from Rails' blank? method, but modified to fit JavaScript's needs.

First of all, any falsy values should be considered blank. These include null, undefined, 0, false, '', and NaN.

const isFalsy = value => !value;

isFalsy(null); // true
isFalsy(undefined); // true
isFalsy(0); // true
isFalsy(false); // true
isFalsy(''); // true
isFalsy(NaN); // true

Secondly, empty arrays and objects should also be considered blank. This can be easily checked by using Object.keys() for both types of values.

const isEmptyCollection = value =>
  (Array.isArray(value) || value === Object(value)) &&
  !Object.keys(value).length;

isEmptyCollection([]); // true
isEmptyCollection({}); // true

In addition to the empty string (''), whitespace-only strings should be considered blank, too. A regular expression can be used to check for this.

const isWhitespaceString = value =>
  typeof value === 'string' && /^\s*$/.test(value);

isWhitespaceString(' '); // true
isWhitespaceString('\t\n\r'); // true

Finally, we can check for some commonly-used built-in objects. Invalid Date instances, as well as empty Set and Map instances should all be considered blank.

const isInvalidDate = value =>
  value instanceof Date && Number.isNaN(value.getTime());
const isEmptySet = value => value instanceof Set && value.size === 0;
const isEmptyMap = value => value instanceof Map && value.size === 0;

isInvalidDate(new Date('hello')); // true
isEmptySet(new Set()); // true
isEmptyMap(new Map()); // true

Putting everything together, we can finally set up our isBlank method.

const isFalsy = value => !value;
const isWhitespaceString = value =>
  typeof value === 'string' && /^\s*$/.test(value);
const isEmptyCollection = value =>
  (Array.isArray(value) || value === Object(value)) &&
  !Object.keys(value).length;
const isInvalidDate = value =>
  value instanceof Date && Number.isNaN(value.getTime());
const isEmptySet = value => value instanceof Set && value.size === 0;
const isEmptyMap = value => value instanceof Map && value.size === 0;

const isBlank = value => {
  if (isFalsy(value)) return true;
  if (isWhitespaceString(value)) return true;
  if (isEmptyCollection(value)) return true;
  if (isInvalidDate(value)) return true;
  if (isEmptySet(value)) return true;
  if (isEmptyMap(value)) return true;
  return false;
};

isBlank(null); // true
isBlank(undefined); // true
isBlank(0); // true
isBlank(false); // true
isBlank(''); // true
isBlank(' \r\n '); // true
isBlank(NaN); // true
isBlank([]); // true
isBlank({}); // true
isBlank(new Date('hello')); // true
isBlank(new Set()); // true
isBlank(new Map()); // true

Recommended snippets & collections

  • Prepare for your next JavaScript interview with this collection of interview questions and answers.

  • Value is plain object

    JavaScript, Type

    Checks if the provided value is an object created by the Object constructor.

  • Collection is empty

    JavaScript, Type

    Checks if the a value is an empty object/collection, has no enumerable properties or is any type that is not considered a collection.

  • Value is promise-like

    JavaScript, Type

    Checks if an object looks like a Promise.