Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Removing all the empty indices from array in JavaScript
When working with JavaScript arrays, you may encounter arrays with empty indices (holes). These empty slots can cause issues in data processing. This article shows different methods to remove empty indices and create clean arrays.
Understanding Empty Indices
Empty indices in arrays are undefined slots that exist but have no value assigned:
<!DOCTYPE html>
<html>
<head>
<title>Empty Indices Example</title>
</head>
<body>
<script>
const array = [22, 45, , 56, 71, , 10];
console.log("Original array:", array);
console.log("Array length:", array.length);
console.log("Value at index 2:", array[2]); // undefined
</script>
</body>
</html>
Using filter() Method (Recommended)
The filter() method creates a new array with elements that pass a test condition. It automatically skips empty indices.
Syntax
array.filter(function(currentValue, index, arr))
Parameters
function() - A test function for each array element
currentValue - The current element being processed
index - The index of the current element
arr - The array being filtered
Example
<!DOCTYPE html>
<html>
<head>
<title>Remove Empty Indices with filter()</title>
</head>
<body>
<button onclick="removeEmpty()">Remove Empty Indices</button>
<p id="result"></p>
<script>
const array = ['Hello', 'TutorialsPoint', , , , 23, , 5, 7];
function removeEmpty() {
const filtered = array.filter(item => item);
document.getElementById("result").innerHTML =
"Original: [" + array.join(", ") + "]<br>" +
"Filtered: [" + filtered.join(", ") + "]";
}
</script>
</body>
</html>
Using forEach() Method
The forEach() method can iterate through arrays and manually build a new array without empty indices.
Syntax
array.forEach(function(currentValue, index, arr), thisValue)
Example
<!DOCTYPE html>
<html>
<head>
<title>Remove Empty Indices with forEach()</title>
</head>
<body>
<button onclick="removeEmptyWithForEach()">Remove Empty Indices</button>
<p id="forEach-result"></p>
<script>
const array = ['apple', , , 'ball', , , , , 93];
function removeEmptyWithForEach() {
const resultArray = [];
array.forEach(item => {
if (item !== undefined) {
resultArray.push(item);
}
});
document.getElementById("forEach-result").innerHTML =
"Original: [" + array.join(", ") + "]<br>" +
"Cleaned: [" + resultArray.join(", ") + "]";
}
</script>
</body>
</html>
Using While Loop
A while loop provides manual control over the filtering process:
<!DOCTYPE html>
<html>
<head>
<title>Remove Empty Indices with While Loop</title>
</head>
<body>
<button onclick="removeEmptyWithLoop()">Remove Empty Indices</button>
<p id="loop-result"></p>
<script>
const array = [, , , , 4, , 6, 22, , 7, 5, 77];
function removeEmptyWithLoop() {
const resultArray = [];
let i = 0;
while (i < array.length) {
if (array[i] !== undefined) {
resultArray.push(array[i]);
}
i++;
}
document.getElementById("loop-result").innerHTML =
"Original: [" + array.join(", ") + "]<br>" +
"Cleaned: [" + resultArray.join(", ") + "]";
}
</script>
</body>
</html>
Comparison of Methods
| Method | Performance | Readability | Best For |
|---|---|---|---|
filter() |
Fast | High | Most cases - concise and clear |
forEach() |
Medium | Medium | When you need custom logic |
| While loop | Fast | Low | Performance-critical applications |
Conclusion
The filter() method is the most efficient and readable way to remove empty indices from JavaScript arrays. It automatically handles undefined values and creates clean, compact arrays for further processing.
2K+ Views
