Summary of JavaScript Arrays Tutorial

Let's talk about arrays first, because I need to explain this in order to help you with the gallery. So I'll teach you another way of practicing JavaScript if you open your browser developer tools. The hotkey is usually F12, press F12, or if you cannot open that, right-click anywhere in the browser, press Inspect. Okay? And then we can click the Console tab here and start writing JavaScript, actually. You see, this is a prompt, and it can start writing JavaScript. You can actually do like 1 plus 2, 3, you know, 3 times 4, and so on. This is just JavaScript running computations for you. Okay, we can define strings, you know, like we did. Hello. And it just returns you back the same thing. You can make variables like we did, const, paragraph, text, the low-world. And if I say paragraph text, it gives me back what I stored. So I can write it many times, it always gives me back what was stored. So when I want to store, I taught you how we can store one thing. Like I said here, paragraph, text, I can store a string. You can also store numbers. Let's say A equals 3. And if I say A, notice I omitted const here. But usually you need to add that, okay? It's just because we're in this environment of, you know, type something, get something back. So that's A. It's always going to give me back 3. So I can say, okay, let B be 4. So whenever I say B is 4, right? So if I say A star B, that gives me back A, which is a variable that stores the value 3. Therefore, you can think of it as, okay, go, whatever A is storing, I'm going to place it here, 3. Okay, now B is another variable. It stores the value 4. So whatever B is storing, I place it here. Now I can do the operation 3 times 4, and I get back the 12. So if I revert and have A star B, that's 12. Obviously, I like to add space before and after the operator. In this case, the operator is the star, the multiplication. That's just for style or visuals. I think it's better to visualize with the eye. That's the same thing. Okay, so variables store something. Now what if we have a collection or list of many things? Obviously, we can create a variable for each, right? Okay, I'm going to say A is something, B is something, C is something. But that's kind of tedious. Isn't there a way we can group them all together into one single variable? Those are called arrays, okay? So if I say list equals, and the notation here is square brackets. Add the open and closing square brackets. And then within that, you can type the list separated by comma. For example, I can type 3 comma 4 and then comma, I don't know, 7. If I do that, I get back what's called an array. You can see here, array. And the browser is so nice that it can kind of do this thing of unfold and see, okay, 3, 4, and 7. Now an array, it's kind of like a sequence of things, drooped together. And okay, but how can I access each thing? These things are called elements, okay? In this case, we have an array called, a variable called list that holds an array of three elements. The first element being 3, the second element being 4, and the third being 7. Now if you want to access any of them, you have to say first the name of the variable, followed by square brackets, and then you have to give the index of the element. Now every element has an index, but you have to count it from 0, okay? We don't count it from 1, it's 0. So if you want the first element, you have to say 0. So when I say list, square brackets with the 0 between, that gives me back the first element of the array. That's 3. If I want the second element, okay, that has to be, okay, 0 and then 1. 1 is the second, right? Index 1. If I say list, square brackets, 1, that gives me 4, and then the third element has to be, you know, list, substitute 2. It's always minus 1, right? Because we always count from 0. Let me make this bigger so you can see the array there. Okay, so those are arrays. If you want to count how many elements they are in an array, obviously here I can see it visually, it's 3, but within the computer you're not going to be able to see it visually, and the computer cannot rely on you to always be there to count it. So we can say list.length. Remember the dot notation we saw before, document.something? Yeah, so you can ask the array, hey, what's the length by saying dot length? And it gives you 3, 3 elements. So these are very basic access things we can do. Now if you want to assign a new, change some element, like remember, let's change the second element, which is index what? Second is 2, 2 minus 1 is 1. So I can say list, brackets 1. Now I can use this equal sign and then right inside is the new value. Let's say make it 8. Now let's access list. You can see now that the second element has been changed to 8. Okay. Following the same pattern we learned before of the assignment operator here, the equal sign, the left-hand side is what you want to change, the right-hand side is the new value. Be careful with the equal sign here, because you know when you think of equal, we think of comparison, right? Something is equal to something else, but in this case it's not a comparison. It's an assignment or attribution. You're assigning a new value to something. You're changing something to a new value. So be careful. There's always a difference. If once after you learn later on JavaScript, you're going to see two equal signs together and that's a different thing. Okay, that's comparison. It's not assignment, but the single equal sign is assignment. Whenever you need to assign some new value to something, just do it like this. Okay, we've got a question from Nata. How can we add more elements to the list? That's called a push operation. Okay, so you can say list.push and then parentheses. Push is a function and it needs arguments within the parentheses and you can add maybe let's say one. What happens, it adds to the end of the array. So when I say list, I can see the one there. Okay, it's a push. You're pushing something to the end. Okay, it's always the same, usually the same pattern. You have something you want to operate on that dot name of the operation parentheses. If you need to give something provide some additional information, you just so within the parentheses.