Exploring Arrays in Javascript: A Beginner’s Guide (Pt 1)

Introduction

As I continue on the amazing (but arduous) journey of learning JS, I realize just how much I am dealing with these nifty things called Arrays. Arrays are a type of object, but unlike an Object literal they guarantee order, making them much more like a list (think grocery list). Arrays in JS are also automatically resizable (change the length) and mutable (change the contents). Learning the ins and outs of arrays will greatly improve your ability to grasp fundamental concepts and work with data in a smart and efficient manner.

This article will help you think of an array like a grocery list, and demonstrate how to check your list’s length, add an item to it, and remove an item from it. So, let’s get started!

An object, huh?

Yes, an object! As previously mentioned, an array is a type of object- which is not uncommon in JS. In fact, nearly everything in JS is an object (except the primitive types, but that is for another discussion!) Objects as a whole exist to help us group things together in logical ways, and arrays are no different in this sense.

How are they like a “grocery list”?

If you were to fumble for a pen and pad to make your grocery list on a Sunday morning, you would likely be putting some delicious foods down on your paper. These would be items that are sort of “bulleted”. You probably wouldn’t write your grocery list as a paragraph, and there would be a distinct length to your list. The foods you choose to put down would always be in the same order on the list, unless you erased an item, added an item, or modified it in some way first. Arrays, much like your grocery list, are also filled with items. These items will always exist in the same order unless you modify it first.

What if while you were in preschool you were taught that the first number is 0? Arrays are “zero-indexed”, which is a fancy way of saying that the first item on your list would be numbered ‘0’ instead of ‘1’. The second item would be numbered ‘1’, and the third item numbered ‘2’, and so on. Let’s look at a graphic to help visualize this concept:

an example array named deliciousFoodList with five items inside.
(EX 1) Mmmm.. arrays make my mouth water

In EX 1, we have a new array, deliciousFoodList. First, we declare our new variable with the const keyword. On the right hand of the assignment operator = , we designate that the following values will items within an array by using an open square bracket [. Each item within the array are separated by a comma. After entering in our items, we add a closing square bracket ].

Our first item, “lasagna”, occupies an index of 0. Our last item, “steak”, occupies an index of 4. Because we haven’t modified the array, the order is guaranteed. This means that we can be sure that the index of each of our items will remain constant, therefore we can access them by their index with ease. We can accomplish this by using square bracket notation and our target item’s index following the array’s variable name like so:

deliciousFoodList[0]
// "lasagna"
deliciousFoodList[1]
// "lemon merengue pie"

Notice so far we have only added String values, or bits of words or phrases between quotations “”. This works for our purpose of making a grocery list, but what if we wanted to list something else.

What about Number value? Can we store those?

const arrayOfNumbersAndString = ['Arrays', 'are', '#', 1]
// ['Arrays', 'are', '#', 1]

What about a list within a list? Maybe within our array, we have a second array with spices?

const nestedList = ['apples', 'butter', 'pie crust', ['cinnamon', 'nutmeg']]
// ['apples', 'butter', 'pie crust', Array(2)]

Interesting.. the item at the last index in our new Array claims it is an Array with a length of 2

hmmm.. Array(2)!?

We can access the nested array by calling our arrays name nestedList along with the index of our nested array (3) using square bracket notation like so nestedList[3]. Then, we can access the items within that nested array in very much the same fashion! We see that nutmeg is at an index of 1. Let’s see what happens when we print nestedList[3][1]

console.log(nestedList[3][1])
// "nutmeg"

Great! Arrays seem like the perfect solution to keep a running list of items of any type.. but what if we have empty spots on our list? Maybe we want to leave room on our list in the middle to add in other items later?

console.log(deliciousFoodList)
// ['lasagna', 'lemon merengue pie', 'fried chicken', 'cholcolate ice cream', 'steak']
deliciousFoodList[6] = 'beer'console.log(deliciousFoodList)
// ['lasagna', 'lemon merengue pie', 'fried chicken', 'cholcolate ice cream', 'steak', empty, 'beer']

Ok. So what if I wanted to change the order, add items, edit the items, or reverse our list? Is any of this possible?

Oh heck yes it is

Array properties and methods exist to help us interact with the items in our array. I will create a separate article to explore static, instance, and looping methods- but for now lets see how we can use a few simple array properties and methods to check the length of our array, add an item to it, and remove an item from it!

.length

.length is a property that lives within the instance of the array we are working with. It will return the length of our array as an integer value.

Ok, a length of 5 and our array has a total of 5 items. Makes sense. But what if we had an empty array?

Just as expected- the empty array has a length property of 0!

.pop()

We see that .pop() located the item at the last index, “steak”, and has “popped” it off the end of our array and returned it to us! It has mutated the original array, and now our deliciousFoodList is forever altered. Let’s recheck the length of our modified array to ensure this has happened.
It has a new length of 4.

Cool. What if we wanted to add something in “steaks” place?

.push()

.push() is another instance method that will “push” an item onto the end of our array, mutating the original array to contain the new item. Here, we pushed “shrimp” onto our deliciousFoodList, and we see it is now at the end (last index) of our array!
A new length of 5!

And just like that, we have learned…

  1. The basics of an Array and its similarities to a grocery list
  2. How to check the length of our array with .length()
  3. How to remove the last item from with .pop()
  4. …and how to add an item to the end of our array with .push()!

I hope that this served as a good introduction from which to start building your knowledge of this super useful data structure!

Stand by for the next article Exploring Arrays in Javascript: A Beginner’s Guide (Pt 2), exploring different ways to create, combine, iterate through, and interact with arrays.

A dog loving Marine vet from New Haven, CT that thoroughly enjoys learning programming fundamentals and sharing them to solidify his own learning.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store