Data Structures in JavaScript

An Introduction

Data Structures are used to organize and collect data in a more efficient approach. There are different types of Data Structures, but since this is only an Introduction, we will be looking at Arrays and Objects.

Destructuring Arrays

Destructuring is the essence of separating multiple values or properties from the Array and dismantling it down to its basic parts. To destructure an Array, you must use the [] notation. A simple example is given below;

const halo = {

type: ‘FPS’,

currentDevelopers: ‘343 Industries’,

publishers: ‘ Microsoft Studios’,

series: [

‘Halo 1’,

‘Halo 2’,

‘Halo 3’,

‘Halo 3 : ODST’,

‘ Halo Reach’,

‘Halo 4’,

‘Halo 5’,

],

hasMultiplayer: true,

};

const [a, b, c] = halo.series;

console.log(a, b, c);

Destructuring Arrays (Part 1)

This will get the first three elements of the series property in the halo object. It will not be printed out as an Array, but as three different values, which in this case will be strings.

If you want to skip an element in the series property, you can just leave a blank space between the commas as given below;

const [a, , b, c] = halo.series;

console.log(a, b, c);

Destructuring Arrays (Part Two)

This will skip the second element in the series property (‘Halo 2’) and only print ‘Halo 1’, ‘Halo 3, ‘Halo 3 : ODST’.

Switching Locations between Values/Variables

If you want to switch locations between values in a property, there is two ways you can do it.

1. Using a Temporary Variable

let [first, second] = halo.series;

const temporary = first;

first = second;

second = temporary;

console.log(first, second);

Switching Values

2. Destructuring

[first, second] = [second, first];

console.log(first, second);

The second method is a lot more simpler and more efficient than adding a temporary variable. It results in cleaner code.

Destructuring Nested Arrays

Let’s first take a Nested Array as an example;

const nestedArray = [

‘Halo 1’,

‘Halo 2’,

[‘Halo 3’, ‘Halo 3 : ODST’],

‘Halo Reach’,

‘Halo 4’,

‘Halo 5’,

];

const [a, , b] = nestedArray;

console.log(a, b);

If we destructured this Array like we did previously, we would get the Elements of the (a), but we would get an Array in (b). Please note that we have skipped the second element in this Array.

To further destructure this nested array into it’s individual elements, we would have to do the following;

const nestedArray = [

‘Halo 1’,

‘Halo 2’,

[‘Halo 3’, ‘Halo 3 : ODST’],

‘Halo Reach’,

‘Halo 4’,

‘Halo 5’,

];

const [a, , [b, c]] = nestedArray;

console.log(a, b, c);

Firstly, we would destructure the Array, then we would destructure the Array inside that Array (if that makes any sense). This would allow us to extract the individual elements in this Nested Array example.

Destructuring Nested Arrays

Setting Default Values for Arrays

Normally, we would not set default values if we know the length of the Array. However, for instance, if we were to extract data from an API, we would not know the length of the Array, so it would be a good practice to set default values to help us.

const [first = 1, second = 1, third = 1] = [25, 28];

console.log(first, second, third);

Default Values

This would set the third value as 1, as a default. However, if we do not set the value, it would simply return undefined.

Destructuring Objects

We can destructure Objects the same way we destructure Arrays, however there is a small difference in the notations. Objects will use {} to destructure themselves, whereas Arrays will use [].

console.log(type, publishers, hasMultiplayer);

const { type, publishers, hasMultiplayer } = halo;

console.log(type, publishers, hasMultiplayer);

If we did not use destructuring to get the values inside that Object, an error would be thrown stating that we cannot access the variable before initialization. If we used destructuring, we would be able to extract the individual elements from that Object.

Destructuring Objects

Destructuring Nested Objects

const firearms = [‘Assault Rifle’, ‘Rocket Launcher’];

let automatic = true;

const weapons = {

[firearms[0]]: {

automatic,

},

[firearms[1]]: {

automatic: false,

},

randomWeapons: {

plasmaPistol: ‘Plasma Pistol’,

beamRifle: ‘Beam Rifle’,

battleRifle: ‘Battle Rifle’,

},

};

We will use the code above to demonstrate a simple destructuring of a nested object. Simply trying to get the individual values by logging it to the console will generate an error before initialization.

console.log(plasmaPistol, beamRifle, battleRifle);

However, if we were to destructure this nested object, we would be able to get the individual values inside that object.

const {

randomWeapons: { plasmaPistol, beamRifle, battleRifle },

} = weapons;

console.log(plasmaPistol, beamRifle, battleRifle);

Destructuring Nested Objects

Setting Default Values for Objects

Just like Arrays, if there is no default value set, the value will return as undefined. To set a default value for an Object, an example is given below;

const { series = [] } = halo;

console.log(series);