JavaScript Fundamentals: Scopes

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.