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()?

Host object	Supported?	What you get	Notes
Array	✅	[index, item]	ES2015+
NodeList	✅ (modern browsers)	[index, DOM node]	Same order as the DOM query
Map	✅	[key, value]	Map’s default iterator is already entries()
Set	✅	[value, value]	Mirrors Map behaviour
Arguments object	❌	—	Convert to array first

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

---

3  entries() vs. other list helpers

Purpose	Method	Output	Typical use
Keys only	keys()	0, 1, 2…	Pagination, sparse arrays
Values only	values() or direct for…of	el1, el2…	When index is irrelevant
Index + value	entries()	[index, value]	Logging, diffing, stable sorting
Transform all items	map()	New array	Create derived arrays
Side-effects	forEach()	—	DOM mutations, analytics

---

4  Do’s ✅ and Don’ts ❌

✅ Do	❌ Don’t
Call the method: list.entries()	Forget the parentheses and store the function reference
Consume with for…of, destructuring [i, item]	Use for…in (gets property names, not pairs)
Break early* once you found what you need	Assume you must iterate the entire collection
Polyfill (core-js) if you target IE11	Rely on NodeList entries() in legacy browsers

---

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