JavaScript: Data Structures (Part 1 - Arrays)

Data Structures: Arrays, Sets, and Maps.

Data structures are used to store lists of values, these data structures are called arrays, sets, and maps. But what is data structure? According Wikipedia, “In computer science, a data structure is a particular way of organizing data in a computer, so it can be used efficiently”, to which I would add that using logical statements allows you to control the flow of a program, as well as loops that would allow us to repeat blocks of code over and over again as needed in our code.

The Array Data Structure

An array data structure or an array is an ordered list of values, or a collection of elements (values or variables) identified by an index or key. The most simple type of array data structure is a linear array.

Creating an array literal will require you to write a pair of square brackets.

Example:

const myArray = [ ];
<< [ ]

We can add a constructor function

Example:

const myArray = new Array( );
<< [ ]

Arrays are not primitive values but a special built-in object, like when using the “typeof” operator:

typeof [ ];
<< ‘object’

Initializing an array

But, How do we initialize an array? Well, we can create an empty array literal.

Example:

const heroes = [ ];

Now, we can find the value of element 0 (zero) in our heroes array

heroes [0];  // to access a specific value in an array, we write its index inside the square brackets
<< undefined

Adding values to an array

Place a new string by assigning the element 0 (zero).

Example:

heroes[0] = ‘Superman’;

We can treat items in the array as a variable and changing its value by using the assignment operator =

Example:

heroes[0] = ‘Batman’;

We can add more values using different indices:

heroes[1] = ‘Wonder Woman’;
heroes[2] = ‘Flash’;
heroes[5] = ‘Aquaman’;

You can repeat the operation until you add all the elements you want or need in your array.

Then, you can review your array by typing your array name (heroes) on your console and look at it.

heroes;
<< [‘Batman’, ‘Wonder Woman’, ‘Flash’, undefined, undefined, ‘Aquaman’]

You can see that those elements assigned with an index appear in the list by its name, but any other unused slots appear as undefined.

Creating array literals

We can create array literals to avoid adding values one by one.

Example:

const avengers = [‘Captain America’, ‘Iron Man’, ‘Thor’, ‘Hulk’];
<< [‘Captain America’, ‘Iron Man’, ‘Thor’, ‘Hulk’]

Removing values from arrays

Using the ‘delete’ operator allows us to delete an item from an array.

Example:

delete avengers[3];
<< true

The action will delete the value store in the index 3 (‘Hulk’), but it also leaves the index as undefined because even when deleting a value the space is still there, meaning that the array still has the same number of elements but the one we deleted will be undefined.

avengers;
<< [‘Captain America’, ‘Iron Man’, ‘Thor’,  ‘undefined’]

Destructuring arrays

Destructuring refers to take values out of the arrays and presenting as individual values, this allows us to assign multiple values at the same time.

const [x, y] = [1, 2];

It means that each variable exists outside the array and you can check its value individually.

Example:

x
<< 1

y
<< 2

Or,

[x, y] = [y, x];
x
<< 2

y
<< 1

This is Arrays (Part 1) of a series of 3 posts about data structures, Sets (Part 2) and Maps (Part 3) will complete the series.

Comments

[diek]

Nice!! I will wait for the maps part :D thank you for your work!

[Banesa Guaderrama]

Thanks Diego!!! I am working on the maps part!!!