Modern JavaScript Fundamentals

Arrays

Your browser needs to be JavaScript capable to view this video

Try reloading this page, or reviewing your browser settings

This segment explains arrays, including how to store various data type values in an array.

Keywords

  • JavaScript
  • js
  • array

About this video

Author(s)
Laurence Svekis
First online
11 April 2020
DOI
https://doi.org/10.1007/978-1-4842-5847-7_10
Online ISBN
978-1-4842-5847-7
Publisher
Apress
Copyright information
© Laurence Svekis 2020

Video Transcript

Hey, did you get an opportunity to try out some of the code? Well, in this lesson, we are looking at arrays. And what arrays do is they allow us to hold multiple values within one variable. And it can also hold different data types, so combinations of data types.

We’re going to show you how you can set values, and then also get those values from an array. And much like strings, arrays have properties. So we can get a length, giving us an indication of how many items are within the array. And then also, using the index value, we can output the values that are contained within the array.

Let’s try this out within our editors. So we’re going to start by creating an array, and we’ll call it myArr. And arrays are indicated with the square brackets. So this is giving us an array that we’ve just created. And right now, this array isn’t going to contain any content, and we output into the console. And you can see this is an empty array, so there’s no contents. But we do have the property value of 0, so that means that there’s nothing being held within this array.

And as we mentioned, we can add different data types into this array. So we can add in strings. We can also add in numbers. We can add in Booleans and any other different type of data type that we want. We can also have arrays that are contained within arrays.

So we can have an array within an array, and we can also keep going and add in even more arrays inside. So we’ve got an array that has a length of 5. And notice that this last index value item that’s another array is going to have its own length, and it’s going to have a length of 3. So it’s an array within an array, and it gets counted as one item in the parent array.

So you can output the contents of the array. And there’s a few really nice things that you can do with arrays, such as there’s a few different interesting methods that you can utilize within arrays. So if we console log– and we’re going to take that array that we just created– and use the toString method. And this is going to transform the array into a string format.

And now you can see that it’s comma separated, and it also broke that containing array into a string. So if that’s not what you want, you’ve got to be really careful when you use these methods. Because sometimes, the results might not be something you would be expecting. But if it’s all values that you want to simply turn into a string and you will see the contents of the entire array, then you can really easily transform it into a string value.

Let’s also look at creating another array. So arrays are useful if you have a collection of items. So for instance, if you had a list of your friends and you want to store them all within one variable called friends, this is a great use for an array. So I’m going to add in several different friends that I might have. And adding them in to my array, so that I can reference them all under one grouped variable, the friends array.

So now when I output friends in the console, you can see that I’ve got five items in friends, and they’ve all got individual index values. And this is how we can return back a value that’s contained within an array by using its index value. So we see that Kim is located at index value 2. So if we want to get back whatever value is contained in 2, we just reference it by 0. And arrays are zero-based. So much like what we saw with the strings, where if we want to reference the third item, we’re actually using an index value of 2 to output it.

We can also get things like the friends array length. So we can find out how many items are contained within that array. And you can also change value. So just as we saw with assigning variables and reassigning values, if we can select an item from the array– so if we take friends 2, which was Kim, and maybe Kim is no longer our friend and we’ve traded Kim in for Jill– now we can update our friends array, and we’ve got a new entry in position number 2.

So what happens if you don’t actually know what position you want to place the friend in? And you’re assuming that you’ve got 100 friends, and you want to add one more in. We add Jane at position index value number 100 and we output friends, you can see that now friends has 101. So the length is 101.

So this might not be something that you expected. But this is just the way that arrays work. Because each item in the array– even if it’s empty–, if it’s not holding a value, it still gets counted with its index value. So that way, you’ve created 95 empty spots within the array, and the last one still is going to hold an index value of 100. So that’s something to keep in mind when you are working with arrays.

So what I want you to do now for this exercise is open up your editor and create an array. You can use the same friends array that I have, adding in your own friends. Select some of the friends from the array, output them into the console, and then update some of those friends, adding in some new friends. And I’m going to show you some really useful methods coming up in the next lesson that’s going to make arrays a lot of fun to work with. So that’s coming up next.