Introduction to JavaScript Programming Variables & Blocks

[00:00:00]
>> Kyle: All right, now, back to variables, we've mentioned this many times, but we didn't explicitly define that. And here is where it matters, if you put a var in front of something. So, if I have a program where the very first line says a = 42, I'm assigning to a variable that has never been formally declared.

[00:00:21] And assigning to a variable that's never been formally declared, is a really, really bad idea. Every variable that you use in your program should be formally declared. And it should be formally declared, before the first time you use it. Okay, technically this program formally declares a and uses it, but it makes use of this concept.

[00:00:49] Which we won't really get into here, it makes use of this concept called hoisting. And it's a more confusing program even though it's a correctly running program.
>> Speaker 2: Like I say you should, declares it after the scope tool.
>> Kyle: Yeah, I cover hoisting a lot more in the book on Scope and Closures, so if you wanna get into the nuances of it.

[00:01:12] It has to do with the fact that this program is gonna get compiled first. So it's gonna find that var a before it tries to run anything, but this is a more confusing version of the program. You would always want to prefer, for less confusing programs, to write var a first before you do an assignment.

[00:01:30] And you can optionally combine those two into the same thing, but you would always wanna formally declare every variable. And the way we typically do that in JavaScript up to this point, is with the var keyword. There's two more coming in ES6, one is called let, and the other one we mentioned earlier is const.

[00:01:53] Let and const are block scoping declarations, rather than a function scoping declaration like var is. What that means has a whole chapter [LAUGH] in the book, so I won't get into that too much. But those are the three ways that you formally declare a variable in JavaScript. There's one other way to formally declare an identifier, and that is to declare it as a function.

[00:02:16] And we haven't talked about functions yet, but if I said function a, I'm declaring a variable called a, which has this function value in it. So you always want to formally declare your variables, in one of the ways that I just showed. Let me put those other ones by.

[00:02:40]
>> Kyle: Those are the ways to formally declare variables, and you're always gonna want to do one of those in your programs. There's a notion in many programming languages, and JavaScript is no different. That if I had a collection of statements, like var a = 42, and foo (a / ), these are statements.

[00:03:01] And if I had a collection of statements that represented a logical unit together. Then I could put those statements together inside of a curly brace pair, like we see there, and that's called a block. A block, essentially, is a pairing of curly braces with one or more statements inside of it.

[00:03:23] Now this block is a completely stand-alone, empty block, it doesn't mean anything the way we've expressed it. It's a stylistic thing, it says these two things belong together, and they're separate from other stuff. Like if you had a program that looked like this, and you had stuff up here, and you had stuff down here.

[00:03:45] You're stylistically signalling these two things in between, they're kind of special. They're shut off, they're their own deal. So there's not any functional difference here. But most of the time blocks are not appearing by themselves like that, most of the time they appear associated with. Another kind of a statement, so there's different kinds of statements that have blocks associated with them.

[00:04:11] For example, which we'll into in a little bit, the if statement. So if I wrote a statement where I wanted to say, if a was greater than 10, and attach a block to it. Then what I'm saying is, look at this statement, and figure out if that's true or false.

[00:04:31] Is the value currently in a, greater than 10, or not? It's only one of two possible answers here. In our program we would have had to declare the var a, and give it some useful value like the value 42. And then give it some other value down here.

[00:04:50] So if I said if a is greater than 10, is the answer yes or no?
>> Speaker 2: Yes, it's greater than 10.
>> Kyle: Yes, it's greater than 10, so we would go into the block only if we answered yes to this question. This asked a question, we go into that block and do these things only if the question answered, yes.

[00:05:10] In programming terms, yes and no are actually what are called the values, true and false. So the question is is that statement true, and the answer is, yes, it is true. So we would execute the stuff inside of the block, otherwise we don't. So that's one way to attach a block to something, is to an if statement.

[00:05:28] Another way to attach to a block to a statement, is to have a loop, like a y loop, or a 4 loop, or whatever. And we'll come to loops in just a moment, but you notice that this block again, it belongs to that statement. And it's only going to get executed in the context of that statement.

[00:05:48] So it will only get executed if this loop is going to happen, in this case, the loop is going to happen once. Because the first time we enter, a is greater than 42, but immediately we set it to 10. So the next time we try to do this loop, it's not going to keep going.

[00:06:05] Because a will no longer be greater than 10, It will just be the 10 itself. If we have a block that's not associated with anything, it means it's going to run every time. Or, we can attach a block to something, and it means it's only going to run conditionally.

[00:06:20] If that statement actually results in something that we want to do. There's lots of places where blocks can appear, blocks can also appear as part of a function statement. So here that block of statements only happens for this foo function. Probably don't wanna call recursively, so I'll call a different function here.

[00:06:42] Now this block only happens if foo ever gets called, so it doesn't run right away. But if later in a program I try to invoke the function, then it would find that block and it would run that block of code, okay? So just think conceptually, if I wrap a curly brace pair around the set of code, I'm putting that as a collection of code.

[00:07:00] And then I can attach that block to various different kinds of statements. And that will change how, and if, and when that block gets executed, that's the major takeaway.
>> Speaker 3: There is a question here to the bottom, if you wanna read it.
>> Kyle: Question was essentially, you can declare a function like that, or you can declare a function-

[00:07:27]
>> Kyle: Like that, and technically there's a third variation. Which is to give it a name itself, which doesn't have to be the same. Those are all functions, those are not all function declarations. The first line is a function declaration, the next two are function expressions attached to a variable declaration.

[00:07:49] There's a variety of differences between these, and we'd get too far off track if worry too much about those nuanced differences. So there's a variety of differences between them, but the major takeaway here that you would want to-
>> Kyle: That you would wanna not forget, is that in all three [COUGH] of these cases, the block is associated to a function.

[00:08:14] And the block will not run unless you execute the function.
>> Kyle: So the nuanced differences between function declarations and variable declarations with function expression assignments. Those nuanced differences are outside our scope of discussion here. They are covered in depth in the book series. So next steps, you would wanna pay more attention to that reading through the books.

[00:08:38] They're also covered in my training, my advanced JavaScript training.