Introducing Arrays0:00
Okay, let's move on to Arrays. Remember, Arrays are no longer a primitive type, but a reference type. Again, we'll look into the difference between primitive and reference types later on. So think of Arrays as a collection of data. For example, a group of people or a list of to-dos. So whenever you refer to something using the plural version, like people or to-dos, then you usually want to use an Array. So let's define a few Arrays here so you can see some examples. So we'll start off with an Array of people. So we can say const people.
Creating Array Literals0:28
So we'll start off with an Array of people. So we can say const people. And we can use the square bracket syntax, also known as Array literals, to define a new Array. So we can say Andre, Bob. And we can separate items with the comma. Say Jennifer and Mary. Okay. And each item can be any type. So right now we have an Array of strings here,
And each item can be any type. So right now we have an Array of strings here, which represent people's names. But like I said, you can have any type. So let's make a new variable. Name it numbers. And let's just put some random numbers in here. That should be fine as well. Okay. And if you want, you can even have mixed types.
Okay. And if you want, you can even have mixed types. So say const mixed equals. We can have a string. We can have a number. We can have a Boolean. We can have an object, which we'll take a look at in the next video. We can have null. We can have undefined. You can even have an Array within an Array.
We can have undefined. You can even have an Array within an Array. So let's define another Array in here. Say 1, 2, 3. And that should be valid. So if we console.log any of these, these should be fine. So let's console.log people. And the other Array should be similar as well. Now, if you want to access one of these items in the Array, we can make use of what's known as an index of the Array.
Accessing by Index1:41
Now, if you want to access one of these items in the Array, we can make use of what's known as an index of the Array. So if we open up this in DevTools, you'll see that for each value, there's an index on the left. So we have 0, 1, 2, and 3. So Arrays in JavaScript and in most programming languages have what's called a zero-based index. So that means the first item starts at 0 rather than 1. So now if you wanted to get a certain item,
So that means the first item starts at 0 rather than 1. So now if you wanted to get a certain item, again, we can use the square bracket syntax and refer to it using the index here. So if you wanted to grab Jennifer, we can say people, and the index of Jennifer is 2. And that should return just the string Jennifer. Cool. Now, using loops with Arrays makes for good examples and exercises,
Array Properties and Methods2:21
Cool. Now, using loops with Arrays makes for good examples and exercises, but we haven't looked at loops yet. So for now, we'll just take a look at some of the built-in functions and properties of Arrays. And I know we haven't taken a look at functions yet, but for most of them, this should be pretty self-explanatory. So let's start off with the length of the Array. So if we wanted to grab the length, we can say people.length,
So if we wanted to grab the length, we can say people.length, and that should be 4 in this case. Now, what if we wanted to add an item at the end of the Array? We can use the push method and then add the item. So we can say people.push, and within the brackets is the item you want to add to the Array. So in this case, we'll add a new person here, say Chris. And then let's console.log people again,
So in this case, we'll add a new person here, say Chris. And then let's console.log people again, and now it should have Chris at the end. So let's console.log people one more time. And now we have Chris at the end there. Now, what if we wanted to remove the last item? We can use the pop method. So in this case, Chris is at the end, but if we do people.pop, that should remove Chris and also return it.
but if we do people.pop, that should remove Chris and also return it. Again, we don't really know what return is, but for now we can say const Chris as a variable equals people.pop. And if we console.log people, it should now not have Chris because we used the pop method. Okay, and if we console.log Chris, that should be the string Chris. Now, what if we wanted to replace a certain item in the Array?
Replacing Array Items3:43
that should be the string Chris. Now, what if we wanted to replace a certain item in the array? There are several ways to do this, but if you want, you can just replace it directly using the index. So for example, for our numbers array here, say we wanted to replace the 6 here with another number. So let's go ahead and say numbers, and we'll use the square bracket syntax. And within here, which index do we want to replace? In this case, it's the 6.
And within here, which index do we want to replace? In this case, it's the 6. So that's 0, 1, and 2. And we can say equals, and let's just replace it with another number, say 36. Okay, and let's console.log numbers, and let's save that. And now you can see this 6 was replaced with 36. Now, this line right here sort of looks like we just reassigned the variable. And if you look here, we are using const,
Now, this line right here sort of looks like we just reassigned the variable. And if you look here, we are using const, and if you remember, you can't reassign a variable that's declared with const. But in this case, it's an Array, and we're not really reassigning the variable. We're just updating the contents of the variable. So this is fine, but if we were to do something like this, say numbers equals a totally new Array,
but if we were to do something like this, say numbers equals a totally new Array, say 1, 2, 3, then we would get that error that we can't reassign because we're using const. And there it is. Let's take a look at a few more methods here. Back to our people Array here. Let me just actually remove all of this. So we're just working with the original Array here.
Let me just actually remove all of this. So we're just working with the original Array here. But if we wanted to add something to the front of the Array as opposed to the end of the Array, we can use the unshift method. So people.unshift, and let's say Nancy. And again, if we console.log people, Nancy should be at the front. And I have to get rid of this statement here.
Nancy should be at the front. And I have to get rid of this statement here. Okay. And if we wanted to get rid of the first item in the Array, then we can use shift instead. So again, I'll comment this out. So we have the original Array first. Let's use people.shift(). And then let's console.log people. So this should be Bob, Jennifer, and Mary.
Searching and Combining Arrays6:26
then it should be false. Now, what if we wanted to find an item in the Array? We can use the indexOf method. So again, we'll look for, say, Jennifer. And she's at index 2, 0, 1, 2. So let's try that out. console.log people.indexOf(Jennifer). And that should be 2. Okay. And it is 2 right here.
Okay. And it is 2 right here. But if we gave it something that didn't exist, like Harry again, then it should result in -1. And it does. We can reverse an Array using the reverse method. So people.reverse, pretty straightforward. This will reverse the Array. We can join or concatenate two Arrays.
This will reverse the Array. We can join or concatenate two Arrays. So let's make a new variable here, say const joinedArray equals people. And we'll use the concat method. And we'll join it with or concatenate it with the numbersArray. And we'll console.log that. And you can see the result here. So here's our peopleArray. And here is our numbersArray.
