Array.prototype.values()

values()

The values() method returns a new Array Iterator object that contains the values for each index in the array. Introduced in ES2015, this method is the standard way to make arrays iterable in functional programming contexts and modern iteration constructs.

Syntax

array.values()

Return Value

A new Array Iterator object. Unlike a plain array, the iterator object doesn’t store all values in memory—it generates them on-demand through the next() method. This makes it memory-efficient for large datasets.

How It Differs from Index-Based Access

When you access array values using bracket notation (arr[0], arr[1]), you’re reading by position. The values() method returns an iterator—a specialized object that produces values sequentially when queried. Think of it as a cursor that moves through your array, yielding values one at a time.

Key difference: index access gives you immediate values; values() gives you a generator you can control manually or automatically via for...of.

Examples

Basic iteration with for…of

The most common use case—iterate over array values directly:

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits.values()) {
  console.log(fruit);
}
// Output:
// apple
// banana
// cherry

Arrays are iterable by default, so for (const fruit of fruits) works identically. However, calling .values() explicitly signals your intent and is useful when you want to be explicit about iterating values rather than indices or entries.

Manual iteration with next()

The iterator protocol gives you fine-grained control:

const numbers = [10, 20, 30];
const iterator = numbers.values();

iterator.next();
// { value: 10, done: false }

iterator.next();
// { value: 20, done: false }

iterator.next();
// { value: 30, done: false }

iterator.next();
// { value: undefined, done: true }

Each call to next() returns an object with value (the current element) and done (whether iteration is complete). This pattern is useful when you need to step through elements conditionally or interleave iteration with other logic.

Practical data processing pattern

Combine values() with array methods for functional data transformation:

const data = [null, 'hello', null, 'world', undefined];

// Filter out falsy values using Array.from with iterator
const nonNull = Array.from(
  data.values(),
  val => val
).filter(Boolean);

console.log(nonNull);
// ['hello', 'world']

// Process in chunks with next()
function* processValues(arr) {
  const it = arr.values();
  let chunk = [Global_Objects::eval];
  
  for (const value of it) {
    chunk.push(value);
    if (chunk.length === 2) {
      yield chunk;
      chunk = [Global_Objects::eval];
    }
  }
  if (chunk.length) yield chunk;
}

console.log([...processValues([1, 2, 3, 4, 5])]);
// [[1, 2], [3, 4], [5]]

When to Use

• Modern iteration: for...of loops are cleaner than traditional for loops with index access
• Explicit intent: Calling .values() makes it clear you’re iterating values, not indices
• Iterator compatibility: Pass iterators to functions expecting iterable inputs
• Memory efficiency: For very large arrays where you don’t need all values simultaneously

See Also

• array::keys - Iterate over indices
• array::entries - Iterate over index-value pairs