Arrays

[00:00:01]
>> Let's connect the last bit of JavaScript knowledge before we start doing more application. I'm trying to get you familiar with programming fully as a concept and then we're gonna go to start doing fun applications of it. You can think of objects of grab bags of data. Think about as objects or unordered lists, so it's data with no sense of kind of order.

[00:00:29]
Arrays are like ordered lists where things come in an order, right? So for example days of the week, those come in a specific order. Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday, right? If I move Tuesday in front of Monday, now it's incorrect, right? There's an order implied here and that's what an array is.

[00:00:50]
It's just a list of other data. In fact, you'll probably hear me say the word list and array interchangeably. Most programming languages use those two terms interchangeably. There's not a list in JavaScript, there's just arrays which means that I use list to describe arrays sometimes. They're called arrays, just so you know.

[00:01:10]
Okay, so if I say console.log days of the week, I will get the full array. Right, and this is just a list of strings, right? It's an array of strings. Okay, if I say console.log(daysOfTheWeek) and then I use the square brackets to look for the 0th element, then I'll get Monday, right?

[00:01:36]
So that's the one thing about programming and this is generally applicable to almost every single language is we, computer scientists start counting from zero not from one, right. So the 0th element is the first element, the one element is the second element. So if I asked for the one index of days of the week like I do here, which one do you expect to get?

[00:02:05]
Tuesday, correct, because zero would be Monday, that makes Tuesday, one. If I asked for the sixth index, which one do you expect to get? Sunday, right, because it's the seventh one there. So it's kind of hard to get used to it at the beginning, but once you start programming for a while, you can't think of any other way of counting other than from like starting from zero and going forward.

[00:02:32]
It just makes things a lot easier. And so that's, I mean, mostly what arrays are is they're just collections of data. They're just like a shape that you can put data into. So you can have arrays of strings. You can have arrays of numbers. You can have arrays of objects.

[00:02:54]
You can have arrays of arrays. You can have arrays of strings and numbers. It doesn't really care, right, it doesn't have to be homogenous, right, you can mix and match, right? Generally you don't, generally it's a good idea to kind of keep them homogenous cuz I think that makes your code more clear.

[00:03:12]
But there's absolutely no reason I can't just put 5 here arbitrarily. So now what is this one gonna log out here? 5, it doesn't care, right, it'll just do whatever you tell it to do. Cool, so square brackets. When you see square brackets, you know that you're looking at an array.

[00:03:37]
When you see angle bracket or angle curly braces, sorry, when you see curly braces you know you're looking at an object. Just something to keep in mind there. You're always gonna separate them with a comma, all of the various different elements in the array. And this last one here, technically optional.

[00:04:01]
Up to you if you wanna put it there, but the last one is optional. Generally, I put it cuz then I don't have to think about which one I'm looking at. And the other thing that's nice about it, let's say I wanted to go add another thing to the end of the list, I don't have to go back and write another comma, it's just already there.

[00:04:31]
Okay? So looking at this one, prime numbers, which is just a array of numbers, right? Prime numbers that I just put in there, 1, 2, 3, 5, 7, 11, 13 and 17. The length is how many items are in that array, so it's gonna give you back a number representing how many items are in it.

[00:05:01]
It doesn't start from 0 by the way. So 1, 2, 3, 4, 5, 6, 7, 8, so I would expect to see 8 there. And I do. Makes sense I think, right? Join is kind of a fun little method that's on arrays, cuz arrays have a ton of built-ins as well.

[00:05:28]
It's going to take whatever string you put in here, and then it's going to make a string out of the entire array for you. So this is now one string and is separated by these horizontal bars, right? But I could put question marks there, right? I could put exclamation points, it doesn't care.

[00:05:45]
Whatever you put there it's how it's gonna join those things. I can put empty string and it'll actually literally just mush them all together into a single number. Or I can do comments, right, or bars or slashes. Whatever you wanna do. So that's kind of fun, if you need to take an array of something and collapse it down to a string.

[00:06:21]
Okay, so let's look at this one. I have an array called courses. These are objects, right? So I have a teacher on here, right, there's me. I teach the React course. I think it's pretty good my opinion. There's a function here on courses called push on arrays, right?

[00:06:46]
Push is just going to add something to the end of the array. You're trying to push something on it, right? So if I push another course on there, Now there's the same array, but this array has one more course on it. It has this Jen Kramer course on it, right?

[00:07:08]
So if I say console.log, courses.length here, and then I do it again here, Is line 9 and line 13 going to log the same thing? No, why?
>> [INAUDIBLE]
>> Yeah, so there's one more thing on it, so it's one longer, right? So if I go look at my output here, there was five before, one, two, three, four, five.

[00:07:38]
And now there are six on it cuz I added one more to it. So that's what push does. Courses is just gonna log out the entire array, right? So you can see here on the end that Jen's course has now been added to it. And I can replace things, right?

[00:07:55]
So I say course is two, which one's course is two, zero, one, two. I'm replacing my own course on it there, right? And I'm changing that to be now to be the Complete Intro to Databases, a different course that I teach. You know something I didn't even think about, we could even do something like this, cuz we're not changing teacher, right?

[00:08:18]
We could totally just say course equals blah. Course 2, and on that object change the course to be equal to complete intro to databases. This sign this needs to be equals. Now if you go down here, still the same thing, right? You can combine those accessories together, which is interesting.

[00:08:53]
What else can we do? We can also say, all right, so let's get rid of some of this stuff. Let's do another function here. So I'm gonna say courses.pop. What pop does is it removes the last thing in the array. So I have Scott Moss' course here, and this is going to be taken off, right?

[00:09:25]
And actually if I say const scott equals this, it'll actually take it and return it to you. So now Scott, this variable here will be this particular variable, right? So if I say console.log, Scott, you'll see that it's just Scott's course right there. No, it's Jen's cuz that's the one I put on.

[00:09:49]
See, I wasn't even thinking through it. [LAUGH] Right, cuz I pushed Jen's course on here. Okay, so that's not Scott, we should say Jen. Now if I say console.log(courses.length), This was five, this was six, what is this? Five, we went back down. There we go. So there's just a bunch of functions like that built into, there's a shift and unshift, which are the worst named functions by the way, but that's what they're called.

[00:10:39]
Shift removes off the front, and I think they invented that one for instance like, okay, you might need to take something off the beginning, right? So if I said courses.shift, console.log(courses.shift) it's going to remove I think Wills course and return it to you. You can see right there removes Will's course there.

[00:11:04]
And now I can say courses, what's the opposite of shifting? unshifting(jen). So now what's the first item in my array? Jen, right, cuz undoes what shift does. It's not intuitive at all, it is the dumbest name that I can possibly think of, but that's what it's called. By the way, I almost always have to look this up, cuz it just doesn't make any sense to me.

[00:11:39]
I can never remember what it is, so I have to usually look it up. I just feel lucky that I remembered this time cuz I'm on camera.