How to Create Custom Iterator that Skips Empty Value in JavaScript ?
Last Updated :
28 Apr, 2025
Iterators are important concepts in the world of programming. They allow developers to traverse and manipulate collections of data more efficiently and flexibly. JavaScript, being a high-level programming language, also supports iterators. You can even create a custom iterator that skips the empty values using the below methods:
Using Generator Function
The generator function can be used to yield non-empty values which can be further used to create a custom iterator that skips empty values.
Syntax:Â
// Generator function
function* skipEmptyValues(arr) {}
Example:Â The below code explains the use of generator function to create custom iterator that skips empty values.
JavaScript
function* skipEmptyValuesIterator(arr) {
for (let value of arr) {
if (value !== '') {
yield value;
}
}
}
const myArray = ['GFG', '', 3, '', 'JavaScript'];
const iterator = skipEmptyValuesIterator(myArray);
for (let value of iterator) {
console.log(value);
}
Using Array.prototype.filter and Symbol.iterator
A custom iterator class that filters out empty values using Array.prototype.filter and implements the Symbol.iterator method.
Syntax:
array.filter(value => value !== '')[Symbol.iterator]();
Example: The below code illustrates the use of the filter() method to create a custom iterator that skips empty values.
JavaScript
class SkipEmptyValuesIterator {
constructor(array) {
this.array = array;
}
[Symbol.iterator]() {
return this.array.
filter(value => value !== '')
[Symbol.iterator]();
}
}
const myArray = ['GFG', '', 3, '', 'JavaScript'];
const iterator = new SkipEmptyValuesIterator(myArray);
for (let value of iterator) {
console.log(value);
}
Using Iterator Protocol with Custom Class
The iterator protocol is implemented using a custom class, which is used to iterate over the array and skipping empty values by controlling the next method.
Example: The below code is practical implementation of the above-discussed approach to create iterator.
JavaScript
class SkipEmptyValuesIterator {
constructor(array) {
this.array = array;
}
[Symbol.iterator]() {
let currentIndex = 0;
const arrayLength = this.array.length;
return {
next: () => {
while (currentIndex < arrayLength) {
const currentValue = this.array[currentIndex++];
if (currentValue !== '') {
return { value: currentValue, done: false };
}
}
return { done: true };
}
};
}
}
const myArray = ['GFG', '', 3, '', 'JavaScript'];
const iterator = new SkipEmptyValuesIterator(myArray);
for (let value of iterator) {
console.log(value);
}
Using Array.prototype.entries and Symbol.iterator
Array.prototype.entries and Symbol.iterator are used to create a custom iterator class that skips entries with empty values.
Example:Â The below code shows how to create custom iterator using above-discussed method that skips empty values.
JavaScript
class SkipEmptyValues {
constructor(array) {
this.entries = array.entries();
}
[Symbol.iterator]() {
return {
next: () => {
let entry = this.entries.next();
while (!entry.done && entry.value[1] === '') {
entry = this.entries.next();
}
return entry;
},
};
}
}
const myArray = ['GFG', '', 3, '', 'JavaScript'];
const iterator = new SkipEmptyValues(myArray);
for (let value of iterator) {
console.log(value);
}
Output[ 0, 'GFG' ]
[ 2, 3 ]
[ 4, 'JavaScript' ]
Using Array.prototype.reduce and Symbol.iterator
Array.prototype.reduce is used to build a new array without empty values and implements the Symbol.iterator method on that array.
Example: The below code implemets the above methods to create a custom iterator that skips empty values.
JavaScript
class SkipEmptyValuesIterator {
constructor(array) {
this.values = array.reduce((acc, value) => {
if (value !== '') {
acc.push(value);
}
return acc;
}, []);
}
[Symbol.iterator]() {
return this.values[Symbol.iterator]();
}
}
const myArray = ['cat', '', 'ball', '', 'cow'];
const iterator = new SkipEmptyValuesIterator(myArray);
for (let value of iterator) {
console.log(value);
}
Similar Reads
How to Create Custom Iterators and Iterables in JavaScript ? Iterators and Iterables are important concepts in the world of programming. They allow developers to traverse and manipulate collections of data in a more efficient and flexible way. JavaScript, being a high-level programming language, also supports iterators and iterables. In this article, we will
6 min read
How to transform a JavaScript iterator into an array ? The task is to convert an iterator into an array, this can be performed by iterating each value of the iterator and storing the value in another array.These are the following ways we can add an iterator to an array:Table of ContentUsing Symbol iterator PropertyUsing Array.from MethodUsing the Spread
3 min read
How to Check if JSON Key Value is Null in JavaScript ? In JavaScript, the JSON Object can contain null values, which should be identified. The below approaches can be used to check if the JSON key is null. Table of Content Using for Loop and '===' OperatorUsing Object.values() with Array.prototype.includes()Using Array.prototype.some()Using for Loop and
3 min read
How to define custom Array methods in JavaScript? JavaScript arrays are versatile data structures used to store collections of items. When you want to iterate through the elements of an array, it's common to use loops like for, for...of, or forEach. However, there's a nuance when it comes to iterating through arrays that have additional properties
2 min read
How To Iterate an Array using forEach Loop in JavaScript? Iterating through an array in JavaScript can be done in multiple ways. One of the most common methods is using the traditional for loop. The modern approach to iterate the array which is by using the forEach method. This method is different from the traditional approach as it uses a functional appro
1 min read
How to Iterate Over Characters of a String in JavaScript ? There are several methods to iterate over characters of a string in JavaScript. 1. Using for LoopThe classic for loop is one of the most common ways to iterate over a string. Here, we loop through the string by indexing each character based on the string's length.Syntaxfor (statement 1 ; statement 2
2 min read
How to Check a Value Exist at Certain Array Index in JavaScript ? Determining if a value exists at a specific index in an array is a common task in JavaScript. This article explores various methods to achieve this, providing clear examples and explanations to enhance your coding efficiency.Below are the different ways to check if a value exists at a specific index
5 min read
How to skip to next iteration in jQuery.each() util? jQuery each() function allows us to loop through different datasets such as arrays or objects. jQuery.each() is one of the most used functions in jQuery. Syntax:$(selector).each(function(index, element))$.each(function(index))Note: $.each() is essentially a drop-in replacement of a traditional for o
1 min read
How to get index at which the value should be inserted into sorted array based on iterator function in JavaScript ? In this article, we will learn how to get an index at which the value should be inserted into a sorted array based on the iterator function in JavaScript. Here we use the sorting function to sort the array and we would print the array and the position of the new element in the DOM.Approach:Create an
4 min read
How to Declare Two Dimensional Empty Array in JavaScript ? In this article, we are going to learn about Declare two-dimensional empty array by using JavaScript. A two-dimensional array is also known as a 2D array. It is a data structure in JavaScript that can hold values in rows and columns form. It is an array of arrays. Each element in a 2D array is acces
3 min read