DEV Community

Cover image for Guide to JavaScript data structures (arrays, sets, maps)
Yuri Mednikov
Yuri Mednikov

Posted on

Guide to JavaScript data structures (arrays, sets, maps)

Hello! Data structures stand for one of the most valuable skills for every software engineer. Last year, I already published a comprehensive guide to Java collections. This time, I would like to provide this post on built-in data structures in JavaScript. They include classical arrays, as well two new data structures - Maps and Sets - that were introduced in ES6. This post overviews most important operations for arrays, maps and sets in vanila JS, including declaration, addition/deletion of elements, iterations, access elements, get a size of collection or validation of an existence of element in collection.

Array

Arrays are oldest JS collections. From a technical point of view, an array stands for a data structure that stores a sequence of elements. In Javascript, arrays are objects. However, compare to Java arrays, JS does not fix neither size of arrays neither type of objects. Elements are accessed using their index, which is [0; length of array - 1]. This section overviews most important arrays operations.

Declaration

To declare an array in JS there two general ways:

  • Using array literal syntax
  • Using a constructor of an Array class

This code snippet demonstrates how to create arrays with these approaches:

// using array literal

let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];

// using constructor

let numbers = new Array(1,2,3,4,5);

Enter fullscreen mode Exit fullscreen mode

Add elements

JS makes a difference with addition/deletion of elements, depending of their position in array (front/end). That means, that in order to insert a new element to the end we use push method, while unshift operation adds element to 1st position. Take on look on the following example:

let numbers = new Array(1,2,3,4,5);
console.log(numbers); // [1,2,3,4,5]

numbers.push(6);
console.log(numbers); // [1,2,3,4,5,6]

numbers.unshift(7);
console.log(numbers); // [7,1,2,3,4,5,6]
Enter fullscreen mode Exit fullscreen mode

Also, both methods can take multiple arguments at once:

let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
names.push('Gabriela', 'Hana', 'Katarina');
Enter fullscreen mode Exit fullscreen mode

Remove elements

As with addition, there are several ways to remove elements from JS array:

  1. From the beginning using shift
  2. From the end using pop
  3. Using filter operation

Let observe first two operations in this example:

let numbers = [1,2,3,4,5,6,7];

numbers.shift();
console.log(numbers); // [2,3,4,5,6,7]

numbers.pop();
console.log(numbers); //[2,3,4,5,6]
Enter fullscreen mode Exit fullscreen mode

Another approach to remove elements from array is by using filter. Contrary to previous two operations, this approach creates a new array, with elements, filtered using given condition (predicate). Take a look on this code, that creates of an array with even numbers:

let numbers = [2, 15, 6, 19, 54, 12, 9];

let even = numbers.filter(value => {
    return value %2 === 0
});

console.log(even); //[2,6,54,12]
Enter fullscreen mode Exit fullscreen mode

Access an element

Elements of array are accessed using an index, that has value of [0; array length - 1]. This code snippet demonstrates how how to do it:

let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
let name = names[0];
console.log(name); //Anna
Enter fullscreen mode Exit fullscreen mode

Check for presence

There are several ways to check an existance of the element in the array:

  • Using includes method: return boolean value on presence/absence
  • Using indexOf that returns an index of the element of -1 if it is not present. NB used mainly for targeting old browsers
  • Using every and some: both checks elements for satisfying a predicate (condition) and returns a boolean result if all elements/some elements are valid for condition

Take a look on this example:

let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
let hasName = names.includes('Carolina');
console.log(hasName); // true

let cities = new Array('Madrid', 'Prague', 'Buenos Aires', 'Brussels');
let paris = names.indexOf('Paris');
console.log(paris); // -1

// using every and some
let numbers = [2, 15, 6, 19, 54, 12, 9];

let everyIsEven = numbers.every(value => {
    return value%2===0
});
console.log(everyIsEven); // false

let someAreEven = numbers.some(value => {
    return value%2===0
});
console.log(someAreEven); // true
Enter fullscreen mode Exit fullscreen mode

Get size

The array's size in JS is a property, not a function. To get it, call Array.length:

let numbers = [2, 15, 6, 19, 54, 12, 9];
console.log(numbers.length); // 7
Enter fullscreen mode Exit fullscreen mode

In JS it is possible also to set a size of an array by assigning a new value to length:

let numbers = [1,2,3,4,5];
console.log(numbers.length); // 5

numbers.length = 3;
console.log(numbers); // [1,2,3]
Enter fullscreen mode Exit fullscreen mode

Iterations

To loop over elements of array use forEach method. This code snippet demonstrates an usage of this method:

let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
names.forEach(name => console.log(name)); 
Enter fullscreen mode Exit fullscreen mode

This will iterate over the array names and print each value.

Set

Sets in JS were introduced in ES6. In computer science, set is a collection that contain no duplicate elements. JS sets can store any type of elements - either objects or primitives (string, number, bigint, boolean, null, undefined, and symbol).

Declaration

JS permits to create an empty set or a set from an array using constructor. Take a look on the code snippet below:

// empty set
let set = new Set();

// from array
let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
let nameSet = new Set(names);
Enter fullscreen mode Exit fullscreen mode

Add elements

To insert new elements in set use add method. It returns a set, so it is possible to chain several add methods. Here is an example:

let numbers = new Set();

numbers.add(1);
numbers.add(2).add(3); // chain

numbers.add(2); //2 already in array
Enter fullscreen mode Exit fullscreen mode

Sets also can store values of different types as well undefined, NaN and null values:

