DEV Community

Banesa Guaderrama
Banesa Guaderrama

Posted on • Updated on

JavaScript: Data Structures (Part 1 - Arrays)

alt text

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 = [ ];
<< [ ]
Enter fullscreen mode Exit fullscreen mode

We can add a constructor function

Example:

const myArray = new Array( );
<< [ ]
Enter fullscreen mode Exit fullscreen mode

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

typeof [ ];
<< ‘object’
Enter fullscreen mode Exit fullscreen mode

Initializing an array

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

Example:

const heroes = [ ];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Adding values to an array

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

Example:

heroes[0] = ‘Superman’;
Enter fullscreen mode Exit fullscreen mode

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

Example:

heroes[0] = ‘Batman’;
Enter fullscreen mode Exit fullscreen mode

We can add more values using different indices:

heroes[1] = ‘Wonder Woman’;
heroes[2] = ‘Flash’;
heroes[5] = ‘Aquaman’;
Enter fullscreen mode Exit fullscreen mode

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’]
Enter fullscreen mode Exit fullscreen mode

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’]
Enter fullscreen mode Exit fullscreen mode

Removing values from arrays

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

Example:

delete avengers[3];
<< true
Enter fullscreen mode Exit fullscreen mode

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’]
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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

Example:

x
<< 1

y
<< 2
Enter fullscreen mode Exit fullscreen mode

Or,

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

y
<< 1
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
diek profile image
diek

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

Collapse
 
banesag profile image
Banesa Guaderrama

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