Data Structures Study Session: Arrays

Starting off with one of the more familiar data structures--even if you're new to programming you've probably heard of arrays.

An array is a list of elements (usually the same type), identified by an index or unique value that starts with zero. I think about it the way I think about an ordered list. For example let's imagine we're making a To-Do list where we want to knock out tasks in a specific order.

If you wrote it down on a piece of paper, you might have something like this:

1. Wake up
2. Workout
3. Shower
4. Eat
5. Go to work

If we were to make an array out of that list, it would look something like this:
let toDoList = ["Wake up", "Workout", "Shower", "Eat", "Go to work"];

(Just a note on the use of quotes: We're creating this array with a list of strings. If you tried to pass in Wake up without quotes, you'd get Uncaught SyntaxError: Unexpected identifier because the browser would try to evaluate Wake up as a variable, and we have not defined a variable here.)

Try it in the Console

Let's go ahead and take a look at that in the console. Now I don't know why I didn't learn to use the browser console more often when I was first studying code, but it's a great way to test out your code if you're just puttering around.

To open your browser console:

1. Right click on the this web page, then select Inspect. (I'm using Chrome, but on other browsers the option might be called something other than Inspect.)

2. At the top, you'll see a row of options. Click on Console.

3. Click into the console and paste our definition of toDoList above. It will return undefined.

4. Next enter console.log(toDoList). This should return something that looks like this: (5) ['Wake up', 'Workout', 'Shower', 'Eat', 'Go to work']

There's the (5), because regardless of if you start with a 0 or a 1, there are five elements in your written to do list or your toDoList array.

You'll also see an arrow pointing toward the (5). Click on it to expand. Now you should see something that looks like this:

0: "Wake up"
1: "Workout"
2: "Shower"
3: "Eat"
4: "Go to work"

If we take a look at this line: 0: "Wake up", you'll see we have an index of 0, and at that index of 0, we have an element, which is a string (quotation marks) that says Wake up.

Examining and Modifying Arrays

To view or use a specific element in your array, you can call it like this:

toDoList[0];
// returns 'Wake up'

You can also view the length of the array by calling length, like so:

toDoList.length;
// returns 5

But what if you decide you want to add or remove an element of the array? Well here are a few basic array functions:

// Add an element to the end of an Array
toDoList.push("Eat lunch");
// returns 6, the new length of the array
// Array is now: ['Wake up', 'Workout', 'Shower', 'Eat', 'Go to work', 'Eat lunch']

// Remove an element from the end of an Array
toDoList.pop()
// returns 'Eat lunch', the element that was removed
// Array is now: ['Wake up', 'Workout', 'Shower', 'Eat', 'Go to work']

// Remove an element from the beginning of an Array
toDoList.shift()
// returns 'Wake up', the element that was removed
// Array is now: ['Workout', 'Shower', 'Eat', 'Go to work']

// Add an element to the beginning of an Array
toDoList.unshift("Drink coffee");
// returns 5, the new length of the array
// Array is now: ['Drink coffee', 'Workout', 'Shower', 'Eat', 'Go to work']

Looping through an Array

One more thing I wanted to share is looping through an array. When you loop through an array, that means that the code starts with the first element of that array, does something to it, and then moves on to the next element of the array until certain conditions are met.

Here's an example:

toDoList.forEach((task) => {
     console.log(task)
});

// returns 
// Drink coffee
// Workout
// Shower
// Eat
// Go to work

So we're taking our toDoListArray and calling the forEach() function on it. Inside the first set of parentheses, we are defining how we will refer to one element of the array (I'm calling it task here just to avoid calling it something generic).

The first time in the loop, task is equal to the first element of the array, our "Drink coffee" task. Inside the loop, we call console.log(task) which prints "Drink coffee" to the console. The second time the loop happens, the task is equal to the second element in our toDoList array, which is "Workout". This continues until the loop has gone through every element of the array and printed them out.

If you run this code in your console, you'll see it happens really fast, so it looks like it's doing it all at once, but it's happening one element at a time. Let's define a sleep function just so we can see how this is happening in action.

Okay, so what if you wanted to loop through the array printing out the index with the task? You'd do something like this:

toDoList.forEach((task, index) => {
     console.log(`${index}. ${task}`)
});

// returns 
// 0. Drink coffee
// 1. Workout
// 2. Shower
// 3. Eat
// 4. Go to work

And if you wanted to print out something that looks closer to our original written to-do list, you'd probably have to get rid of that 0. and start with 1. right? Well, there's an easy fix for that. You can just add 1 to the index when you're printing it out in the console.

toDoList.forEach((task, index) => {
     console.log(`${index + 1}. ${task}`)
});

// returns 
// 1. Drink coffee
// 2. Workout
// 3. Shower
// 4. Eat
// 5. Go to work

That's all I have for today! There's a lot more you can do with arrays, these are just some of the basics.

You can learn a lot more about arrays at MDN Docs, which is the resource I used most when I was using JavaScript for my work as an SDE I at Amazon Web Services.

I am going give some of these HackerRank array challenges a try.

Thanks for reading!
-A

Connect with Me
GitHub
LinkedIn