Remove null and undefined values from a JavaScript array
This post will discuss how to remove null and undefined values from an array in JavaScript.
There are several ways to remove null and undefined values from an array in JavaScript. Here are some examples of how to remove null and undefined values from an array in JavaScript:
1. Using filter() function
This function creates a new array with all elements that pass a test implemented by a provided function. The function can access the current element, its index, and the original array as arguments. The filter() function creates a new array with only the elements that satisfy the condition of the function. To remove only null and undefined values from an array using this function, we can use a function that returns true for any value that is not strictly equal to null or undefined. For example, if we have an array [1, 2, null, undefined, 3, null, 4] and we want to remove the null and undefined values, we can do:
|
1 2 3 4 5 6 7 8 9 |
const arr = [1, 2, null, undefined, 3, null, 4]; // use the filter function to remove the null and undefined values const newArr = arr.filter(function(item) { // return true if the element is not null or undefined return item !== null && item !== undefined; }); console.log(newArr); // [1, 2, 3, 4] |
ES6 arrow function (=>) allows us to write concise functions with a shorter syntax. We can use the arrow function as the callback for the filter() function. Here’s an example:
|
1 2 3 4 5 6 |
const arr = [1, 2, null, undefined, 3, null, 4]; // create a copy of the original array without the null and undefined values const newArr = arr.filter(item => item !== null && item !== undefined); console.log(newArr); // [1, 2, undefined, 3, 4] |
Note this function creates a new array, and does not remove other falsy values such as undefined, 0, "", false, or NaN. If we want to remove all falsy values from an array using this function, we can use a function that returns the same element as a boolean value. Here’s an example:
|
1 2 3 4 5 6 |
const arr = [0, 1, 2, null, undefined, 3, null, 4, "", false, NaN]; // use the filter function to remove all falsy values const newArr = arr.filter(item => item); // or arr.filter(Boolean); console.log(newArr); // [1, 2, 3, 4] |
Another way to use the filter() function is to pass a custom function that checks for specific values that we want to remove. For example, we can use a function that returns false if the value is null, empty, or blank (a string with only whitespace characters). Here is an example of using this function:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
let arr = [1, null, "", 0, false, 2, undefined, 3, NaN, " ", "\t"]; let filtered = arr.filter(function(value) { // return false if value is null or empty string if (value === null || value === "") { return false; } // return false if value is a string with only whitespace characters if (typeof value === "string" && value.trim() === "") { return false; } // otherwise return true return true; }); console.log(filtered); // [1, 0, false, 2, undefined, 3, NaN] |
2. Using splice() function
The splice() function changes the original array by removing or replacing existing elements and/or adding new elements. The function takes three arguments: a start index, a delete count, and optional items to insert. The function returns an array with the deleted elements. To remove only null and undefined values from an array using this function, we can use a for loop to iterate over the array backwards and use the splice() function to delete any element that is strictly equal to null or undefined. Here’s an example:
|
1 2 3 4 5 6 7 8 9 |
const arr = [1, 2, null, undefined, 3, null, 4]; for (let i = arr.length - 1; i >= 0; i--) { if (arr[i] === null || arr[i] === undefined) { arr.splice(i, 1); } } console.log(arr); // [1, 2, 3, 4] |
Note this function modifies the original array and does not create a new one. However, it may not be very efficient or readable for large arrays or complex values. Also, it does not remove other falsy values such as undefined, 0, "", false, or NaN. If we want to remove all falsy values from an array, we can do like:
|
1 2 3 4 5 6 7 8 9 10 |
const arr = [0, 1, 2, null, undefined, 3, null, 4, "", false, NaN]; for (let i = arr.length - 1; i >= 0; i--) { // use the `!` operator to remove all falsy values if (!arr[i]) { arr.splice(i, 1); } } console.log(arr); // [1, 2, 3, 4] |
The following code creates a new array, leaving the original array untouched. It uses a loop to iterate over each element of the array and manually filter out the falsy values. The if-statement checks if the element is not falsy. If the condition is true, the element is added to the filtered array.
|
1 2 3 4 5 6 7 8 9 10 |
const arr = [0, 1, 2, null, undefined, 3, null, 4, "", false, NaN]; let filtered = []; for (let i = 0; i < arr.length; i++) { if (arr[i]) { filtered.push(arr[i]); } } console.log(filtered); // [1, 2, 3, 4] |
3. Using Array.reduce() function
reduce() is a built-in function that applies a function to each element of an array and accumulates the result in a single value. We can use this function to create a new array with only the non-null, not undefined elements. Here’s an example:
|
1 2 3 4 5 6 7 8 9 10 |
const arr = [1, 2, null, undefined, 3, null, 4]; const newArr = arr.reduce(function (accumulator, item) { if (item !== null && item !== undefined) { accumulator.push(item); // add the element to the new array } return accumulator; }, []); // start with an empty array as the initial value console.log(newArr); // [1, 2, 3, 4] |
It also does not remove any other falsy values. If we want to remove all falsy values from an array, we can simply change the conditional statement to if (item).
That’s all about removing null and undefined values from an array in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)