JavaScript Array keys() Method

What You’ll Learn

The keys() method returns an iterator of array indices (0, 1, 2…). Use it with for...of, convert with Array.from, or compare with entries() and values(). This tutorial covers syntax, five examples, sparse-array behavior, and when a plain index loop is simpler.

Introduction

Arrays are indexed collections. Sometimes you need those index numbers explicitly—to read arr[i], build parallel structures, or walk slots in order. The keys() method exposes indices as an iterator.

For many tasks, a classic for loop or arr.forEach((v, i) => ...) is enough. Reach for keys() when you want iterator-style iteration or symmetry with values() and entries().

Understanding the keys() Method

array.keys() returns a new Array Iterator. Each step of the iterator produces the next numeric index. It does not yield element values—only keys.

The iterator is lazy: nothing runs until you consume it with for...of, spread, or Array.from.

📝 Syntax

General form of Array.prototype.keys:

array.keys()

Parameters

• None.

Return value

• A new Array Iterator object yielding indices.
• Original array unchanged.

Common patterns

• for (const i of arr.keys()) { ... } — loop indices.
• Array.from(arr.keys()) — collect indices into an array.
• [...arr.keys()] — same with spread.
• arr.keys().next().value — first index manually.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const fruits = ["apple", "orange", "banana"];

for (const key of fruits.keys()) {
  console.log(key);
}
// 0
// 1
// 2

0
1
2

const fruits = ["apple", "orange", "banana"];

const indices = Array.from(fruits.keys());

console.log(indices);
// [0, 1, 2]

[0, 1, 2]

const fruits = ["apple", "orange", "banana"];

for (const key of fruits.keys()) {
  console.log(`Index: ${key}, Value: ${fruits[key]}`);
}
// Index: 0, Value: apple
// Index: 1, Value: orange
// Index: 2, Value: banana

Index: 0, Value: apple
Index: 1, Value: orange
Index: 2, Value: banana

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

console.log([...letters.keys()]);
// [0, 1, 2]

console.log([...letters.values()]);
// ["a", "b", "c"]

[0, 1, 2]
["a", "b", "c"]

const sparse = ["a", , "c"]; // hole at index 1

console.log([...sparse.keys()]);
// [0, 1, 2]

console.log([...sparse.values()]);
// ["a", undefined, "c"]

[0, 1, 2]
["a", undefined, "c"]

🚀 Common Use Cases

• Index-driven logic — process arr[i] with explicit i.
• Parallel arrays — align data by index from two sources.
• Iterator pipelines — compose with other iterables.
• Sparse inspection — visit every slot including holes.
• Teaching iterators — pair with values() and entries().
• Custom algorithms — when you need indices without values first.

📝 Notes

• Returns an iterator, not an array of keys.
• Do not confuse with Object.keys() on plain objects.
• For finding a value’s index, indexOf / findIndex is simpler.
• Iterator is one-shot; calling again requires a fresh keys().
• Works on dense and sparse arrays (all indices 0…length−1).
• ES2015—polyfill or loops for IE11.

💡 Best Practices