Test for Empty Values in Javascript

Testing for empty values in JavaScript is a crucial aspect of programming, as it helps in validating data and maintaining the application’s integrity. JavaScript provides various data types, such as strings, numbers, booleans, objects, and arrays, and each type has its own set of characteristics when it comes to checking for empty values. In this article, we’ll discuss a precise and efficient function called empty() to check for empty values in JavaScript. We’ll cover its implementation, use cases, and compare it to other methods that developers can use to check for empty values, along with examples and common pitfalls.

Before diving into the empty() function, let’s look at some examples of JavaScript data types and how to check if they are empty:

1. Strings: A string can be considered empty if it has a length of zero or contains only whitespace characters. You can check for an empty string using the length property or a regular expression:

const emptyString = '';
console.log(emptyString.length === 0); // true

const whitespaceString = '  ';
console.log(/^\s*$/.test(whitespaceString)); // true

2. Numbers: Numbers are never considered empty, but you might want to check if they are zero, NaN (Not-a-Number), or Infinity:

const num = 0;
console.log(num === 0); // true

const notANumber = NaN;
console.log(isNaN(notANumber)); // true

const infinite = Infinity;
console.log(infinite === Infinity); // true

3. Booleans: Booleans can be either true or false, and they are never considered empty. However, you can check their values directly:

const bool = false;
console.log(bool === false); // true

4. Arrays: An array is empty if it has no elements. You can use the length property to check for empty arrays:

const emptyArray = [];
console.log(emptyArray.length === 0); // true

5. Objects: An object is empty if it has no enumerable properties. You can use a for...in loop or Object.keys() to check for empty objects:

const emptyObject = {};
console.log(Object.keys(emptyObject).length === 0); // true

Common Developer Errors

• Using loose equality (==) can cause unexpected results when checking for empty values. For example, 0 == false returns true. Always use strict equality (===) for accurate comparisons.
• When checking for empty values in arrays or objects, make sure to account for cases where the variable might be null or undefined before using the length property or Object.keys() method.
• Be cautious about using the typeof operator when checking for empty values, as it returns the data type as a string, which can lead to confusion or errors if not used correctly.

The empty() Function: A Better Alternative

This custom empty() function combines the above situations and pitfalls to return check whether a variable is empty regardless of its data type.

Similar to PHP’s empty() function, our JavaScript function takes a variable or property and tells you if the value is empty by returning true or false. However, our JavaScript function is far more precise about what kinds of data can be considered empty:

• undefined or null
• a zero-length string
• an array with no members
• an object with no enumerable properties
• Booleans and numbers are never empty, irrespective of their value.

Here’s our empty() function’s code:

const empty = (data) => {
  // Check if data is a number or boolean, and return false as they're never considered empty
  if (typeof data === 'number' || typeof data === 'boolean') {
    return false;
  }
  
  // Check if data is undefined or null, and return true as they're considered empty
  if (typeof data === 'undefined' || data === null) {
    return true;
  }

  // Check if data has a length property (e.g. strings, arrays) and return true if the length is 0
  if (typeof data.length !== 'undefined') {
    return data.length === 0;
  }

  // Check if data is an object and use Object.keys() to determine if it has any enumerable properties
  if (typeof data === 'object') {
    return Object.keys(data).length === 0;
  }

  // Return false for any other data types, as they're not considered empty
  return false;
};

Understanding the empty() Function

The function uses four conditions to test different data types:

1. Booleans and numbers: This condition always returns false. Providing this flexibility allows passing in arbitrary data.
2. Undefined and null: Helpful for setting defaults for optional function arguments. Although null is obviously not the same as undefined, for many intents and purposes they amount to the same thing (i.e. this piece of data does not have a wanted value). For example, if you query a web storage object using object syntax, a value that isn’t defined will be undefined, yet the getItem() method will return null.
3. Length property: Detects empty strings and arrays with no members. You can extend this condition to check for strings with only whitespace, but that depends on your specific use case.
4. Objects: If the Object has no keys (enumerable properties), the object is deemed empty.

Alternatives to Check for Empty Values

Developers can also use built-in methods or libraries to check for empty values in JavaScript. Some popular alternatives include:

• Lodash’s _.isEmpty() method
• jQuery’s $.isEmptyObject() method
• The Array.isArray() method combined with the length property for arrays

Frequently Asked Questions (FAQs) about Empty Functions in JavaScript