JavaScript Array keys() Method

The keys() method creates and returns a new iterator object which holds the key for every index in the array. This method does not affect the original array.

Syntax

Parameter

It does not hold any parameter.

Return

It returns a new array iterator object.

JavaScript Array keys() Example

Let's see some examples to understand better.

Example1

Here's the simple implementation of keys() method in array.

<httml>
<head> <h5> JavaScript Array Methods </h5> </head>
<body>
<script>
let arr=['Mon','Tue','Wed','Thu','Sat']; 
let itr=arr.keys();
document.write(itr+"<br>");
//Looping through each key.
for (let key of itr) {
  document.write(key+"<br>");
}
</script>
</body>
</html>

Test it Now

Output:

So, according to the number of elements present in the array, a key is assigned to each one.

Example2

Implementing keys() method with holes in between the array.

<html>
<head> <h5> JavaScript Array Methods </h5> </head>
<body>
<script>
var arr = ['Mon','Tue','Wed',,'Fri']; //A hole is present in-between the elements.
var itr=arr.keys()
document.write(itr+"<br>");
for(let key of itr)
document.write(key+"<br>");
</script>
</body>
</html>

Test it Now

Output:

Note: It is clear from the above example that Array keys() method does not ignore the holes present as an array element in the given array. It assigns a key value to that empty hole too. Also, the keys are assigned in an increasing order sequence to each element.

Example3

<html>
<head> <h5> JavaScript Array Methods </h5> </head>
<body>
<script>
const arr=['a','b','c','d'];
const itr=arr.keys();
for(const key of itr)
		document.write(key+"<br>");
</script>
</body>
</html>

Test it Now

Output:

Example4

Here's an example to generate keys for a user-define array.

<html>
<head> <h5> JavaScript Array Methods </h5> </head>
<body>
<script>
	var arr=[]; //Creating a user-define array.
	for(i=0;i<5;i++)
      arr[i]=prompt("Enter any five elements"+(i+1));
    document.write("The elements entered by the user are: <br>");
    for(i=0;i<5;i++){
      document.write(arr[i]);
      document.write("<br>"); 
            }	
    function create(){
      var itr=arr.keys();
      document.write("Keys generated are: <br>");
      for(key of itr)
         document.write(key+"</br>");
        } //This function will generate keys for the array elements.
</script>
<input type="button" onClick="create()" value="Get Keys"/>                                                                                              
</body>
</html>

Test it Now

Output:

Initially, the user will input the elements through prompt box which will be displayed as: