Tari Ibaba

In this article, we’ll be exploring some ways to quickly get the first element of a Map object in JavaScript.

1. Call next() on Map entries()

To get the first element of a Map, we can call the entries() on the Map to get an iterable object, then call the next() method on this iterable. For example:

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3'],
]);

const firstElement = map.entries().next().value;

console.log(firstElement); // [ 'key1', 'value1' ]

The Map entries() method returns an iterable of key-value pairs for all elements of the Map. The next() method returns the next element in the iterable sequence. Since it’s the first time we’re calling it on the iterable, it returns the first element in the sequence. We use the value property of the element to get the key-value pair representing the first element of the Map.

2. Array.from()

We can also use the Array.from() method to get the first element of the Map:

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3'],
]);

const firstElement = Array.from(map)[0];
console.log(firstElement); // [ 'key1', 'value1' ]

Note

On a Map with many elements, this method is significantly slower than the first, as it creates a new array from all the Map elements. We conducted a performance comparison between the two methods on a Map with 1 million elements, and these were the results on average:

Iterable next(): 0.015ms
Array from() 251.093ms

Let’s look at some ways to easily convert the values of a Map object to an array in JavaScript.

1. Map values() and Array from()

To convert Map values to an array, we can call the values() method on the Map, and pass the result to the Array.from() method. For example:

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const values = Array.from(map.values());

console.log(values); // [ 'John', 'Kate', 'Peter' ]

The Map values() method returns an iterable of values in the Map. The Array.from() method can create arrays from iterables like this.

2. Map values() and Spread Syntax (…)

We can also use the spread syntax (...) to unpack the elements of the iterable returned by the Map values() method into an array. For example:

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const values = [...map.values()];

console.log(values); // [ 'John', 'Kate', 'Peter' ]

Using the spread syntax allows us to combine the values of multiple Map objects into one array. For example:

const map1 = new Map([['user1', 'John']]);

