Understanding Scope in JavaScript

#javascript #programming #webdev #beginners

This article assumes you have a good understanding of variables and the different ways of declaring variables in JavaScript as those concepts won't be treated.

What is Scope?

Scope is what determines the accessibility(visibility) of variables. Scoping controls where a variable is accessible and the time the variable definition is maintained. There are three types of scope in JavaScript: Global Scope, Local Scope and Block Scope.

Global Scope

Global Scope is the default scope for all codes running in script mode. Variables declared outside of any function or block of code become global variables and are accessible from anywhere in the code. There is one copy of a global variable in the entire program.

 // global scope
var name = 'Sophia'

console.log(name);    //Sophia

function getName(){
  console.log(name)    //name is accessible here
} 

getName()           //Sophia

Variables defined outside of any function become global variables and can also be modified from any function. Take our earlier name variable:

// global scope
var name = 'Sophia'

console.log(name);    //Sophia

function getName(){
  console.log(name)    //name is accessible here
} 

function changeName(){
  name = 'Jane'
  console.log(name)    //name is accessible here
} 


getName()           //Sophia
changeName()        //Jane

Changing the value of a global variable in any function will be reflected through out the program. We can already see why it is not good practice to declare global variables unintentionally.

Local Scope

Local scope can also be referred to as function scope. A function creates a scope and variables declared within that function becomes local to that function and cannot be accessed from outside that function. Consider the following example:

//Local Scope
function getName(){
  var name = 'Sophia';
  console.log(name)   //name can only used in getName
}

getName()     //Sophia
console.log(name);  //Causes error

Local variables are only accessible inside their functions, which means variables with same name can be used in different functions and their values won't be overwritten. Local variables are created when a function starts, and deleted once the function is completed.


//Local Scope
function getName(){
  var name = 'Sophia';
  console.log(name) 
}

function getOtherName(){
  var name = 'Xavier';
  console.log(name)   
}
getName()          //Sophia
getOtherName()     //Xavier

Now take a look at this code example:

function createCounter(){
  count = 0;
}

function incrementCounter(){
  return ++count;
}

What is the scope of the count variable above and would the incrementCounter function work?
Before you answer, note that JavaScript does not require variables to be declared before they are used and undeclared variables are put in the global scope. Let me know your answer in the comment section.

Block Scope

Prior to ES6(2015), JavaScript only had Local(Function) Scope and Global Scope. With the introduction of let and const, the Block Scope was provided. Block Scope is simply the area within if, switch statements, and loops. A block is generally contained within curly brackets { }.
Variables declared inside a { } cannot be accessed from outside that block.

//Block Scope
function getName(){
  for(let count = 1; count <= 10; count +=1){
   //count is accessible here
}
  //count is not accessible here
}

The count variable comes into existence when the loop block is entered and destroyed once the loop is exited. Note that blocks only scope variables declared with let and const

In summary, scoping is what controls where variables are accessible. Global variables always exists and are accessible throughout the program. Block and Function variables are only accessible in the block/function they are declared in.
Note however that there is the concept of Closures which allow variables to be accessed outside of the local scope. Closures will be discussed in more detail in my next article.