series Scopes, Hoisting, Closures Javascript fundamentals , we have gone deep into the Global Scope, first part of understanding scopes in Javascript. If you feel insecure, or want to take a quick look, I encourage you to read it first since we will be referring to global scope in this article. In previous article If you have ever written any piece of Javascript code, you probably already created local scope and exploited its benefits since it is almost impossible not to. I am saying that because if you ever create a variable inside a function, you just create a local scope, not a global one. Local Scope occurs when you create a variable inside a function. By doing that, the visibility and accessibility of the variable changes significantly. Any variable created inside yellow box is a local variable, just like any variable inside blue box is a global one. To make it super easy to understand, blue box represents the global scope while yellow box represents the local scope. Of course to understand local variable/scope is not possible with one image and a description. Let’s take a look another image. Yes, local scope is different than global variable and more complicated to understand. This demo shows the basic behavior/concept about local scope. If you create different functions, you basically create different scopes for every one of them. To understand the basic behavior, we can work with console and see the errors and accessibility of variables in different scopes. globalOne= ; { localOne= ; .log(localOne); .log(globalOne); } testingScope() .log(localOne); .log(globalOne); var 16 ( ) function testingScope var 12 console // 12 console // 16 // 12 and 16 console // Uncaught ReferenceError: localOne is not defined console // 16 Since our variable is a global variable, we can access it anywhere. However, variable is only accessible inside its scope. That’s why, if we call testingScope function, we can see both variables in the console. globalOne localOne In global scope, we can only access global variables, stored in window object. Unlike global variables, local variables are not accessible and are destroyed as soon as their scope ends. They stay in memory when their function, which they are created in, is called. That’s why they are only accessible during execution of their function. That is one of the key differences between global and local variables. Difference between function scope and block scope Up to now, we have seen local scope but actually I was not super clear. In reality, local scope can be divided into two scopes: Function Scope and Block Scope. Until ES6, Javascript only had function scope which is actually what I have been explaining so far. Function Scope occurs when a variable is defined inside of a function. It is simple as that. Block Scope, on the other hand, is introduced with ES6 and is a little bit of different. You can create subset of a function scope with a block scope. If you use blocks, , like if, switch, for, while, you can make use of block scope only if you define variable with . It is a long sentence and I think I can explain better if I show it in the console. anything between {} let and const (‘anything returning ’){ localVariable= ; otherLocalVariable= ; .log(localVariable); .log(otherLocalVariable); } .log(localVariable) .log(otherLocalVariable) if true let 12 var 10 console // 12 console // 10 console // Uncaught ReferenceError: localVariable is not defined console // 10 Do you see their behavior? , defined with , is only visible inside the block. , defined with , is visible outside the block. Different behavior is because of the difference between var, let, const. Therefore, it is important to know the differences of them to understand block scope. localVariable let otherLocalVariable var Variable Shadowing If you are going to reassign a variable in a function, there is a concept you should know about: Variable Shadowing. In Javascript, when you define a variable in global scope and then in local scope, local one takes precedence. Of course they have to share the same name. In global scope, variable stays with its initial value, but in local scope, its value changes to whatever you reassigned. Let’s see an example: simpleVariable=’global scope’ { simpleVariable=’local scope’; .log(simpleVariable); } testingVariableShadowing(); .log(simpleVariable); let ( ) function testingVariableShadowing // reassignment console // local scope console // global scope In global scope, value is still ‘global scope’ while when it is called in function scope, it changes to ‘local scope’. simpleVariable’s If you would like to read more about Javascript Fundamentals, please take a look at the Learn Javascript Fundamentals Series. 1. Global Scope 2. Local Scope 3. Scope, Context, Execution Context Happy Coding!!!
