How to transform a JavaScript iterator into an array ?

Last Updated : 02 Jul, 2024

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 Content

Using Symbol iterator Property

To make an iterator for an array.

const it = array[Symbol.iterator]();

So, first, we make an iterator for the "array" named "it". After creating the iterator we iterate to each value stored in that iterator and push it into another array named "p" with the use of the following code

p.push(word)

where the word is the value corresponding to the array of elements stored in the iterator. After iterating through each of the elements we get our final array where all the values of the iterator get stored in p.

Example: In this example, we will convert a JavaScript iterator to a JavaScript Array.

javascript

const array = ['Geeks', 'for', 'Geeks'];
let p = []
const it = array[Symbol.iterator]();
console.log(it);

for (let word of it) {
    p.push(word)
}
console.log("After the conversion the array becomes");
console.log(p);

Output

Object [Array Iterator] {}
After the conversion the array becomes
[ 'Geeks', 'for', 'Geeks' ]

Using Array.from Method

We can transform the javascript iterator into a JavaScript array by using the array.from() method.

Example:

JavaScript

const array = ['Geeks', 'for', 'Geeks'];
const mp = array.map(function (val) {
    return val;
})
const it = mp.entries();
console.log(it)
let newArr=[];
newArr = Array.from(it);
console.log(newArr);

Output

Object [Array Iterator] {}
[ [ 0, 'Geeks' ], [ 1, 'for' ], [ 2, 'Geeks' ] ]

Using the Spread Operator

We can transform the javascript iterator into a JavaScript array by using the spread operator method

Example:

JavaScript

const array = ['Geeks', 'for', 'Geeks'];
const mp = array.map(function (val) {
    return val;
})
const it = mp.entries();
console.log(it)
const newArr = [...it];
console.log(newArr);

Output

Object [Array Iterator] {}
[ [ 0, 'Geeks' ], [ 1, 'for' ], [ 2, 'Geeks' ] ]

Using a for...of Loop

To transform a JavaScript iterator into an array using a for...of loop, initialize an empty array, then iterate over the iterator with the loop, pushing each value into the array. This method is straightforward and compatible with all iterable objects.

Example: In this example we defines a generator function that yields numbers 1, 2, and 3. It creates an iterator from the generator and transforms it into an array using a loop. Finally, it logs the array.

JavaScript

function* generateNumbers() {
    yield 1;
    yield 2;
    yield 3;
}

const iterator = generateNumbers();
const array = [];
for (const value of iterator) {
    array.push(value);
}
console.log(array);

Output

[ 1, 2, 3 ]

Using map()

Using map() to transform a JavaScript iterator into an array involves converting the iterator to an array with Array.from(), then applying map() to process each element. This method is efficient and allows further transformation if needed.

Example: In this example we converts a Set's iterator to an array using Array.from() and maps each value to itself, resulting in [1, 2, 3]