JavaScript Array values() Method

What You’ll Learn

The values() method returns an iterator over each element value in an array. This tutorial covers syntax, for...of loops, comparison with entries() and keys(), collecting values, and five practical examples.

Introduction

Sometimes you need to walk every element without caring about its index. values() returns an iterator that yields each value in order—from index 0 to length - 1.

For plain arrays, looping with for...of already uses the same iterator under the hood. Calling values() explicitly is useful when an API expects an iterator or when you want symmetry with keys() and entries().

Understanding the values() Method

array.values() returns a new Array Iterator object. Each call to next() (or each step of for...of) produces the next element value.

The iterator does not copy the array. If the array changes while you iterate, later steps reflect those changes. The iterator itself does not mutate the array.

📝 Syntax

General form of Array.prototype.values:

array.values()

Parameters

• None.

Return value

• A new Array Iterator yielding element values.

Common patterns

• for (const v of arr.values()) { ... }
• for (const v of arr) { ... } — same for arrays.
• [...arr.values()] — shallow copy as new array.
• Array.from(arr.values()) — collect values.
• const it = arr.values(); it.next().value; — manual step.

Examples Gallery

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

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

const iterator = fruits.values();

for (const fruit of iterator) {
  console.log(fruit);
}
// apple
// orange
// banana

apple
orange
banana

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

for (const fruit of fruits) {
  console.log(fruit);
}
// apple
// orange
// banana

apple
orange
banana

const nums = [10, 20, 30];

const copy = [...nums.values()];

console.log(copy);
// [10, 20, 30]

console.log(copy === nums);
// false

[10, 20, 30]
false

const scores = [88, 92, 76];

let total = 0;

for (const score of scores.values()) {
  total += score;
}

console.log(total);
// 256

256

const letters = ["a", "b", "c"];
const it = letters.values();

console.log(it.next());
// { value: "a", done: false }

console.log(it.next());
// { value: "b", done: false }

console.log(it.next().value);
// "c"

{ value: "a", done: false }
{ value: "b", done: false }
c

🚀 Common Use Cases

• Explicit iterators — APIs that accept iterable values.
• Symmetry — alongside keys() and entries().
• Lazy iteration — process one value at a time.
• Shallow copy — [...arr.values()].
• Teaching — understand iterator protocol.
• When indexes matter — prefer entries() instead.

📝 Notes

• Returns an iterator, not an array.
• Does not mutate the array.
• for...of arr uses the same values iterator for arrays.
• Sparse arrays yield undefined for empty slots.
• Iterator is one-way; create a new one to restart.
• ES2015—not available in IE.
• For side-effect callbacks, forEach may be simpler.

💡 Best Practices