Because in JavaScript, the Scope is all around you In , the scope determines where your can see and use certain variables. JavaScript program In other words, . referring to the scope of a variable equals to answering the question : “where can we access this particular variable ?” Global and Local Scope The scope can be twofold : global or local. : variables defined a function are global and accessible from anywhere in your code. Global outside : variables defined of a function are considered local to that function only. It can’t be accessed or used by any of your code outside that function. Local inside https://unsplash.com/ Think of the global scope as the outer space up here beyond the earth’s atmosphere : it doesn’t belong to any country, and everything you could find there is accessible to everyone. https://unsplash.com/ Now think of a local scope as the space defined within the borders of the USA . Now it’s different : everything you could find here belongs to the USA, and to the USA only. As someone coming from the outside, you have no right to access and claim the resources you would find within these borders. However, as someone coming from the USA, you would still have access to everything in outer space, the global scope. The scope of a variable in Javascript works basically the same way : Variables in an inner (local) scope can’t be seen or used by an outer (global) scope, but variables defined in an outer (global) scope can be seen and used by an inner (local) scope. Variables in an inner (local) scope can’t be seen or used by an outer (global) scope, but variables defined in an outer (global) scope can be seen and used by an inner (local) scope. Here’s an example of global and local scope : So what happened here ? We know that variables declared within a function are variables and are only accessible within that function. local Inside of the function, in this local scope, is equal to "Hi, I am a local variable". sayHello greeting So when we call the function , the value of is the one defined in the local scope. sayHello greeting However, when we simply log the variable from the global scope, where we are not inside of any function, the program gets the value of the variable that we defined globally : "Hi, I am a global variable". greeting That’s very important: when we create a function, it has its own scope, its own set of variables. When we create a function, it has its own scope, its own set of variables. However, as we said before, this doesn’t mean that inside of a function we can’t access variables that are defined outside of the function : What we see here is that when we define a variable of a function, we still have access to it of that function. outside inside Basically to wrap it up: . if we declare a variable outside a function, we can access it from inside a function, but the reverse is not true If we declare a variable outside a function, we can access it from inside a function, but the reverse is not true Functions Inside Functions But what happens if you create a function inside another function ? https://unsplash.com/ Well my friend if you do that, you are actually creating , and these scopes will behave as follows : two scopes the child function will be able to see all the variables of all the parent functions, but the parent function will never know the variables declared inside its child function. In other words, what is called the (the path that JavaScript takes when it is looking for a variable’s existence and value) works in one direction only : from the location where it is called up to the parent functions and, finally, the global scope. scope chain So for example if we are looking for variables located in different scopes from a function that is nested inside another function, JavaScript would do this : The Scope Chain I am calling the function from the global scope, which is prompted to run the function, which in turn is in charge of printing the 3 values of the 3 variables declared throughout different scopes. parent child To determine the existence and value of each of the three variables, JavaScript starts from the inside of the function (the innermost scope being executed at the time) and goes one level up until it has either found all the variables or hit the global scope. child JavaScript starts from the inside of the function (the innermost scope being executed at the time) and goes one level up until it has either found all the variables or hit the global scope. child This scope search stops once the first match is found, which means that if all three variables , and had been declared inside the function, JavaScript would have not felt the need to work its way upward and the execution would have stopped right there in the scope of the function. a b c child child The Keyword var Consider the following code: Hey ?! How come 's value took the value defined locally ? The global variable was overwritten by the local variable. Why ? myVariable Notice in this example that in our function doesn't have the keyword as a prefix: myVariable sayHello() var If a local variable is used without being declared with the **var** keyword, it becomes a global variable. If a local variable is used without being declared with the **var** keyword, it becomes a global variable. Following this rule, the gobal variable was reassigned a new value when the function ran. As a result, has a different value before and after is run. sayHello() myVariable sayHello This also means that a variable in your local scope can have the same name as a variable in your global scope: if they are both declared with the keyword, they are in fact two distinct variables, independent from one another. By adding before the variable inside the function, we create a variable, that exists of that function. var var new only in the scope I know this can be a bit confusing; just remember : Always declare your local variables with the keyword before using them, otherwise you will risk unfortunate behaviours of your code. var Priority of Variables Inside Functions If two variables with the same name are declared in the global scope and in the local scope, which one prevails ? The local variable will have priority over the global variable when you attempt to access the variable inside a function (local scope). Let’s demonstrate this : The variable is declared in the global scope and in the local scope of the function that is prompted to log it in the console. JavaScript's search for starts right inside the function and finds it, so it stops without attempting to look in the outer scope. myJob myJob Since inside the function is local, it prevails over the variable with the same name in the global scope. myJob The lexical scope Maybe you are wondering if the scope of a variable inside a function will change depending on where the function is called inside your program : if I run my function before or after declaring it, will the variable in its scope have a different value ? The answer is no, because functions in JavaScript are : they run in the scope in which they are , not the scope from which they are . lexically scoped defined executed Functions in JavaScript are : they run in the scope in which they are defined, not the scope from which they are executed. lexically scoped It is the static structure of a program, the location of the functions and variables written by the author of the code, that determines the scope of a variable. Let’s consider this block of code : The value of is in both cases the value of the variable declared the function : myVariable inside it is truly independent of where the function is and only depends of the local scope where it is . run declared Conclusion : How to Use the Scope ? https://unsplash.com/ Using the local scope of functions helps prevent accidental interference between functions. For example, it saves the time-consuming effort of making sure no name is ever used for two different purposes inside the same programs. By creating a local scope every time a new function is written, . JavaScript makes it possible to consider each function as a self-enclosed universe of its own, and a way to keep the global scope clean Want to learn more ? Check out my other articles on the basics of JavaScript: Hoisting in JavaScript: a Quick Guide Wrap your head around “this” How to use JavaScript closures with confidence Grasp “By Value” and “By Reference” in JavaScript A Quick Handbook for Dates in JavaScript Work with JavaScript arrays like a boss I hope you enjoyed this introduction to the JavaScript Scope. Feel free to comment and like this article so that others can find it easily on Medium !
