JavaScript Array values() Method

JavaScript array.values() is an inbuilt method in JavaScript that is used to return a new array Iterator object that contains the values for each index in the array i.e., it prints all the elements of the array.

• Returns an iterator for accessing array values.
• Does not modify the original array.
• Works with any array, including sparse ones.
• Commonly used with for...of loops.

Syntax

arr.values();

Now let's understand this with the help of an example

const a = ['Apple', 'Banana', 'Cherry'];
const iterator = a.values();

for (let value of iterator) {
  	console.log(value);
}

Apple
Banana
Cherry

Note => The values() method does not modify the original array. It returns a new array iterator object i.e., elements of the given array. 

How the values() Method Works

The values() method does not return the values of the array directly. Instead, it returns an iterator object, which is an object that allows you to loop through the array values. The iterator object has a next() method that returns the next value in the array until all the values have been consumed.

How the Iterator Works:

The next() method of the iterator returns an object with two properties:

• value: The next value in the array.
• done: A boolean indicating whether all values have been iterated over (true when the iteration is complete).

let a = [10, 20, 30];
let iterator = a.values();

console.log(iterator.next());  
console.log(iterator.next());  
console.log(iterator.next());  
console.log(iterator.next());  

{ value: 10, done: false }
{ value: 20, done: false }
{ value: 30, done: false }
{ value: undefined, done: true }

Examples of Using the values() Method

Here are the examples using values() methods:

Example 1: Array values() method with for loop.

let a = ['a', 'gfg', 'c', 'n'];
let iterator = a.values();

for (let elements of iterator) {
    console.log(elements);
}

a
gfg
c
n

In this example:

• The array contains elements 'a', 'gfg', 'c', and 'n'.
• An iterator is obtained from the array using the values() method.
• The for...of loop iterates over the elements returned by the iterator.
• Each element elements is logged to the console.
• The output will be 'a', 'gfg', 'c', and 'n'.

Example 2: Printing elements of array with holes using array values() method.

let a = ["A", "B", , "C", "D"];

let iterator = a.values();

for (let value of iterator) {
    console.log(value);
}

A
B
undefined
C
D

In this example

• The array contains elements "A", "B", an empty slot, "C", and "D".
• An iterator is obtained from the array using the values() method.
• The for...of loop iterates over the elements returned by the iterator.
• Each element value is logged to the console.
• The output will be "A", "B", "C", and "D". The empty slot will not produce any output.

Example 3: Using values() with Object Arrays

When working with arrays of objects, the values() method can be useful for accessing and iterating over the objects' values:

let obj = [
    { name: 'Jiya', age: 18 },
    { name: 'Alia', age: 22 },
    { name: 'Bibita', age: 20 }
];

let iterator = obj.values();

for (let student of iterator) {
    console.log(student.name);  
}

Jiya
Alia
Bibita

In this example

• An array contains objects with name and age properties.
• values() creates an iterator for the array.
• The for...of loop iterates over the array values (student objects).
• Inside the loop, it logs each student's name to the console.

Example 4: Using values() with next()

Sometimes, you might prefer using the next() method explicitly

let a = [1, 2, 3, 4];
let iterator = arr.values();

console.log(iterator.next().value);  
console.log(iterator.next().value);  
console.log(iterator.next().value);
console.log(iterator.next().value);  

Output

1
2
3
4

In this example

• iterator = arr.values() creates an iterator for the array.
• iterator.next().value gets the first value (1) from the array and logs it.
• It then gets and logs the next values (2, 3, and 4) one by one.
• Each next().value call retrieves the next item in the array.

For more details follow this article => Javascript Array Complete reference

Conclusion

The JavaScript values() method provides a simple way to access and iterate over array values using an iterator. It doesn’t modify the original array and works well with loops like for...of. This method is especially useful for iterating over array values without dealing with indices, making it a clean and efficient choice for array iteration.