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
Arrayclass
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:
- From the beginning using
shift - From the end using
pop - Using
filteroperation
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
includesmethod: return boolean value on presence/absence - Using
indexOfthat returns an index of the element of -1 if it is not present. NB used mainly for targeting old browsers - Using
everyandsome: 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
deletemethod - Remove all elements with
clearmethod
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.
