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:
- How to get a Value of a Map by its Key in JavaScript
- Get the Min and Max Values in a Map in JavaScript
- Get the Length of a Map in JavaScript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
