How to Create Custom Iterator that Skips Empty Value in JavaScript ?

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);
}

Output

GFG
3
JavaScript

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);
}

Output

GFG
3
JavaScript

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);
}

Output

GFG
3
JavaScript

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);
}

Output

cat
ball
cow