Updated April 1, 2023
Introduction to JavaScript keys()
The JavaScript keys() method is used to create and return an array iterator object which contains the keys for every index in an array. This method is a built-in method in javascript. This method does not accept any parameters. The JavaScript keys() method does not affect the original array just return an array iterator object which can loop through each key.
Syntax
The syntax of the JavaScript keys() method:
array.keys();Parameters:
- Keys() method does not accept any parameter.
- Return value: The return value of this method is the iterator object of an array.
Examples for the JavaScript keys() method
Example sre mentioned below:
Example #1
Next, we write the html code to understand the javascript keys() method more clearly with the following example, the keys() method used to return the iterator object of an array.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for keys function in JavaScript </title>
</head>
<body>
<p>Below are the keys of an array [ "Red", "Blue", "Green", "Orange" ]: </p>
<script>
var colors = [ "Red", "Blue", "Green", "Orange" ];
<!-- create array iterator object of colors array -->
var key = colors.keys();
<!-- loop through each key of colors array -->
for (k of key) {
document.write( k+ "<br>" );
}
</script>
</body>
</html>Output:
Explanation: As in the above code an array is created of [ “Red”, “Blue”, “Green”, “Orange” ] and the keys() method is used which return an iterator of this array, in this array, there are four elements present. An output printing keys are 0 to 3. Therefore a key is assigned to each element in an array according to the number of elements present.
Example #2
Next example we rewrite the above code where the javascript keys() method apply to an array where it contains missing elements or holes in between elements, as in the below code –
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for keys function in JavaScript </title>
</head>
<body>
<p>Below are the keys of an array [ "Red", ,"Blue", "Green", "Orange" ]: </p>
<script>
<!-- hole present in between an elements -->
var colors = [ "Red", ,"Blue", "Green", "Orange" ];
<!-- create array iterator object of colors array -->
var key = colors.keys();
<!-- loop through each key of colors array -->
for (k of key) {
document.write( k+ "<br>" );
}
</script>
</body>
</html>Output:
Explanation: As in the above code an array is created of [ “Red”, “Blue”, “Green”, “Orange” ] and the keys() method is used which return an iterator of this array, in this array, there are four elements and one hole are present. An output printing keys are 0 to 4. Therefore a key is assigned to that hole as well in the increasing order sequence and hence the keys() method does not ignore the holes in an array.
Example #3
If we want to gets only present elements key or to ignores the holes in an array we need to use Object.keys() method, as below:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for keys function in JavaScript </title>
</head>
<body>
<p>Below are the keys of an array [ "Red", ,"Blue", "Green", "Orange" ]: </p>
<script>
var colors = [ "Red", ,"Blue", "Green", "Orange" ];
<!-- create array iterator object of colors array -->
var key = Object.keys(colors);
document.write( key+ "<br>" );
<!-- loop through each key of colors array -->
for (k of key) {
document.write( k+ "<br>" );
}
</script>
</body>
</html>Output:
Explanation: As in the above code an array is created of [ “Red”, “Blue”, “Green”, “Orange” ] which contain a hole or empty element. And then the Object.keys() method is used which return keys of this array, as we can see in the output. Therefore a key is assigned to that hole but object.keys() method ignores the key(index) of holes in an array.
Example #4
In the next example code, we rewrite the above code for the javascript keys() method to apply on the constant array. As shown in the below example –
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title> This is an example for keys function in JavaScript </title>
</head>
<body>
<p>Below are the keys of an array [ "Red", ,"Blue", "Green", "Orange" ]: </p>
<script>
const colors = [ "Red", ,"Blue", "Green", "Orange" ];
<!-- create array iterator object of colors array -->
const key = colors.keys();
document.write( key+ "<br>" );
<!-- loop through each key of colors array -->
for (k of key) {
document.write( k+ "<br>" );
}
</script>
</body>
</html>Output:
Explanation: As in the above code constant array is created of [ “Red”, “Blue”, “Green”, “Orange” ] by using the const keyword, this keyword is used to creates a read-only reference to a variable or array. Later the keys() method is used which returns an iterator of this array. The output is the printing key iterator and the key (index) number from 0 to 4. Therefore a key is assigned to the constant array as well.
Conclusion
The JavaScript keys() method is a build-in method in javascript, which returns an array iterator object that contains the keys for every index in an array. The JavaScript keys() method does not ignore the hole present in an array if we need to ignore holes we can use the object.keys() method.
Recommended Articles
This is a guide to JavaScript keys(). Here we discuss the introduction to JavaScript keys() along with syntax, examples for better understanding. You can also go through our other related articles to learn more –
