JavaScript Array values() Method

The values() method creates a new array iterator object that carries the values specified at each array index. We can iterate the array elements via loops or iterator methods.

Syntax

Parameter

It does not hold any parameter as such.

Return

It creates and returns a newly created array iterator object.

JavaScript Array values() Method Example

Let's discuss some examples to understand better.

Example1

Here's an example implemented using for...of loop.

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var arr = ["John","Mary","Tom","Harry","Sheero"]; //Intializing array elements
var itr = arr.values(); //Using values() method.
document.write("The array elements are:<br>");
for (let x of itr) { 
	document.write("<br>"+x);
}  //This iterates the array elements through its index value.
</script>
</body>
</html>

Test it Now

Output:

After iteration, the elements of the array are represented as:

Example2

Another implementation of array values() method using for...of loop.

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
const arr=["P","Q","R","S","T"]; //Initializing array elements.
const itr=arr.values();
document.write("The array elements are: <br>");
for(let x of itr)
{
	document.write("<br>"+x);
} //This loop will iterate and print the array elements.
</script>
</body>
</html>

Test it Now

Output:

The output is shown below:

Example3

An example implemented using next() method.

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var arr=["John","Tom","Sheero","Romy","Tomy"]; //Initialized array
var itr=arr.values();
document.write("The array elements are: <br>");
document.write("<br>"+itr.next().value); 
document.write("<br>"+itr.next().value);
document.write("<br>"+itr.next().value);
document.write("<br>"+itr.next().value);
document.write("<br>"+itr.next().value);
</script>
</body>
</html>

Test it Now

Output:

Note: If the next() method use exceeds the given array length, it will return an 'undefined' value.

Let's understand through an example:

Example

<html>
<head> <h5> Javascript Array Methods </h5> </head>
<body>
<script>
var arr=["John","Tom","Sheero","Romy","Tomy"]; //Initialized array
var itr=arr.values();
document.write("The array elements are: <br>");
document.write("<br>"+itr.next().value); //returns value at index 0.
document.write("<br>"+itr.next().value); //returns value at index 1
document.write("<br>"+itr.next().value); //returns value at index 2
document.write("<br>"+itr.next().value); //returns value at index 3
document.write("<br>"+itr.next().value); //returns value at index 4
document.write("<br>"+itr.next().value); //returns undefined
</script>
</body>
</html>

Test it Now

Output:

It is clear that the size of the array was 4, i.e., arr[4]. But next() method was used for 5 times. Thus, the last call to next() had returned an 'undefined' value.