Introduction to JavaScript Arrays. When working in JavaScript, sometimes you need a variable that can store multiple values. For single value variables, JavaScript has primitive data types. For multiple entries of values, JavaScript has collection data types. And the first collection I'm going to introduce you to, is an Array.

And what is an Array? Well, it is an ordered list of values. I'm going to begin by writing out an Array, const myArray = starting with square brackets, square brackets denotes that this is an Array, dog comma, one comma, true comma, cat. Now examining this Array, the first thing to note is that the value stored inside of the Array can have different data types. This also includes other collections, meaning I could have an Array instead of Array. And each value that is stored, is referred to as an element of that Array.

Now, earlier in the video, I mentioned that an Array is an ordered list of values. Every element in the Array has an associated index value. Also Arrays are zero index, simply meaning that when counting, we start with zero. I'm going to demonstrate this. Starting with the string value of dog, there's an associated index value of zero. And then for the number value of one, the index value is one. Then for the boolean value of true, the index value is two. And lastly, for the string value of cat, the index value is three.

Now in order to access an Arrays value at a specific index, we need to write out the Arrays name, followed by square brackets. Inside of the square brackets, we write the index value for the location of the data that we want. Now, looking at this Array, the value at the index of zero, is dog. Some of the type that out and use console log to display the value. console dot log, passing through my Array, using square brackets and putting in zero for the index value. And I'm going to click on run and in the console, we can see the output of dog matching the value and our expectations. Now, if I change the index value of zero to two, the value of true is displayed in the console.

Now, what would happen if I tried to access the Array at the index of four? I'm to replace two with four, and the error shows undefined, which means that this value doesn't exist. Now, what if I wanted to add data to this Array? I can use the push method. My Array, dot push, and I'll pass you in the value of 55. And the push method will always add data to that end of the Array. And I'm going to comment out this previous console log and make a new one down below, with the value of the full Array, console.log and in the output to the right, we can see 55 as the last item in the Array.

Now, what if I wanted to remove that last element in the Array? After the push method, before the console log, I'm going to type, myArray.pop. I'm going to go ahead and hit run. And the Array in the console no longer shows 55, that's the last element. Now these last two methods had something in common. They specifically worked with the last element of an Array.

What if we wanted to insert or remove a value at a specific index? That's where the Arrays splice method comes into play. I'm going to write out the method first and then explain each aspect of it. My Array dot splice passing through a two comma one, comma false. Two represents the starting index where the splice is going to insert. Currently, the value of true is located there. One is the delete count. So from the index of two, including the index of two, I will delete one element. False is the value I'm going to insert after the deletion happens.

Now I'm going to run the console log again, and true has been replaced by false. If I wanted to insert multiple values, that is an option. I'm going to add another false, after the current false in the splice method. Now I'll execute the console log again, and we can see that we've inserted two values of false into the Array.

What if I wanted to remove the cat value too? Well on the delete count, I'm going to change the one to a two. So I'm going to delete two elements here. And run the console again, and on the screen, there's no longer an element with the value of cat as part of this Array.

Now I'm going to clear out most of the code here, and there's one more method I like to demonstrate. Sometimes you're working with large data sets and you need to have some sort of idea of how large the data set is. Well, JavaScript has a built-in Array length method, and this will tell you how many elements are currently in the Array. So on the line below, I'm going to, console.log. And to the right, we could see the value of four in the console. And that's it. Thanks for watching at Cloud Academy.