JavaScript - array undefined element count

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 defined 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.

Example

Below is an example of counting the number of defined 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));

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 defined 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 defined 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.

Example

Below is an example of counting the number of defined 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 

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.

Using reduce() Method

The reduce() method provides another functional approach to count defined elements by accumulating a count value:

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

const countDefined = (arr = []) => {
   return arr.reduce((count, element) => {
      return element !== undefined ? count + 1 : count;
   }, 0);
};

console.log(countDefined(arr));


4


Comparison

Conclusion

Use filter().length for readability, for loop for maximum performance, or reduce() for a functional approach. All methods effectively count defined array elements while handling sparse arrays and undefined values.