JavaScript Overview

[00:00:00]
>> Brian Holt: So let's frame how code works then. So I have a little snippet of code here that is a valid JavaScript, okay? JavaScript is a thing that we're gonna call single threaded, which is a fancy term that you don't really have to carry about, but it just means that only one thing is ever happening at a time.

[00:00:18]
If you're coming from a different language this means that there's no concurrency in JavaScript. It's not multiple things happening, it's always just one thing happening at a time. In general, it's gonna be what we call procedural. And I'm just throwing out all these terms because someone is gonna throw them at you, I'm trying to get you used to some of these terms.

[00:00:35]
But procedural just means it goes if line one executes, then line two, then line three, then line four. It's kinda what you'd expect, right? It's how you would read. So this here on line one, we've declared a variable monthly rent. And this is, as you might imagine, representing how much it cost per month to live in some place, right?

[00:00:57]
Const just means that we're declaring a variable. So now we have this monthly rent variable that is storing the value of 500, right? So if I just come underneath here, and I said console log, monthly rent, you can see down here in the results, you can see 500 comes up, right?

[00:01:19]
So now monthly rent is representing that 500, right? If you've ever did algebra, this is much the same that you'd have like x squared equals one, right? And then, you would have to solve for x, right? This is the similar idea that we have these symbols that represent something else.

[00:01:34]
Does that make sense? It's a very fundamental concept. So let's make sure that you get this, okay? So now we have monthly rent. This console log thing right here, this is just allowing us to display this down here. We'll talk about how that functions a little bit more later.

[00:01:54]
But suffice to say, if you put console log, then parentheses, whatever you put between those parentheses is going to be logged out to your console. Okay, so I'm just gonna delete that. As you can see here, these little code blocks are being executed in your browsers and so you can kind of play around with them and see what happens.

[00:02:14]
Just be aware that if you refresh the page, it's going to delete everything that she did so. Okay, so what is const? Const is a keyword in JavaScript the same like I'm declaring a new variable, right? There's several ways to do that. We're using const which means that this can no longer be altered.

[00:02:34]
So I cannot come down here and say monthly, I can't spell it, equals 100. Notice it says right here, invalid assignment to const monthly rent that's because when you say const, it can no longer be reassigned to something else. If I wanted to do that, there's a different one called let.

[00:02:53]
And the only difference between let and const is let allows you to reassign it later. So now this works just fine,
>> Brian Holt: Okay?
>> Speaker 2: Sorry.
>> Brian Holt: Please.
>> Speaker 2: So when you say reassign it later, you mean the value of it can be changed later?
>> Brian Holt: Yep.
>> Speaker 2: Okay, so the 500 in that case.

[00:03:17]
>> Brian Holt: Right.
>> Speaker 2: If it's const, then that monthly rent will always be 500, you can't change that.
>> Brian Holt: Forever, exactly. It will forever be 500. That's a good observation. So down here on line three we see yearly rent equals monthly rent times 12, right? So notice that we're doing math with monthly rent because monthly rent is just a stand-in for that 500, right?

[00:03:45]
>> Brian Holt: But what's great about this, now if I come in down here and use monthly rent again, let's say const decadelyrent. That's a word, right? We're rolling with it. It's decadelyrent cuz that's a useful thing. I could say monthlyrent times 120, right? And then down here I'm just going to put decadelyrent rent.

[00:04:09]
And notice that is 10 times bigger. So like you would expect, right? Or if you wanna make this even bit more clear, right, cuz 12 months in a year and 10 years. But notice I'm using monthlyRent in two different places. The advantages here, instead of just writing 500 in every single place.

[00:04:28]
Just now let's say I move places, and my rent changes, right? Now we're moving up in the world so now it's 750, right? So if I change this to 750, notice that I only had to change it in one place and then it just perpetuated to all the other places, right?

[00:04:44]
Not only that, but it makes sense that yearly rent would be monthly rent times 12, right? So you can kind of, it's almost allowing you to document your code in the process of writing the code. This is what I was talking about being clear, right? It makes sense that yearly rent would be monthly rent times 12.

[00:05:01]
>> Brian Holt: Good so far?
>> Brian Holt: Going back to this being let, and say now monthlyRent = 1000, cuz of gentrification or something like that, I don't know. [LAUGH] What do you think yearly rent is gonna be now? Well, notice down here that it is 12,000. So notice that it's going to take the last value that you signed, right?

[00:05:29]
When I do this, this previous 750 is thrown away. It's no longer accessible at all, right? So now it's only 1000.
>> Brian Holt: I think these things are kind of intuitive, I hope they're intuitive to you. They're meant to be intuitive. But sometimes it's just making sure that we kind of go over them.

[00:05:47]
Something else to note here, so notice that I'm squishing these things together, right? So I have yearly rent. This is called camel casing. Because it looks like a camel with the humps in the middle, right? I'm not making this stuff up. Someone else did. This is very common with JavaScript.

[00:06:04]
If you're coming from another language like Python, they tend to do something called snake casing. Yep, snake casing looks like that. This would be valid JavaScript. So meaning this will still execute just fine. I guess I would have to change it down here, too. It's just not how we do it in JavaScript, right?

[00:06:27]
So I would implore you while you're writing JavaScript to make sure that you're doing camel casing.
>> Brian Holt: And notice I can't say like yearly space rent because that doesn't make sense to JavaScript. When it sees the space it's like okay, you're finished with that previous thought, and then starting another one.

[00:06:46]
And it says I don't know what this is, and so it gives you an error. So that's why we have to kinda squish everything together. And that's what we use camel case that makes it really easy to read quickly, right? Does that makes sense? Okay, so lowercase first letter, and then you just kinda capitalize all the proceeding words.