What every developer should know about JS data structures

Hello! Data structures stand for one of the most valuable skills for every software engineer.

In this post, 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.

Here, we will study 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 the 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, compared to Java arrays, JS do

es not fix the size of arrays either 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);

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]

Also, both methods can take multiple arguments at once:

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

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]

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]

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

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

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

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]

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)); 

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);

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

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 ]

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

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 []

Check for presence

In order to test for the existence of an element in sets, use the method. It returns true if the item is in the set, and false if it isn’t. Take a look at 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

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);
}

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']]);

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');

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)

Access an element

Maps allow to retrieve a value from store 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

Check for presence

In order to assert 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

Iterations

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

  • Values: Loop over values using values
  • Keys: Loop over keys using keys
  • Entries: 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)
}

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.

Scroll to Top