let set = new Set();
set.add(1).add('Hello world').add(NaN).add(undefined);
console.log(set); //Set(4) [ 1, "Hello world", NaN, undefined ]
Enter fullscreen mode Exit fullscreen mode

Remove elements

Set provides delete method that removes a value from collection and returns a boolean value - true if element was successfully removed, and false if element was not removed (or not presented initially):

let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
let nameSet = new Set(names);

nameSet.delete('Carolina'); 
console.log(nameSet); // Set(4) [ "Anna", "Barbora", "Denisa", "Eva" ]

let result = nameSet.delete('Marketa');
console.log(result); // false
Enter fullscreen mode Exit fullscreen mode

There is also method clear that remove all elements in set:

let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
let nameSet = new Set(names);

console.log(nameSet); // Set(5) [ "Anna", "Barbora", "Carolina", "Denisa", "Eva" ]

nameSet.clear();

console.log(nameSet); // Set []
Enter fullscreen mode Exit fullscreen mode

Check for presence

In order to check an existance of an element in sets, use has method. It returns true if the item is in the set, and false if it isn't. Take a look on the following code snippet:

let names = ['Anna', 'Barbora', 'Carolina', 'Denisa', 'Eva'];
let nameSet = new Set(names);
let has = nameSet.has('Anna');
console.log(has); // true
Enter fullscreen mode Exit fullscreen mode

Iterations

There are two approaches to loop over set's elements:

  • Using forEach
  • Using of

Here, both snippets iterate over elements and print each of them:

let nameSet = new Set(['Anna', 'Barbora', 'Carolina']);

// using forEach
nameSet.forEach(name => console.log(name));

// using of
for (name of nameSet) {
    console.log(name);
}
Enter fullscreen mode Exit fullscreen mode

Map

Final data structure is map. Technically, maps are data structures, that store elements in a key-value format. Like sets, maps were also introduced in ES6. So, in JS map is an object which holds key-value pairs and remembers the original insertion order of the keys. Both keys and values can be primitive values or objects (including NaN, null or undefined values), however keys should be unique, e.g. no duplicates.

Declaration

Same as sets, maps can be created in two ways:

  • An empty map with Map() constructor
  • From iterable collection

Here is an example that demonstrates how to initialize maps:

let emptyMap = new Map();

let phoneNumbers = new Map([['5352342', 'Anna'], ['9358432', 'Barbora'], ['9874342', 'Carolina']]);
Enter fullscreen mode Exit fullscreen mode

NB that in the second approach we passed an array of arrays in form of [[key, value], [key, value] ...].

Add elements

Map permits to insert new elements using set method that accepts two arguments: key and value. If key already presents in the map, its value would updated with a new value:

let words = new Map();

words.set('apple', 'manzana');
words.set('orange', 'naranja');
words.set('pineapple', 'pina');

// update an existing key
words.set('pineapple', 'piña');
Enter fullscreen mode Exit fullscreen mode

Like with sets, it is also possible to chain multiple set methods together.

Remove elements

There are two ways to remove elements from JS map:

  • By provided key using delete method
  • Remove all elements with clear method

Take a look on the following code snippet below:

let phoneNumbers = new Map([['5352342', 'Anna'], ['9358432', 'Barbora'], ['9874342', 'Carolina']]);
console.log(phoneNumbers); // Map(3) { 5352342 → "Anna", 9358432 → "Barbora", 9874342 → "Carolina" }

phoneNumbers.delete('5352342');
console.log(phoneNumbers); // Map(2) { 9358432 → "Barbora", 9874342 → "Carolina" }

phoneNumbers.clear();
console.log(phoneNumbers); // Map (0)
Enter fullscreen mode Exit fullscreen mode

Access an element

Maps allow to retrieve a value for a given key using get method. If element is not presented in map, method will return undefined:

let words = new Map();

words.set('apple', 'manzana');
words.set('orange', 'naranja');
words.set('pineapple', 'pina');

let word = words.get('apple');
console.log(word); // manzana

word = words.get('hello');
console.log(word); // undefined
Enter fullscreen mode Exit fullscreen mode

Check for presence

In order to check if map contans a element (value) for a specified key use has:

let phoneNumbers = new Map([['5352342', 'Anna'], ['9358432', 'Barbora'], ['9874342', 'Carolina']]);

console.log(phoneNumbers.has('5352342')); // true
Enter fullscreen mode Exit fullscreen mode

Iterations

Last thing about maps is iteration. There are several ways to achieve this task:

  • Loop over values using values
  • Loop over keys using keys
  • Loop over key-value pairs using entries

Take a look on code examples:

// create map
let map = new Map();
map.set(4211234, 'Anna').set(2447759, 'Barbora').set(3333123, 'Carolina').set(4444095, 'Denisa');

// iterate over keys
for (key of map.keys()) {
    console.log(key)
}

// iterate over values
for (value of map.values()) {
    console.log(value)
}

// iterate over pairs
for ([key, value] of map.entries()) {
    console.log(key + ': ' +value)
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

In this post we observed three built-in data structures in JS - arrays, sets and maps. We checked most important operations on these collections, including declaration, addition/deletion of elements, iterations, access elements, get a size of collection or validation of an existence of element in collection.

References

  • Clifford A. Shaffer Data Structures & Algorithm Analysis 3 edn, Dover Publications, 2013
  • Glad Chinda Hacks for Creating JavaScript Arrays (2018) Freecodecamp, read here
  • Jordan Irabor Exploring Sets and Maps in JavaScript (2019) Scotch.io, read here

Top comments (0)