Scopes or Variable Scopes are the places in our code where we have access to that variable, we distinguish two types of scopes:
- Global Scope
- Interlexical or Local Scopes
The Global scope is the highest level scope in a JavaScript Program, in a browser environment it’s controlled by the window object, for a simple program with no functions at all there’s exactly one scope which is the global scope, variables defined in the global scope could be accessed from anywhere in our program:
// Definning a variabe in the global scope var count = 2; // We have access to that variable from anywhere in our program console.log(count); // output // > 2
By defining a new function we are creating a new scope, a local scope for that function:
// Definning a variabe in the global scope const name = "John"; // We have access to that variable from anywhere in our program console.log(name); // a new local scope var display = function() { var surname= "Doe"; console.log(name); console.log(surname); } console.log(surname); // output /* VM63:7 Uncaught ReferenceError: surname is not defined at <anonymous>:7:13 */ display(); // output /* > John > Doe */
as the variable surname is defined inside the display function scope, it’s only available inside that function, we can’t access it outside its scope so we get this error:

In the other hand, inside a local scope, we have access to all variables of its broader scopes, in other words, we have access to all variables in the scopes that are containing it, as in the previous example, we have access to the variable name from inside the function display. let me give you another example:
// Definning a variabe in the global scope const name = "John"; // A new local scope var display = function() { var surname= "Doe"; console.log(name); // John console.log(surname); // Doe // Another local scope var display_age = function() { var age = 28; console.log(name); // John console.log(surname); // Doe console.log(age); // Doe // display function is in a broader scope display() /* > John > Doe */ } } display(); // output /* > John > Doe */ display_age(); // output /* VM71:19 Uncaught ReferenceError: display_age is not defined at <anonymous>:19:1 */
In this example we have:
- Inside the display_age function: we have access to all variables in our program as all other scopes are containing it.
- Inside display function: we don’t have access to the variable age as it is defined in another scope that is not containing it
- In the global scope: we only have access to the variable name and to display function
Now let’s take a look at this example:
var display = function() { name = "john"; } display(); console.log(name); // output // > john
Notice that we haven’t use the var keyword, which means that we haven’t declared our variable, and because of that we have access to it outside of the display function scope. it has been declared in the global scope, so what really happens in the interpreter is this:
// Declaring the variable var name; var display = function() { name = "john"; } display(); console.log(name); // output // > john
so as the code runs, the variable gets declared first of all then the value assignment takes a place inside the function display. by the way, it’s not recommended to define the global variables this way for code readability reason.
const, let and var
When we use var keyword, new local scopes get created only with function definitions, that means the other code blocks ( if, loops blocks) don’t create their local scope, for example:
if (true) { var name = "John"; } for( var i = 0; i < 3; i ++) { var surname = "Doe"; i++; } console.log(name); // output // > John console.log(surname); // output // > Doe
The case is different when we use let and const keywords, let and const are block-scoped, which means they create local scopes when used inside code blocks:
if (true) { const name = "John"; } for( var i = 0; i < 1; i ++) { const surname = "Doe"; } console.log(name); // output /* VM71:19 Uncaught ReferenceError: name is not defined at <anonymous>:19:1 */ console.log(surname); // output /* VM71:19 Uncaught ReferenceError: surname is not defined at <anonymous>:19:1 */
so name and surname variables are accessible only inside if and for blocks accordingly.