Count Undefined Elements in JavaScript Array

In this article, we will learn to count the number of undefined elements in an array using JavaScript. When working with arrays in JavaScript, you may encounter situations where certain elements are either explicitly set as undefined or are missing altogether (often represented by empty slots in sparse arrays).

Problem Statement

Given an array that may contain undefined values, we need to count how many elements in the array are defined (i.e., not undefined). 

Input

const arr = [12, undefined, "blabla", , true, 44];

Output

4

4 elements are defined (12, "blabla", true, and 44). Thus, the expected output is 4.

Using filter() Method

The filter() method is a built-in JavaScript array method that allows you to create a new array by applying a condition. We can use this method to filter out undefined values and then return the count of the filtered array.

following are the steps to count the number of undefined elements in an array using the filter method ?

• Define a function to accept an array as input.
  
• Use filter() to create a new array, excluding undefined elements.
  
• Get the length of the filtered array, which gives the count of defined elements.
  
• Return the count as the result.

filtered = arr.filter(el => {}

Example

Below is an example of counting the number of undefined elements in an array using the filter() method ?

const arr = [12, undefined, "blabla", ,true, 44];
const countDefined = (arr = []) => {
   let filtered;
   filtered = arr.filter(el => {
      return el !== undefined;
   });
   const { length } = filtered;
   return length;
};
console.log(countDefined(arr));

Output

4

Time Complexity: O(n), where n is the number of elements in the array, as the filter() method iterates through the entire array once.
Space Complexity: O(n), as a new array is created to store the filtered elements.

Using for Loop

Another approach to count undefined elements in an array is to manually iterate over the array using a for loop. This allows us to handle undefined values without creating a new filtered array.

following are the steps to count the number of undefined elements in an array using for loop ?

• Iterate Through the Array: A for loop is used to iterate through each element in the array, checking whether the element is undefined.
  
• Count Non-Undefined Elements: If an element is not undefined, we increment the count variable to keep track of how many defined elements exist in the array.
  
• Return the Count: After the loop completes, the count variable contains the number of non-undefined elements, which is returned.

for (let i = 0; i < arr.length; i++) {}

Example

Below is an example of counting the number of undefined elements in an array using for loop ?

const arr = [12, undefined, "blabla", , true, 44];

// Function to count non-undefined elements using a for loop
const countDefined = (arr = []) => {
   let count = 0;
   for (let i = 0; i < arr.length; i++) {
      if (arr[i] !== undefined) {  // Check if the element is not undefined
         count++;
      }
   }
   return count;
};

console.log(countDefined(arr));

Output

4

Time Complexity: O(n), where n is the number of elements in the array, as we iterate over all elements once.
Space Complexity: O(1), as no extra array is created during the iteration process.

Comparison Table

Aspect	filter() method	Using for loop
Method Used	filter() method to filter out undefined elements.	for loop to iterate over the array and count non-undefined elements.
Code Simplicity	Simple and concise, one-liner to count non-undefined elements.	Requires more lines of code, manually iterating and counting.
Performance	Efficient but creates a new array, which can impact performance for large arrays.	More performance-efficient as no extra array is created.
Use Case	Useful when functional programming style is preferred and readability is key.	Preferred when memory efficiency is crucial, as it avoids creating an extra array.