All language subtitles for 007 The Concept of Scope in the Context of Javascript_en

Alright guys. In the last lesson we came across this concept of scope very briefly and I promised that I'd

go through it in this lesson.

So here we are.

Now scope is a really important concept in all kinds of programming and not just Javascript programming

but it works a little bit differently from language to language.

So in this lesson I'm going to be focusing specifically on Javascript and all of the ways in which Javascript

tackles this concept of scope.

So what exactly is this concept of scope anyways?

So let's say that we've created a function called a

and inside the function we create a new variable called x and we set it to equal 2.

Now if I tried to console log x inside function a, then of course there's no problems and I would get

2 printed in my console.

Now creating our variable inside a function is kind of equivalent to having an apple tree inside your

backyard

right?

Your house is surrounded by walls and you've got this apple tree that's inside your garden and you go

ahead and you go and pick from your apple tree.

Well this is of course possible.

So our code in this case when we're using this variable x inside the function where we created the variable

x is of course possible.

Now let's look at another scenario.

Let's say that you create your variable x inside your function a, but you try to access it outside

the function.

Well this is not going to work because this is equivalent to your neighbor trying to pick the apples

from your apple tree in your garden.

There's a brick wall that blocks him from accessing your garden.

And this is where scope comes in The scope of variable x is local to function a.

It's only accessible inside the function a

so you can change it,

you can use it, you can manipulate it, do anything you will with variable x inside the curly braces of

function a

but you cannot access it outside those curly braces.

Now this also holds true in a third scenario.

Say you have two functions a and b. You create the variable x inside function a and you try to use it

inside function b.

Well that's not going to work either

right?

Because this is like your neighbor standing in his backyard trying to access the apples in your backyard.

That's never going to work.

So again in this case, the scope of variable x is limited to inside the curly braces of function a.

Now these are called local variables and the scope of local variables are local to where they were declared.

So in most cases that's inside the curly braces of a function.

Now here's another scenario. What if instead of creating the variable x inside function a, we create

it outside the function.

So when we write var x, the keyword var states that we're creating this new variable x.

And it's created outside the curly braces of any function.

Well in this case, not only can you use it inside function a,

you can also use it anywhere else inside the code file.

And this is equivalent to an apple tree that's growing in the neighborhood.

So not only can you the person who lives in a house in the neighborhood pick apples from the apple tree,

but your neighbor who lives in a different house can also pick the public apple tree in the neighborhood.

So these are known as global variables.

Now there's a few peculiarities about Javascript variables in relation to scope.

And I just want to quickly talk about it. Now

if instead of creating our var inside a function which you can view as say a brick wall that's impenetrable,

if we instead created it inside an IF statement or a FOR loop or a WHILE loop or anything other than

a function basically then this is kind of seen as a soft wall, like a hedge road.

And when you do that, you can in fact access this var x outside the curly braces of the IF block or the

FOR loop, or the ELSE block and it's the equivalent of having your neighbor sort of just sneakily going

through your hedgerow and stealing your apples.

This is completely possible using vars inside Javascript.

So this brings us nicely to some other types of variables that we saw previously.

So we've seen that you can create a variable by using the var keyword, the let keyword as well as the const

keyword.

But they have slightly different behavior. Now the biggest difference is between the const and everything

else. A constant that gets created cannot be changed once you give it a value.

So we've created this const called z and we set it to equal 4.

At no point in the future can we change this constant z to anything other than 4.

And we're only allowed to use it,

so tap into its value elsewhere.

Now with var and let we're able to change the its value but they behave slightly differently in relation

to scope.

So in terms of functions for all three, they are all local.

If you create a variable using var, let or const inside a function they all are local variables.

They can only be used inside the function.

But if you create any three of these types of variables outside the function then they are all global

variables and they have global scope.

They can be accessed and used anywhere inside the file.

Now the third scenario is a little bit weird.

If you create a variable inside an IF or an ELSE or a FOR or a WHILE tho anything that has a pair of

curly braces essentially a block of code,

then the var is a global and you can access this var x anywhere inside your file.

But for let and const, they are variables.

So that means that if you create a let or a const inside an IF statement then you can only use them

inside the IF statement.

And this is true for FOR loops, WHILE loops, DO-WHILE loops, any sort of other blocks of code

that have a pair of curly braces. So this is something that particular to Javascript because in a lot

of other programming languages if you create a variable using the var keyword, it will have local scope

inside any sort of code block so FOR loops, IF-ELSE statements etc..

Now what I recommend as good practice is to try and avoid using this keyword var.

Now we've been using it up till this point because we weren't yet ready to talk about scope.

But now that we understand how it works, it's much safer and more predictable to try and always use let

or const whenever you can.

There are very very few scenarios where you will need to use the keyword var.

And in fact going forward whenever you want to write the word var replace it with let instead.

Now this again is a new concept and Javascript has a number of peculiarities that can be difficult for

beginners to grasp.

So in the resources section of this lesson I've included some reading material and some background reading

for you to really get to grips with this concept and also I'd recommend trying it out using let, const

and var inside the Chrome developer tools inside the console and trying to use and access and change these

variables when they're created inside a function or outside a function or inside an IF statement so

that you really understand what's going on yourself.

Now in the next lesson we are going to be getting on and styling our to do list to make it look the

part instead of just working the part.

So for all of that and more, I'll see you on the next lesson.