DOM entries() - explained — and When to Use It

A practical guide to the entries() iterator on arrays, NodeLists, and more — with comparisons, do’s & don’ts, and an illustration prompt.

TL;DR

• entries() is a method (list.entries()), not a property (list.entries).
• It returns an iterator that yields [index, value] pairs.
• Use for…of or the iterator protocol; never use for…in to walk it.
• Exists on Array, NodeList, Map, Set, and more.
• If you don’t need the index, iterate directly with for…of or values() instead.

1  What does entries() return?

const links = document.querySelectorAll('.article a'); for (const [i, el] of links.entries()) { console.log(i, el.href); } //→ 0 "https://…" 1 "https://…" 

entries() gives back an iterator object whose .next() method delivers an object shaped like:

{ value: [index, element], done: false } 

• When done becomes true, the iterator is exhausted.
• The iterator is lazy — memory‑efficient for large collections.

2  Where can I use entries()?

🔗 MDN docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries

3  entries() vs. other list helpers

4  Do’s ✅ and Don’ts ❌

5  Real‑world snippet: click analytics

<ul class="cases"> <li><a href="/c1">Case 1</a></li> <li><a href="/c2">Case 2</a></li> <li><a href="/c3">Case 3</a></li> </ul> <script> const clicks = []; for (const [i, link] of document.querySelectorAll('.cases a').entries()) { clicks[i] = 0; link.addEventListener('click', () => ++clicks[i]); } // clicks → [3, 0, 1] </script> 

Key takeaway

entries() is the most explicit way to access both index and value in one pass. Use it when you care about position; otherwise reach for values() or plain for…of for cleaner code.

*) Early Break Example — Stop at the Current Customer

Assume you receive an array of customer objects from an API. Each object has a boolean current flag that marks which customer is currently selected / logged‑in. You only need the first match, so breaking out early saves time (and often makes intentions clearer).

const customers = [ { id: 101, name: 'Alice', current: false }, { id: 102, name: 'Bob', current: false }, { id: 103, name: 'Charlie', current: true }, // <-- we want to stop here { id: 104, name: 'Dora', current: false }, ]; for (const [index, customer] of customers.entries()) { if (customer.current) { console.log('Current customer found at index', index, customer); // do something with this customer, e.g. load profile UI break; // exit loop early, no need to traverse the rest } } 

Why break early?

• Performance — for large datasets, exiting on the first match avoids extra iterations.
• Clarity — shows the intent: find the first current customer and stop.
• Index access — entries() delivers the array index alongside the object, handy for updating UIs or data structures by position.

If you only need the customer object (not the index), iterate the array directly:

for (const customer of customers) { if (customer.current) { /* … */ break; } }