How To Get The First Element Of A Map In JavaScript?

How to Get the First Element of a Map in JavaScript

ECMAScript 2015 introduced two new object types, Map and Set. In this tutorial, we will learn about Map and how to get the first element of a Map in JavaScript using built-in JS methods.

What is a Map in JavaScript?

Map in JavaScript is a data structure that allows storing data as key/value. Map is quite similar to Object, but the difference is that any data type (String, Number, Boolean, Array, Object) can be key in Map.

Here is how to create a simple Map:

const map = new Map();

// Use set() to define the key/value pairs of the Map
map.set('learn', 'learnshareit.com');
map.set('relax', 'youtube.com');
map.set('job', 'linkedin.com');

console.log(map);

Output:

Map(3) {
  'learn' => 'learnshareit.com',
  'relax' => 'youtube.com',
  'job' => 'linkedin.com'
}

How to get the first element of a Map in JavaScript?

Using the spread operator

First, we use the spread operator to break a Map into an Array. Then we get the first element just like we do with an Array. See the example below to understand better.

const map = new Map();

// Use set() to define the key/value pairs of the Map
map.set('learn', 'learnshareit.com');
map.set('relax', 'youtube.com');
map.set('job', 'linkedin.com');

// Convert Map to Array using the spread operator
const arr = [...map];
console.log('arr:', arr);

// Get the first element
console.log('First element:', arr[0]);

Output:

arr: [
  [ 'learn', 'learnshareit.com' ],
  [ 'relax', 'youtube.com' ],
  [ 'job', 'linkedin.com' ]
]
First element: [ 'learn', 'learnshareit.com' ]

Using Array.from() function

Array.from() is used to create a new array from an iterable object(String, Map, Set).

Syntax:

Array.from(iterable, mapFn, thisArg)

Parameters:

  • iterable: the value you want to convert.
  • mapFn(optional): function will run through all elements.
  • thisArg(optional): used as this keyword inside mapFn.

This method is similar to the way above. Instead of using the spread operator, we will use Array.from() function to convert our Map into an Array. From there, we can quickly get the first element of Array with index 0. Like this:

const map = new Map();

// Use set() to define the key/value pairs of the Map
map.set('learn', 'learnshareit.com');
map.set('relax', 'youtube.com');
map.set('job', 'linkedin.com');

// Convert Map to Array using the Array.from() function
const arr = Array.from(map);
console.log('arr:', arr);

// Get the first element
console.log('First element:', arr[0]);

Output:

arr: [
  [ 'learn', 'learnshareit.com' ],
  [ 'relax', 'youtube.com' ],
  [ 'job', 'linkedin.com' ]
]
First element: [ 'learn', 'learnshareit.com' ]

Using Map.entries() and next() functions

Map.entries() syntax:

map.entries()

Description:

It returns an iterator object containing the entry(a key/value pair) for each element in the Map.

next() syntax:

iterator.next()

Description:

It returns an Object with two properties: value and done. Value is the next value in the sequence. Done is true if the sequence has been completed. Otherwise, false.

First, we use the entries() function to return an object containing the [key, value] pairs present in our Map. Then, we use the value attribute of the next() function to get the first [key, value] pair. Like this:

const map = new Map();

// Use set() to define the key/value pairs of the Map
map.set('learn', 'learnshareit.com');
map.set('relax', 'youtube.com');
map.set('job', 'linkedin.com');

// Create an object containing [key, value] pairs using entries()
const entriesObj = map.entries();
console.log(entriesObj);

// Get the first element using the value attribute of the next()
console.log('First element:', entriesObj.next().value);

Output:

[Map Entries] {
  [ 'learn', 'learnshareit.com' ],
  [ 'relax', 'youtube.com' ],
  [ 'job', 'linkedin.com' ]
}
First element: [ 'learn', 'learnshareit.com' ]

Summary

We just showed you how to get the first element of a Map in JavaScript. If you want your code to be more readable and concise, use the spread operator. Hopefully, with 5 minutes of reading the article, you can absorb a lot of useful knowledge.

Have a nice day!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *