The Array.prototype.values() method is a built-in functional tool in JavaScript that returns a new Array Iterator object containing the values for each index in the array. While it may seem redundant given that we can access values through standard loops, its power lies in its compatibility with the Iteration Protocol, allowing for lazy evaluation and seamless integration with other ES6 features like for...of loops and generator-based architectures.

1. Syntax and Basic Operation

The values() method takes no arguments. When called, it doesn’t return an array; it returns an iterable pointer that remembers its position within the source array.

JavaScript
const inventory = ["Laptop", "Monitor", "Keyboard"];
const iterator = inventory.values();

// Consuming the iterator manually
console.log(iterator.next()); // { value: "Laptop", done: false }
console.log(iterator.next()); // { value: "Monitor", done: false }

2. Integration with for...of

The most common way to use values() is within a for...of loop. Interestingly, Array.prototype[Symbol.iterator] (the default behavior of an array in a loop) is actually a reference to Array.prototype.values. This means that for (let x of arr) is functionally identical to for (let x of arr.values()).

JavaScript
const themes = ["Dark", "Light", "High Contrast"];

for (const value of themes.values()) {
  console.log(value);
}

3. Key Behaviors

A. It is a “Live” Connection

The iterator does not “store” the values at the time it was created. It stores a pointer to the array. If you change the values in the original array before calling .next(), the iterator will yield the updated values.

JavaScript
const data = ['A', 'B', 'C'];
const iter = data.values();

data[1] = 'Modified'; // Change original array

console.log(iter.next().value); // "A"
console.log(iter.next().value); // "Modified"

B. Treatment of Sparse Arrays

Like entries() and keys(), the values() method does not skip “holes” in sparse arrays. It treats them as existing slots with a value of undefined.

JavaScript
const sparse = [1, , 3];
for (const val of sparse.values()) {
  console.log(val);
}
// 1
// undefined
// 3

4. Chaining and Generators

Because values() returns a standard iterator, it can be passed into any function that accepts an iterable, such as Array.from(), Promise.all(), or used in combination with the Spread Operator.

Converting an Iterator Back to an Array

While this might seem circular, it is useful when you have received an iterator from a different source (like a Map or Set) and need to turn it into an array to use array-specific methods like .sort() or .filter().

JavaScript
const mySet = new Set([1, 2, 3]);
const setValues = mySet.values(); // Returns a Set Iterator

const arrayFromIterator = [...setValues]; 
// Now you have [1, 2, 3] and can use array methods

5. Advanced Use Case: Typed Arrays

values() is not limited to standard arrays; it is also implemented in Typed Arrays (like Uint8Array, Float64Array). This is extremely useful when processing binary data or performing heavy mathematical computations where you want to use modern iteration syntax on raw buffers.

JavaScript
const bytes = new Uint8Array([0x48, 0x69]); // "Hi"
const byteIt = bytes.values();

for (const byte of byteIt) {
  console.log(byte.toString(16)); // "48", "69"
}

Categorized in:

Javascript Array Methods,