Array Data Structures in Javascript: Part 1

Introduction

Whether you are only a JavaScript newbie, or have experience, its always good to be familiar with the ins and outs of arrays.

Arrays are a simple introduction to Data Structures, which are just a bunch of different ways to store data.

Arrays are one such data structure in JavaScript. They are used to collect other data into one variable. Think of them as a list of data.

We create a list by surrounding our data in brackets ([...]). Then we separate each value inside of the array with a comma.

letters = ["a", "d", "b", "c"] // This is an array of letters

You can choose whether or not the last element has a comma at the end. It won't affect the value of the array.

We can also create empty arrays.

emptyArr = []

This may seem pointless, but this can be useful later on.

Also, arrays can have any data types. They can even have a mix of data types, which means that it is a homogeneous data structure

Indexes and Indexing

Now, the question, of course, is how to retrieve the data in an array?

First of all, its important to know that arrays have a system of indexing. All arrays give a number to the values in the array. It starts at the first element, giving it an index of 0, then giving the next element an index of 1, and so on.

Remember that the plural of "index" is "indices" - NOT "indexes".

In order to get the element of an array at the index n, we simply add on [n]. For example:

// here is a new arraycountries = ["Romania", "Brazil", "France", "Nigeria"]// Getting the first elementcountries[0]// Getting the 4th elementcountries[3]

Introduction to Stacks and Queues

Stacks and Queues are also data structures. However, there aren't any special ways to make a stack or a queue in JavaScript. However, arrays can act like stacks and queues.

But what are they?

Stacks

Stacks operate on a certain way called "LIFO" - Last In, First Out. This means that when we want to "pop" off an element from the stack, we take the last element from the stack.

We can also "push" elements to the stack, which puts them at the end of the stack.

This means that if you push an element to a stack, and then pop the last element from the stack, you will get the element that you just pushed.

A good visualization is imagining stacks as a pile of plates stacked together. You can add a plate to the top, and you can take the plate at the top of the pile. However, it wouldn't make sense to add a plate to the bottom of that pile, because then all the other plates at the top would fall down. Likewise, you wouldn't take a plate from the bottom of the pile.

Queues

We've had "LIFO", so now we need its best friend, "FIFO"; First In, First Out.

This is where queues come into play. In a Queue, we add elements to the front, instead of the back. This is called shifting, or enqueuing (look at all those vowels!). If we want to take an element from a queue, we use dequeuing, which takes the first element.

Stacks in Javascript

As said earlier, we can't actually make a stack or queue in Javascript. But we can use methods to make them act like one!

To push, we use the .push() method.

newStack = [1, 2, 3, 4, 5]//pushing elementsnewStack.push(6)console.log(newStack)// -> [1,2,3,4,5,6]

To pop, we use the .pop() method.

newStack = [1,2,3,4,5]//popping elementspoppedElement = newStack.pop()console.log(poppedElement)// -> [5] 

Queues In Javascript

In Javascript, there are a lot of ways to make queues quicker, but in this tutorial, we are going to focus only one way.

To enqueue, we can use the .unshift() method

newQueue = [1,2,3,4,5]//enqueue elementsnewQueue.unshift(0)console.log(newQueue)// -> [0,1,2,3,4,5]

To dequeue, we can use the .shift() method

newQueue = [1,2,3,4,5]//enqueue elementsdequeueElement = newQueue.shift()console.log(dequeueElement)// -> 1

Conclusion

Arrays, overall, have a lot to them. There are different ways we can represent them. We can use stack methods or queue methods. There is also so much more to know about arrays in JavaScript. So much, that this tutorial has to be split into multiple parts.

In Part 2, we will cover some of the many list methods that will make your life (a lot) easier.

• If you want to support my work, don't forget to follow me on:*

• Twitter

• GitHub