Intro to Arrays – JavaScript 101

JavaScript 101 is a series of instructional videos given by DevMountain Web Development Instructors. Click here to see the entire video series

Arrays are a type of data that store multiple values in a structured and ordered fashion. Or, in other words, arrays are a type of data that can be stored in variables. In this video, you will learn what you can store inside of an array and how to access different values in an array. 

Video Transcription

One of the basics for a computer programming and datatypes is the concept of arrays. Arrays are a type of data that store multiple values in a structured and ordered fashion. Let’s breakdown what that means. First, arrays are a type of data. Anytime a computer stores information for later use, it will store it in variables. So, arrays are a type of data that can be stored in variables.

An arrays can contain more than one piece of information…

Arrays store multiple values. So unlike other datatypes like strings and numbers, an array can contain more than one piece of information. Arrays are a kind of collection. Collections are a grouping of multiple variables. You could also have any combination of datatypes in a single array that would then be stored on the same variable. The big difference between arrays and other datatypes that store multiple values like objects, is that arrays area always ordered and have a builtin structure. If objects are boxes, then arrays are a set of cubby holes. Each one numbered in order.

In fact, that structure and order is why you as a programmer, would choose an array over another datatype. When you add values to an array, the computer automatically tracks the order of those values, assigning them a numbered index behind the scenes. Java Scripter rays are zero indexed, which means that the first item in the array is assigned the number zero. The second item is assigned a one and the third a two and so on. Because the computer automatically assigns these values and index, we can store massive amounts of data in perfect order and access it at any time as long as we know what index each value has assigned to it.

Think of arrays like a row of cubby boxes. You can add box into the row wherever you’d like and then you can ask for box number two, seven or 277. You can also give someone instructions to do the exact same thing to every box. Like tell a computer to print it all out in backwards order or multiple it all together into one giant number. Or store step-by-step GPS instructions to the location of your pirate treasure.

Arrays Can Store a Collection of Related Data

The most common way that arrays are used in modern web applications is to store a collection of related data. Take for example this website, the navigation bar on the side has a collection of links to pages throughout the site. If we look at the source code, we can see that navigation information is being pulled from an array of strings. The links are being shown in the exact order that they are being stored in the array. And if we were to modify the value of any items in the array, it would change what is being displayed in the website.

So that’s a close look at what arrays are and how they work. The next step is for you to start playing with arrays and your code.

An Introduction to Arrays in JavaScript

Okay, this is an introduction to arrays in JavaScript. Some of the things we’re going to talk about are what an array is. We’re going to talk about how you can create an array and the syntax surrounding an array. What you can store inside of an array, how to access different values in an array. And then, we’re also going to talk about some different methods or different functionality that we can use on arrays that is prebuilt into Java Script. Alright, let’s talk about it.

What is an array?

An array is a way of storing list like values. For example, if I had let’s say five different friends, and I was writing a program that would store those five different friends. I could create five different variables and store those five different friends. But let’s say … Which would never happen, for some reason, I got really popular and now all of a sudden, I have 100 friends or 1,000 friends and I wanted to store all of my friends in this program I was writing.

It would become incredibly cumbersome and very tiring to write out all of my friends inside of individual variables. So, what we can do is create arrays that can store lists of items and often these items inside of arrays are like items. For example, I could have an array of my friends. Let’s go ahead and take a look at how we would create that array. In the code editor, let’s go ahead and talk about the syntax. So, if I go ahead and create an array, I would first use let, let is a variation on var. It is essentially doing the same exact thing. I’m using it in place of var. 

So, I’m going to say let my friends, so I’m creating a variable called “my friends” and I’m assigning the value, what I wanna store inside this variable is an array. So, to create an array, you are going to use the square brackets, the opening and closing square bracket and then inside this array, we can put any number of values. So, inside, I’m going to put a couple of my friends. I’m gonna put in Jeremy and Missy and Brack. Okay, these are my three friends: Jeremy, Missy, and Brack.

If I wanted to, now all three of these values are strings. If I wanted to, I could put in a bullion value, I could put in true, I could put in a number, I could put in objects, arrays, other things, other data types. Arrays are not exclusive. I do not have to create an array that only has one single data type, okay? But having a single data type like this would be common. So, inside of this array I just have some strings and we’re gonna go with that for now. 

So, how can we access values in an array? For example, if I wanted to access the value Jeremy, how could I retrieve that value? So, what I’m gonna do is I’m gonna create a variable, I’m gonna call this “single friend”, because I’m gonna access the value of a single friend at a time and then I need to list off the name of the array, my friends. And then I’m gonna use bracket notation, these square brackets. Now, in between these brackets, I need to put a number. When we’re talking about arrays, each value in the array has a specific index and in JavaScript, arrays start with index, or the first item in an array starts at index 0. 

What I mean by that is the value Jeremy is being stored at index 0, the value Missy is being stored at index 1, and the value Brack is being stored at index 2. And if I had multiples friends, they’d be at index 3, 4, 5, 6 and so on and so forth. So, if I wanted to access the value Jeremy, which is at index 0, I would list the name of or type out the name of the array, which is my friends, use brackets, square brackets and then put a 0 in between the brackets. This is going to access whatever value is at index 0 in that array. 

I’m gonna show that to you by using a JavaScript, or excuse me, a VS Code extension called [Quoca 00:06:53]. Quoca’s just really helpful in letting us know some of the values of variables on our file, so I’m gonna put “single friend” right here and Quoca is gonna tell us what the value of single friend is to the right. And so it’s saying the value stored in this value single friend is Jeremy. If I wanted to access Missy out of my array, I would change 0 to 1. And so single friend is now Missy and Brack I would have to change this value to a 2 and now the value of a single friend is Brack.

