How to remove empty elements from an array in Javascript

ByAnas Kiani

In this article, we will discuss how to remove empty elements from an array in Javascript. As you know that arrays are the fundamental part of javascript programming. Empty elements are also called falsy values. Empty elements include the empty string ” “, nan, undefined, null, false, and 0. Now here are three different methods used to remove empty elements from an array in javascript.

  • Array.reduce()
  • Array.filter()
  • For loop

1) Array.reduce()

In array.reduce() method a callback function is executed on each array element to reduce the array. The below code example shows the use of the arr.reduce() method:

const array = [1, '', 2, undefined, 3, null, 4, ''];
const filteredArray = array.reduce((accumulator, element) => {
  if (element !== '') {
    accumulator.push(element);
  }
  return accumulator;
}, []);
console.log(filteredArray);
Code Explanation

First of all, we have defined the constant variable “array”. In the second step, we have declared another const variable “filtererdArray” in which the array.reduce() method is used. A callback function is defined in which the accumulator & element are passed as parameters. The accumulator stores the accumulated value when the array.reduce() go through each element of the array. The element parameter represents the current element being processed during each iteration of the reduce() method.

2) Array.filter()

It is the most important method used in javascript programming. In this method, we define a callback function with a specific requirement & new array is created for the elements that pass our requirements. The code example for this method is given below:

const array = [1, '', 2, undefined, 3, null, 4, ''];
const filteredArray = array.filter(element => element !== '');
console.log(filteredArray);
Code Explanation

In the first step, we have declared a constant variable array. After that, we created a constant variable for the array.filter() method in which the callback function is defined. The array.filter() method checks that if each element is not an empty string ‘ ‘ & after checking it will exclude all empty elements and it will add non-empty elements to filteredArray.In the last step, filteredArray is displayed in the console.

3) For loop

For loop is one of the most important concepts in javascript programming. We can easily remove empty elements from an array by using the for loop because we can add custom conditions of our requirement in it. You can see the code example below:

const array = [1, '', 2, undefined, 3, null, 4, ''];
const filteredArray = [];
for (let i = 0; i < array.length; i++) {
  if (array[i] !== '') {
    filteredArray.push(array[i]);
  }
}
console.log(filteredArray);
Code Explanation

In the first step, we have declared a constant variable “array” that contains numbers, empty strings, null, & undefined. In the next step, we have declared a new constant variable “filteredArray” with an empty array. In the third step, for loop is used in which for loop iterates through the array elements & it will not stop iterating until “i” is less than the array length. In every iteration of for loop, “i” is incremented by “1”.

In the next step, a condition is applied that if the value of i is not equal to an empty string then the value is added to the filteredArray & in the end only non-empty elements are left in the filteredArray.In the last step filtered array is displayed in the console.

Conclusion

All the above methods can remove empty elements from an array in Javascript. All methods are important for javascript programming. You can choose any method to remove empty elements from an array in javascript depending on your requirements and preferences.

Similar Posts