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);
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 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 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
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 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 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
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)
}
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.
Top comments (0)