And that’s how you access values in an array, by their index using bracket notation and the name of the array. Alright, let’s talk about some of these array methods. Push, pop, shift, unshift, splice, and slice. These are some array methods that are built into JavaScript that we can use with arrays and I’ll show you how to use them. So, I’m gonna get rid of some of this code here. I am going to create a little bit of space here and type in my friends so that Quoca can tell us what the value of my friends is and then I’m gonna make some changes, I’m gonna modify some of these values in the array. 

And I’m gonna use some of these helper methods. The first one I’m talking about is push, so push will add a value to the end of the array. So, let’s say I make a new friend. I can list or type out the name of my array, which is my friends and then I can use a dot or a period and say dot, push. And then I invoke push. Now, inside of the invocation, inside of the parenthesis, I can pass in an argument and this is the value that I want added to the end of the array, so if I make a new friend and my new friend is Brian, you can see down here on line 16 that Brian got added to the end of the array.

So, push adds a value to the end of the array. Now, let’s say that Brian and I get into an argument and we’re no longer friends and so he does not get to be in my array of friends. I am going to use pop. So, I list off the name of the array, my friends, dot pop and I’m going to invoke it. You can see that Brian is no longer in my array of friends. So, what pop does is it removes the last item in the array. So, I’m gonna comment it out, Brian’s back, I remove the comment and Brian’s gone. 

Okay? So, push adds to the end of the array, pop takes away from the end of the array. Let’s talk about shift and unshift. So, they’re very similar to push and pop, but for the beginning of the array. So, if I wanted to remove Jeremy from my list of friends, I would list off let’s say my friends dot shift and then I would invoke. I don’t need to pass in an argument, you can see the value Jeremy is now gone from my array down here on line 16. If I did this multiple times, my friends, dot shift, and then invoked, now Missy’s gone, okay? So, I’m going to get rid of one of these and I’m going to use unshift. 

So, my friends dot unshift and I invoke here and with unshift just like push, I need to provide it with an argument. Whatever value I want added to the beginning of the array, me and Jeremy are BFFs again, so Jeremy gets added to the beginning of the array. Alright, so shift removes from the beginning of the array, unshift adds to it. Let’s talk about splice and slice. So, first off splice. 

Sometimes, you’re gonna want to remove values from an array and if you know that the value you want to remove is at the beginning or the end of the array, then shift and pop are great methods to use, but sometimes that value isn’t at the beginning conveniently, or at the end of the array and that’s where splice can come into play. So, if I wanted to remove a value that let’s say is in the middle of the array like Missy is, I could type out my friends, the name of the array and then dot splice. 

Now, splice, what splice is gonna do, it needs to take some arguments, so the first argument I’m gonna pass to it is where do I want to start removing values from that array? So, if I put … and this is gonna be an index, so if I put index 0, you can see down here on line 16, all the values got removed, so I said starting at index 0, remove all the values from the array. Now, if I didn’t want to move all the values from the array, you can pass an optional second argument. 

That second argument is how many values you actually want removed, so if I did a comma and put 1, then you can see down here Jeremy is gone and Missy and Brack are still in my array. I said start the splicing or start the removal of values from index 0, which is where Jeremy is at, and only remove one item. That just leaves Jeremy, so Jeremy is gone. If I needed to remove something from the middle of an array like I said was more helpful, then I would need to start this splicing at index 1. And now Missy is gone. Start splicing at index 1, start removing at index 1, which was Missy and only remove one item, which is just Missy and so she’s gone. 

If I wanted to remove multiple items, you could. Also, you can pass an optional third, fourth, fifth and beyond argument where you can replace the values that you removed. So, if I wanted to replace Missy with a friend, Eric, you can see that the splice method removed Missy and put Eric in its place. I can also add multiple values here. So, if Nancy is now a friend and also Greg. Okay, so what we have here is you can see Jeremy and Brack are still at the beginning and the end of the array, but in the middle where I removed Missy, it inserted Eric, Nancy, and Greg. 

Okay, that’s splice. Let’s talk about slice. So, I’m gonna delete some of this code. Again, the name of the array dot slice. What slice is gonna do, it’s gonna help us make copies of either the entire array or a portion of the array. So, what I’m gonna do here is create a variable called “copy”, because splice is actually going to return us a value, so my friends dot splice and down here under my friends, I’m gonna let Quoca tell us the value of my friends and copy, so you can see already that they’re identical: Jeremy Missy, Brack, Jeremy, Missy, Brack, right? So, it made a copy.

If I pass in an argument here, I’m gonna say start copying at index 0, it started at index 0 and it copied all the values. If I said start copying at index 1, you can see the difference between my friends and copy down here on line 16 and 17, Jeremy’s gone, because I only started copying the array starting at index 1. I can also pass it optional, an optional second argument where I say “start the copying at index 1, but only copy up to and not including index 2.” So, it started copying at index 1, which was Missy and I gave it an optional second argument, which is an index and Brack is at index 2, so I said copy up to index 2, but not including, so that just left Missy.

So, if I change this from a 1 to a 0, start the copying at index 0, which is Jeremy and copy up to index 2, so that leaves just Jeremy and Missy and down here, on line 16 and 17, you can see the difference there. So that is an introduction to what an array is, how to create it with the square brackets, how you can access values in an array using their index and bracket notation and also an introduction into some of the more common array methods built into JavaScript.

[cta id=”589″ vid=”0″]

See also:

Related posts