Stop Low Resolution Warning Sign

Transcript

Transcript of the tutorial. TOP


          
        
Okay then, my friends.

So throughout this chapter, we've looked at a lot of different control flow techniques, and in each

one of those different techniques we've seen code blocks like this, curly braces and those code blocks

are just little sections of code that run when something is true or some condition is met, right?

So now we know what code blocks are.

One last thing I want to talk about in this chapter is block level scope with variables and by the word

scope, I mean the area in which a variable value is relevant.

So I already have this if statement right here.

What I'm also going to do is create a variable.

So I'm going to say let age equal to 30.

Now then if I define a variable using let or const in the root of the document, meaning not inside

any code block, it's in the root of the document up here, then that will have global scope and that

means it can be accessed anywhere in the file if I want to use it.

So it could be accessed inside this code block.

It could also be accessed outside this code Block So let's just down here, console dot log outside,

code block just to let us know where this is, and then we're going to output age, okay?

And then we're also going to do the same thing, but we're going to do that inside the code.

Block So let's paste this inside here.

And I'm going to say inside first code block and output the age there as well.

So I'm just showing you this to demonstrate that we can access this variable which has global scope

outside of the code block and also inside anywhere in the file because it has that global scope.

So if I save it, we can see that we get that value in both cases.

Okay.

So that is global scope.

Now I could also change that variable inside here.

So I could say now age is equal to 40 inside here and that is going to access this global scope variable,

change it to 40 and then output it here and here.

So if I save it and preview, we can see that now it's 40 in both cases because we change it here first

before we output it anywhere.

Now that what if I try to redefine age outside here?

So if I say let age equal to 50.

So I'm trying to redefine the variable again, I'm not just trying to overwrite it by saying age is

equal to 50.

Now I'm trying to completely redefine it by saying let age equal 50.

Now it's not going to let me do this.

It's already been declared and I can't do this because it's in the same scope.

Okay, Now then, what if inside the code block I tried to say let age equal 40?

Well, what's going to happen there?

Because I'm trying to redefine it again.

Well, if I save it, let's preview the results.

So we see inside the first code block, we get 40 for the age and outside the code block 30.

So firstly, most importantly, we don't get an error.

So we are allowed to do this.

We're allowed to redefine the variable inside a code block, even though it's got the same name now.

Secondly, it's only creating age equal 40 Inside this code block right here outside age still refers

to this, but inside age refers to this.

So what this is doing here is creating a local scope for this variable age inside this code block.

If I just use age, then it refers to the global variable that's already been defined.

But if I redefine it, what it does is recreate this variable, but it gives it local scope.

Now we can only access this version of age inside this code.

Block So let me try something else.

I'm going to say let name equal to Sean.

And what I'm going to do is output age and name here and age and name here.

Let's see what happens.

Save it and preview.

And we see Sean here.

But we don't see it outside the code block And that's, again, because we're creating this variable

inside the code block.

We're giving it a local scope, meaning the scope of this variable is only valid inside this code Block

because we define it inside here.

We're not defining it outside here with root level, scope or global scope.

So if we define something in a code block, it only has that scope and we can't access it outside of

that code.

Block Does that make sense?

Okay.

This is also true for nested code blocks.

And by that I mean if we had some other if check in here.

So we'll just say if true so that it does fire.

This is a nested code block.

We have a code block nested in another block.

Now inside this code block.

What if I try to access H.

Let me console.log, first of all, and we'll say inside second code block and spell this correctly,

we'll output H.

So what value do you think we're going to get here?

Because we've defined it here, but we've also defined it here locally.

If we save it and preview, we can see inside the second code block we get 40, which is the value we

defined in here.

So what it's doing is taking the most recently defined value.

So the value whose scope is most immediate outside of this code block If this wasn't here, then it

would take this value.

I can demo that, save it and we can see 30, but because we've redefined it inside this code block

and this code block right here is all of here.

This is the scope of this variable.

Now, all of this code block, including this stuff in here, it means that inside this code block,

when we use H, it gets this value.

Okay, then.

So what if I try to say then let age equal to 50 inside this code?

Block Well, again, we're creating a new variable with local scope, but this scope is only valid inside

here.

So we're not overwriting this one right here.

We're creating a new local one with local scope inside just this code block.

So if I save it now and preview, then we should see 50 inside the second code.

Block Okay.

Now so far we've just used let.

But the same would be true if we used const.

So let me just now change all of these to const.

I'm just going to place my cursor in front of all of those and change them all to const and save it

and we're going to see exactly the same results.

Obviously we can't change constants, so we couldn't later on say something like age is now equal to

35 because once we define a constant, we can't change them.

But the same rules of scope apply to const as they do to let variables.

So this idea of block scope is one of the main advantages of using let and const instead of the older

var keyword.

Because when we make a variable using var, it ignores block scope.

So we could have a variable defined down here.

Let's just say var test is equal to hello and we can then access that outside down here.

So we could say test and that would work.

So even though it's defined inside this code block, it's not given block scope, whereas these things

are once we create them.

Okay.

So that is one of the main advantages of using Let and const, because a lot of the time it's useful

to declare a variable that is only used inside a code block.

It's much better to use let and const instead of var where possible.

So this idea of block scope might seem strange at first and even probably could go straight over your

head.

But do watch the video a couple of times over if you're struggling just to understand at least the basics

of block scope because it will definitely benefit you going forward.