# Get the first element of a Map in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Dec 10, 2022, updated Jun 7, 2023. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-map-get-first-element

> Learn how to use the entries() method to get the first element in a Map using JavaScript.

To retrieve the first element of a `Map` object, there are multiple approaches you can take.

1. Using the `entries()` method and `next()`:

```javascript
const map = new Map([
  ['name', 'Alex Hales'],
  ['age', 27],
  ['country', 'United States']
])

const first = map.entries().next().value

console.log(first)
// ['name', 'Alex Hales']
```

The `entries()` method returns an iterator object with key-value pairs. By calling `next()` once, you can retrieve the first element from the iterator.

2. Converting to an array and accessing the first element:

```javascript
const map = new Map([
  ['name', 'Alex Hales'],
  ['age', 27],
  ['country', 'United States']
])

const first = Array.from(map)[0] // or [...map][0]

console.log(first)
// ['name', 'Alex Hales']
```

By using [`Array.from(map)`](https://attacomsian.com/blog/javascript-array-from) or the spread operator (`...map`), you can convert the `Map` object into an array. Then, accessing the element at index `0` will give you the first key-value pair.

3. Using array destructuring with `keys()` or `values()`:

```javascript
const map = new Map([
  ['name', 'Alex Hales'],
  ['age', 27],
  ['country', 'United States']
])

const [firstKey] = map.keys()
console.log(firstKey); // 'name'

const [firstVal] = map.values()
console.log(firstVal); // 'Alex Hales'
```

You can utilize [array destructuring](https://attacomsian.com/blog/javascript-object-array-destructuring#array-destructuring) to extract the first key or value by calling `keys()` or `values()` on the `Map` object.

To learn more about the `Map` object and working with key-value pairs in JavaScript, you can refer to [this article](https://attacomsian.com/blog/maps-javascript).