In this section, we're going to learn about arrays. We will have several movies, dealing with arrays, how to create them how to reference items in an array, how to work with arrays. Those are the types of things we'll be covering in this section. But first, we need to introduce what arrays are and how to create them. Now an array is simply a list of values, we've used variables quite a bit. And a variable can contain a single value, while an array can contain a list of values.
Now when we introduced objects, we defined it as a collection of values. So what's the difference between an object and an array? Well, when we introduced objects, we indicated that an array is a type of JavaScript object. So in that sense, they're very similar However, arrays give you some special methods functions defined by that object to work with a list of values. Arrays also have a way to address or reference the values that contains using a numeric system. In objects, as you remember, we have key value pairs or name value pairs.
And so there is a name associated with the value. In arrays, there is a number associated with it. So that can provide some advantages over working with objects. And it's in those situations that you'd want to use an array to deal with a list of data a list of values. So before we look at the syntax of creating an array, let's look at an image that gives us a good picture of of how arrays work. So this is a sample array that has three numbers in it 179 and 55.
These represent grades. Notice in the upper left hand corner, there is another number 01, and two, this is how you reference those individual values. If you want it to get the first grade in the array, you would use a zero array start indexing at zero. Now what is the actual code that would create an array that looks like this? Well, here it is. We declare it just like a variable.
We have the var keyword. Then we have the name of the array grades and then we have the assignment operator. Then to define the array, we use a set of brackets. It could simply be opening and closing brackets without anything in between and then The array would have no values at that point. However, in this example, what you see on the screen, we have three values, three grades 179 55, and they are contained, or they are enclosed within those brackets. So it creates an array with three values.
Now how do we reference those values in the array? Well, here's a sample console dot log statement, referencing the first value of the ray grades, brackets again, and inside the brackets, a number the index of the value we want to reference. So the first value in the array is indexed at zero. And so in this case, we're displaying 100. All right, let's open up the console and take a look at some real examples. So first, let's create an array An empty array, I simply use opening and closing brackets.
Now this array has nothing in the way we can tell. The array object has a length property, which we've used with the string. And that returns zero, meaning there is nothing in that array. Well, let's add some elements to that array. Let's define this again. In subsequent movies, we'll look at some methods that allow us to add elements to an array.
But I'm going to look at adding those elements while we define the array. The same elements that we showed in the example now let's look at grades dot length and it shows three, so we have three elements in there. Now if we wanted to reference one of those elements, we use the brackets again. And then inside the brackets as indicated, we use the index of the value or element we want to reference. In this case, we are referencing the very first value. And that's what that's 100.
So the second value would be one, the third value would be two. Okay, now there's another way to define an array that I want you to be aware of. The method we've just shown is the method you should use. You should use the brackets to do that. But also JavaScript supports this. I'm going to do a second array grades two equals new array.
This is the constructor method of defining an array. This will create an empty array. If we wanted to add values to it, same as we did in the previous array, we would do it like that when I press return, and then when we reference grades.to dot length, we get three. So the defining of that ray is different, but the end result is the same. In both cases, we get an array with three numbers in it. Now using the brackets to define an array is preferred.
One reason is because it's so simple and so short, so it requires very little typing to define an array. But there is another reason I want to show you. Let's do grades three. Let's say I want to create a an array with just one value and that value happened to be 50 we only had one grade at this time. All right, let's take a look at the length of grades 351 more thing, let's take a look at grades three, and then see what's in position zero, which should be a 50. It says it's undefined.
So what happened there when we define the array with just a single number, what the constructor thinks you're trying to do is you want to define an array of with a length of 50. So with 50 places for values in it, and so that's what it thinks is happening with a single number. So to sum up, the preferred method for defining arrays, is using the brackets. Then when you want to reference individual values within an array, you use an index of those values starting with the number zero Alright, let's take a look at some methods that are a part of the array object that allow us to add values to or remove values from an array. Before we complete this movie, I'd like to show you one additional thing you can do with arrays. And that's how to display the contents of an array.
That can be important when you're trying to solve a problem and you're not sure what's going on in the array, or you simply want to output the array as part of a string. So to show that I'm going to paste in a line of code here. That will create a new grades array. And if we want to convert this array to a string and display it as part of a string, we can do it this way. So I'm going to create a string and then I'm going to concatenate the array to stream using grades.to string to string method of of the array object will convert all of the items within the array to a string separating them by a comma. So here's what we see.
And as you can see all the elements in the array or there with a comma. If you're simply working with an array and you need to display it to see what its contents are, you can simply type that array here in the console to see its contents. But if you want to output it, if you want to display it, why don't want it to be part of a string, you need to use the to string method. All right, let's continue on.