What Can You Do with an Array Iterator Object in JavaScript?

Some of the array methods that do not mutate the original array will return an array iterator object . The array iterator object is loaded with the keys, values, or both keys and values of the original array. It allows you to inspect each one or populate another array with it.

An iterator object contains a special method, next(). When called, it returns the next available result from the iteration cycle inside a special object. The first time you call next() you'll get the first array item. The next time you call it (in the same execution context) you'll get the second array item, and so on.

• Array.keys() - returns only the keys found in the original array. Value contains a number, which is the key from the current array item.
• Array.values() - returns only the values found in the original array. Value contains a single item, which is the contents of the array item.
• Array.entries() - returns the key and value pairs. Value contains an array that holds the key and value of the array item.

The returned object contains two properties: value and done . Done is boolean and true when you've reached the last item. Value can be a single item or an array. Since entries() , returns both keys and values from the original array items, each value will be an array. Remember that array keys begin with 0.

Here’s an example that loops through and logs the iterator object created by the entries() method:

const array = [1,2,3]; const arrayEntries = Array.entries(); while (true) { let result = arrayEntries.next(); if (result.done) break; console.log(result.value); } // [0,1] <-- value is [key,value] // [1,2] // [2,3]

Notice the while loop isn’t calling entries over and over. If it did that, the loop would be infinite because next method would start from 0 each time. Instead next is called on the iterator object that is returned by the entries method. it’s essentially doing this:

arrayEntries.next(); // { "value": [0,1], "done": false } arrayEntries.next(); // { "value": [1,2], "done": false } arrayEntries.next(); // { "value": [2,3], "done": false } arrayEntries.next(); // { "done": true }

The while loop ends when result.done === true.

Using the spread syntax , it’s easy to create a new array that contains only the keys and/or values of another array. Array.keys() results in a numerical sequence starting at 0 that matches the length of the original array.

const array = ["car","banana","hippo"]; const arrayKeys = [...Array.keys()]; console.log(arrayKeys); // [0,1,2]

How can I make a copy of an array?

With Array.values() , we’re placing the array values into another array. This creates a shallow copy. This works as long as the array is flat (does not contain other arrays or objects).

const array = ["car","banana","hippo"]; const arrayValues = [...Array.values()]; console.log(arrayValues); // ["car","banana","hippo"]

If you want to make a copy of a multi-dimensional array (an array that contains another array or object), use the map method like this:

array = [1, 2, 3]; arrayCopy = Array.map((x) => x);