Data Structures

1. Working with arrays in JavaScript
   1. The forEach() method
   2. The filter() method
   3. The map method
2. Working with Objects in JavaScript
3. Working with Maps in JavaScript
4. Working with Sets in JavaScript
5. Other data structures in JavaScript

Working with arrays in JavaScript

The forEach() method

Arrays in JavaScript come with a handy method that allows you to loop over each of their members.

const fruits = ['kiwi','mango','apple','pear'];
function appendIndex(fruit, index) {
	console.log(`${index}. ${fruit}`)
}

fruits.forEach(appendIndex);

The result of running the above code is this:

0. kiwi
1. mango
2. apple
3. pear

To explain the syntax, the forEach() method accepts a function that will work on each array item. That function’s first parameter is the current array item itself, and the second (optional) parameter is the index.

const veggies = ['onion', 'garlic', 'potato'];
veggies.forEach( function(veggie, index) {
console.log(`${index}. ${veggie}`);
});

Very often, the function that the forEach() method needs to use is passed in directly into the method call, like this:

const veggies = ['onion', 'garlic', 'potato'];
veggies.forEach( function(veggie, index) {
	console.log(`${index}. ${veggie}`);
});

This makes for more compact code, but perhaps somewhat harder to read.

The filter() method

Another very useful method on the array is the filter() method. It filters your arrays based on a specific test. Those array items that pass the test are returned.

const nums = [0,10,20,30,40,50];
nums.filter( function(num) {
	return num > 20;
})

Here’s the returned array value:

[30,40,50]

Similar to the forEach() method, the filter() method also accepts a function and that function performs some work on each of the items in the array.

The map method

This method is used to map each array item over to another array’s item, based on whatever work is performed inside the function that is passed-in to the map as a parameter.

[0,10,20,30,40,50].map( function(num) {
	return num / 10
})

The return value from the above code is:

[0,1,2,3,4,5]

Working with Objects in JavaScript

The example below demonstrates how to use the object data structure to complete a specific task. This task is to convert an object to an array:

const result = [];

const drone = {

speed: 100,

color: 'yellow'

}

const droneKeys = Object.keys(drone);
droneKeys.forEach( function(key) {
	result.push(key, drone[key])
})
console.log(result)

This is the result of executing the above code:

['speed',100,'color','yellow']

Although this is possible and works, having to do something like this might mean that you haven’t chosen the correct data structure to work with in your code.

Working with Maps in JavaScript

To make a new Map, you can use the Map constructor:

new Map();

A map can feel very similar to an object in JavaScript. However, it doesn’t have inheritance. No prototypes! This makes it useful as a data storage.

let bestBoxers = new Map();

bestBoxers.set(1, "The Champion");
bestBoxers.set(2, "The Runner-up");
bestBoxers.set(3, "The third place");

console.log(bestBoxers);

Map(3) {1 => 'The Champion', 2 => 'The Runner-up', 3 => 'The third place'}

To get a specific value, you need to use the get() method. For example:

bestBoxers.get(1); // 'The Champion'

Working with Sets in JavaScript

A set is a collection of unique values.

To build a new set, you can use the Set constructor:

new Set();

The Set constructor can, for example, accept an array.

This means that we can use it to quickly filter an array for unique members.

const repetitiveFruits = ['apple','pear','apple','pear','plum', 'apple'];
const uniqueFruits = new Set(repetitiveFruits);

console.log(uniqueFruits);

{'apple', 'pear', 'plum'}

Other data structures in JavaScript

Besides the built-in data structures in JavaScript, it’s possible to build non-native, custom data structures.

These data structures come built-in natively in some other programming languages or even those other programming languages don’t support them natively.

Some more advanced data structures that have not been covered include:

• Queues
• Linked lists (singly-linked and doubly-linked)
• Trees
• Graphs