Basics of Javascript · Array · entries() (method)

This article is a transcript of my free youtube series about basics of web development. If you prefer watching over reading, feel free to visit my channel “Dev Newbs”.

Howdy, my fellow developers! I am back with yet another Array method. This one is — at least in my humble opinion — pretty chill. It is called entries() and I have a feeling, you and I will become great friends with it. So let’s get to know each other better!

The method entries() returns a new array iterator object that contains the key/value pairs for each index in the array. The method has no arguments, because they are not really needed for anything. Let’s see how to use it in the basic example.

// Example 1
// basic usage

console.log("EXAMPLE 1");
console.log("--------------------------------------------------");

let letters = ["a", "b", "c"];

let iterator = letters.entries()

// try to output iterator object
console.log(iterator );
// returns Array Iterator {}

// get next entry of the array - first one with index 0
console.log(iterator.next());
// returns object with done: false, value: [0, 'a'] + length: 2

// get next entry of the array - first one with index 1
console.log(iterator.next().value);
// returns [1, 'b']

// get next entry of the array - first one with index 2
console.log(iterator.next().value);
// returns [2, 'c']

// next call is outside Array’s range
console.log(iterator.next());
// returns object with done: true, value: undefined

With the entries() method, we get the iterator object, which has its own method next() that allows us to access elements of the array alongside with their index and value.

Firstly, we save the iterator object to a new variable. Once we call the next() method, it gets us reference to the first element in the array. The returned object contains two properties. First one is called done and it holds the information whether the end of the array has been reached. It is represented by a boolean value of true or false.

The other property contains a two element large array. The value of the array at index 0 is the element’s index. The value at index 1 is the actual element’s value. This array is always either two elements large or undefined.

One would expect that the last call to next() method on the iterator object would return the value of “done” as true, but you couldn’t be further from the truth. Actually, what happens is that you can access the iterator again and again and from this moment on, the result will hold the object with the property “done” set to true and the value object will contain nothing.

Let’s see how the method deals with the sparse arrays.

// Example 2
// sparse arrays

console.log("EXAMPLE 2");
console.log("--------------------------------------------------");

letters = ["a",,"c"];

iterator = letters.entries()

console.log(iterator.next().value);
// returns [0, 'a']

console.log(iterator.next().value);
// returns [1, undefined]

console.log(iterator.next().value);
// returns [2, 'c']

console.log(iterator.next().value);
// returns undefined

When the method is used on sparse arrays, it iterates empty slots as if they had the value undefined. We can see from the example that all three indexes are being accessed. In the second call to next() method, we get undefined at position 1 as mentioned.

The true power of the entries() method is in looping. So let’s see now what different approaches are available when using entries() method to loop through arrays.

// Example 3
// iterating over arrays in loop

console.log("EXAMPLE 3");
console.log("--------------------------------------------------");

letters = ["a", "b", "c"];

// iterate with index and element
for (const [index, element] of letters .entries()) {
  console.log(`Index: ${index} and value: ${element}`);
}

// Index: 0 and value: a
// Index: 1 and value: b
// Index: 2 and value: c

// iterate using for…of loop
const entries = letters.entries();

for(const element of entries){
  console.log(element)
}

// [0, 'a']
// [1, 'b']
// [2, 'c']

// sparse array
for (const entry of ["c",, "a"].entries()) {
  console.log(entry);
}

// [0, 'c']
// [1, undefined]
// [2, 'a']

The first scenario shows us how to access both an element’s index and value, by using the destructuring feature of JavaScript where we store the first item from an array into the first variable and second item into the second variable.

The second scenario returns pretty much the value from the iterator object for each iteration of the loop. This value is an array containing two items — index and value.

The third scenario shows that if we loop over a sparse array, the result will contain value undefined for the indexes where no value is defined.

As usual, the last example is applying the method to an array-like object and seeing what it does. So let’s do it.

// Example 4
// array-like object

console.log("EXAMPLE 4");
console.log("--------------------------------------------------");

const arrayLike = {
  length: 3,
  0: "a",
  2: "c",
  3: "d"
};

for (const entry of Array.prototype.entries.call(arrayLike)) {
  console.log(entry);
}

// [0, 'a']
// [1, undefined]
// [2, 'c']

Since the method takes whatever value is in length property as ultimate truth, the last numerical property is invisible for the entries() method. Besides that, the behavior of the method is as you would expect. It returns arrays of size two with index and value for each iteration of the loop. If the value at a given index is not defined, it returns value undefined.

We are done with another of the Array object methods. I hope that you learned something new and interesting and I will see you with the next video about the next Array method. Until then…see ya!