const map2 = new Map([
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const values = [...map1.values(), ...map2.values()];

console.log(values); // [ 'John', 'Kate', 'Peter' ]

To create a Set from an array in JavaScript, pass the array to the Set() constructor. For example:

const arr = [1, 2, 3];
const set = new Set(arr);

console.log(set); // Set(3) { 1, 2, 3 }

console.log(set.has(2)); // true

set.delete(2);

console.log(set); // Set(2) { 1, 3 }

A Set object only stores unique values, so it won’t contain any duplicates.

const arr = [1, 1, 2, 3, 3, 4];
const set = new Set(arr);

// Set(4) { 1, 2, 3, 4 }
console.log(set);

This makes it useful for removing duplicate elements from an array without mutating it, for example:

const arr = [1, 1, 2, 3, 3, 4];

const distinct = Array.from(new Set(arr));

// [1, 2, 3, 4]
console.log(distinct);

To convert a Map to JSON in JavaScript, call the Object.fromEntries(map), then pass the result to the JSON.stringify() method.

For example:

JavaScriptCopied!

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const json = JSON.stringify(Object.fromEntries(map));

// {"user1":"John","user2":"Kate","user3":"Peter"}
console.log(json);

We first transform the Map with Object.fromEntries(), because we can’t serialize a Map to a JSON string directly. The Object.fromEntries() method transforms any list of key-value pairs into an object:

JavaScriptCopied!

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const obj = Object.fromEntries(map);

// { user1: 'John', user2: 'Kate', user3: 'Peter' }
console.log(obj);

Convert JSON back to Map

To convert the JSON string back to a Map:

1. Parse the JSON string to an object with JSON.parse().
2. Call Object.entries() with this object as an argument.
3. Create a new Map object, passing the result of Object.entries() to the constructor.

For example:

JavaScriptCopied!

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const jsonFromMap = JSON.stringify(Object.fromEntries(map));

const obj = JSON.parse(jsonFromMap);
const mapFromObj = new Map(Object.entries(obj));

// Map(3) { 'user1' => 'John', 'user2' => 'Kate', 'user3' => 'Peter' }
console.log(mapFromObj);

We first convert the string to an object and then to an array, because we can’t parse a JSON string to a Map directly. The Object.entries() method takes an object and returns a list of key-value pairs that correspond to the key and value of each property of the object:

JavaScriptCopied!

const obj = {
  user1: 'John',
  user2: 'Kate',
  user3: 'Peter',
};

const arr = Object.entries(obj);

// [ [ 'user1', 'John' ], [ 'user2', 'Kate' ], [ 'user3', 'Peter' ] ]
console.log(arr);

The Map() constructor can take an iterable of key-value pairs to create the Map elements, so we pass the result of the Object.entries() directly to it.

To convert an array to a string with spaces in JavaScript, call the join() method on the array, passing a string containing the space as an argument. For example:

const arr = ['coffee', 'milk', 'tea'];

const withSpaces = arr.join(' ');
console.log(withSpaces); // coffee milk tea

The Array join() method returns a string containing each array element concatenated with the specified separator. If no separator is passed as an argument, it will join the array elements with commas:

const arr = ['coffee', 'milk', 'tea'];

const str = arr.join();
console.log(str); // coffee,milk,tea

We can specify other separators apart from a space, like hyphens and slashes:

const arr = ['coffee', 'milk', 'tea'];

const withHypens = arr.join('-');
console.log(withHypens); // coffee-milk-tea

const withSlashes = arr.join('/');
console.log(withSlashes); // coffee/milk/tea

A separator can also contain more than one character. This allows us to separate the array elements with words or multiple spaces. For example:

const arr = ['coffee', 'milk', 'tea'];

const withAnd = arr.join(' and ');
console.log(withAnd); // coffee and milk and tea

const withOr = arr.join(' or ');
console.log(withOr); // coffee or milk or tea

const with2Spaces = arr.join('  ');
console.log(with2Spaces); // coffee  milk  tea

Note: If an element in the array is undefined, null, or an empty array ([]), it will be converted to an empty string ('') before concatenation with the separator. For example:

const arr = ['coffee', null, 'milk', []];

const withComma = arr.join(',');
console.log(withComma); // coffee,,milk,

const withSpaces = arr.join(' ');
console.log(withSpaces); // coffee  milk

To convert an array to a string without commas in JavaScript, call the join() method on the array, passing an empty string ('') as an argument:

const arr = ['coffee', 'milk', 'tea'];

const withoutCommas = arr.join('');
console.log(withoutCommas); // coffeemilktea

The Array join() method returns a string containing each array element concatenated with the specified separator. If no separator is passed as an argument, it will join the array elements with commas:

const arr = ['coffee', 'milk', 'tea'];

const str = arr.join();
console.log(str); // coffee,milk,tea

We can specify other separators apart from an empty string, like hyphens and slashes:

const arr = ['coffee', 'milk', 'tea'];

const withHypens = arr.join('-');
console.log(withHypens); // coffee-milk-tea

const withSlashes = arr.join('/');
console.log(withSlashes); // coffee/milk/tea

const withSpaces = arr.join(' ');
console.log(withSpaces); // coffee milk tea

A separator can also contain multiple characters:

const arr = ['coffee', 'milk', 'tea'];

const withAnd = arr.join(' and ');
console.log(withAnd); // coffee and milk and tea

const withOr = arr.join(' or ');
console.log(withOr); // coffee or milk or tea

If an element in the array is undefined, null, or an empty array ([]), it will be converted to an empty string ('') before concatenation with the separator. For example:

const arr = ['coffee', null, 'milk', []];

const withComma = arr.join(',');
console.log(withComma); // coffee,,milk,

const withHyphen = arr.join('-');
console.log(withHyphen); // coffee--milk-

To convert a set to a string in JavaScript, call the Array.from() method with the Set as an argument, then call the join() method on the resulting array. For example:

const set = new Set(['x', 'y', 'z']);

const str1 = Array.from(set).join(' ');
console.log(str1); // x y z

const str2 = Array.from(set).join(',');
console.log(str2); // x,y,z

The Array.from() method converts an array-like object like a Set into an array:

const set = new Set(['x', 'y', 'z']);

console.log(Array.from(set)); // [ 'x', 'y', 'z' ]

After the conversion, we can call the join() method on the array. join() returns a string containing the elements of an array concatenated with the specified separator:

console.log(['x', 'y', 'z'].join('-')); // x-y-z

console.log(['x', 'y', 'z'].join('/')); // x/y/z

Note: We can also use the spread syntax (...) to convert a Set to an array:

const set = new Set(['x', 'y', 'z']);

const str1 = [...set].join(' ');
console.log(str1); // x y z

const str2 = [...set].join(',');
console.log(str2); // x,y,z

The spread syntax unpacks the values of the Set into a new array that we call join() on to get the string.