Javascript Scope

exit post

Scope defines where in a program variables are declared and this essentially affects accessibility to these variables.

There are two main scopes in JavaScript:

  1. Global Scope
  2. Local Scope

Global Scope

Global scope is the area that exists outside of declared functions, and variables declared here can be accessed by any code within the program. These variables are referred to as global variables .

 let colorName = 'pink'

 const favouriteColor =() => {
      console.log(`My favourite colour is ${colorName}`);
 }

 (favouriteColor); // logs string

 console.log(`My favourite colour is ${colorName}`);// logs string

Because the variable colorName exists outside the declared function, it can be accessed by any of the code within the javascript document. There are a few disadvantages to using global scope.

One of this is that it can totally mess up your code completely. That's just it

eg.
  let colorName = 'pink'

 const favouriteColor =() => {
      colorName = 'grey'
      console.log(`My favourite colour is ${colorName}`);
 }

 favouriteColor(); //logs colorName as grey

 console.log(`but the dress is ${colorName}`); // logs colorName as grey

So now, the variable value that was originally set to pink within the global scope has been changed to grey within function. And even though the string was intended to return 'My favourite colour is grey' and 'but the dress is pink'. It will now return 'My favourite colour is grey' and 'but the dress is grey', giving new meaning to your code. So the declaration of variable in the global scope should be avoided unless you intend to.

Local Scope

Local scope is pretty much the opposite, it is the area within a declared function. So every function has its own scope and variables that exist within this scope can be accessed only by code within the same scope. Local scope can be further broken down into:

  • Function Scope

  • This, as you may have guessed, is the area within the curly braces of the function. So, variables that are declared here cannot be accessed by any code outside the function

      function favouriteColor(){
    
      var colorName = 'pink';
    
      console.log(`My favourite color is ${colorName}`);
      }
    
      favouriteColor(); // Calling function here returns a string.
    
      console.log(colorName) //Attempt to access variable here returns error message.
       

    Since var favoriteColor = 'pink' is declared within the same function scope as console.log(`My favourite color is ${colorName}`); it is able to access the variable while console.log(colorName) cannot.

  • Block Scope

  • Similarly to function scope, these variable are defined between two curly braces. A block is the area within the curly braces of conditonal statments and loops within a function. So, we understand that block scope exists between the curly braces of conditionals and loops. ES6 allows us to declare variables in the block scope and this variables can only be accessed within the corresponding block.

       function favouriteColor() {
           var color = 'pink' //function scope
           if (color === 'pink'){
               let color = 'pink'
               let color2 = 'white' //block scope
               console.log (`${color} & ${color2} are my favourite colors`)
           }
           else{
              console.log (`${color2} is my NOT favourite color`) // returns error when condition is met as this is not in the same function scope as where color2 was declared.
           }
       }
    
       console.log(color2); // returns error as this is the global scope
    
       favouriteColor(); // logs the string 'Pink & White are my favourite colors'
    
       

    You'll see here that i have created two variables color within the function scope and color2 within the block scope of if. I am able to access and change the value of color in the block scope because they all still exist within the same function scope but i cannot access color2 within the function or global scope.

Scope Pollution

Scope pollution occurs when the global namespace is flooded with too many variables or when a variable is reused too many times accross different scopes. This makes it harder to keep track of variables, makes code harder to read and increases the chances of accidents. This can cause local variables to override and reassign values of global variables and cause unexpected/unintended behaviours.