Skip to content

Commit ea7f33f

Browse files
[Term Entry] JavaScript Map: keys() (#7712)
* create keys.md * minor fixes * Update content/javascript/concepts/map/terms/keys/keys.md ---------
1 parent 5276522 commit ea7f33f

File tree

1 file changed

+101
-0
lines changed
  • content/javascript/concepts/map/terms/keys

1 file changed

+101
-0
lines changed
Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
Title: '.keys()'
3+
Description: 'Returns a new map iterator object that contains the keys of each element in the map.'
4+
Subjects:
5+
- 'Computer Science'
6+
- 'Web Development'
7+
Tags:
8+
- 'Map'
9+
- 'Object'
10+
CatalogContent:
11+
- 'introduction-to-javascript'
12+
- 'paths/front-end-engineer-career-path'
13+
---
14+
15+
The **`.keys()`** method returns a new map [iterator](https://www.codecademy.com/resources/docs/javascript/iterators) object containing the keys of each element in the map, respecting the insertion order. This method enables explicit iteration using a `for...of` loop or the iterator's `.next()` method.
16+
17+
> **Note:** The iterable returned by `.keys()` is _not reusable_. Once it has been fully consumed (i.e., all elements have been iterated over), it becomes exhausted. To iterate again, a new iterator must be created by calling `.keys()` again on the map.
18+
19+
## Syntax
20+
21+
```pseudo
22+
map.keys();
23+
```
24+
25+
**Parameters:**
26+
27+
The `.keys()` method does not take any parameters.
28+
29+
**Return value:**
30+
31+
Returns a new map iterator object containing the keys of each element in the map, in order.
32+
33+
## Example 1: Printing Each Key
34+
35+
This example uses a `for...of` loop to iterate over the iterable object returned by `.keys()` and prints the keys of the `ratings` map:
36+
37+
```js
38+
const ratings = new Map();
39+
40+
ratings.set(1, 'Bad');
41+
ratings.set(5, 'Medium');
42+
ratings.set(10, 'Excellent');
43+
44+
const iterator = ratings.keys();
45+
46+
for (const key of iterator) {
47+
console.log(key);
48+
}
49+
```
50+
51+
The code will produce this output:
52+
53+
```shell
54+
1
55+
5
56+
10
57+
```
58+
59+
## Example 2: Getting the Values
60+
61+
In this example, the keys are saved in the `numsKeys` array, and the map's [`.get()`](https://www.codecademy.com/resources/docs/javascript/map/get) method is used to retrieve and print each value:
62+
63+
```js
64+
const nums = new Map([
65+
[2, 'Two'],
66+
[4, 'Four'],
67+
[6, 'Six'],
68+
[8, 'Eight'],
69+
]);
70+
71+
const numsKeys = Array.from(nums.keys());
72+
73+
numsKeys.forEach((key) => console.log(nums.get(key)));
74+
```
75+
76+
The code will produce this output:
77+
78+
```shell
79+
Two
80+
Four
81+
Six
82+
Eight
83+
```
84+
85+
## Codebyte Example
86+
87+
This example uses the `.next()` method to manually iterate through the keys ​​and print them to the console:
88+
89+
```codebyte/javascript
90+
const map = new Map();
91+
92+
map.set(1, 'One');
93+
map.set(true, 'True');
94+
map.set({ id: 1 }, 'Object');
95+
96+
const iterator = map.keys();
97+
98+
console.log(iterator.next().value);
99+
console.log(iterator.next().value);
100+
console.log(iterator.next().value);
101+
```

0 commit comments

Comments
 (0)