Javascript Scope

Javascript Scope

Understanding the basic concept of javascript scope including the various types of scopes in javascript

ยท

4 min read

A scope is an environment in which a variable is declared. it determines the accessibility of variables.

There are three types of scopes in Javascript

  • Block Scope

  • Function Scope

  • Global Scope

Block Scope

Before es6(2015), There were only two types of scope which were the function scope and global scope and var was the only way of declaring variables.es6 introduced the let and const keywords used in declaring variables.

Block scope prevents a variable that is declared inside a specific block from being accessed by the outside of the block. The let and const keyword facilitates this variable to be block-scoped.

Example:

{
   let x = 20;
   const y = 30;
}

console.log(x)//Uncaught Referenceerror: x is not defined
console.log(y)//Uncaught Referenceerror: y is not defined

This example shows that the x and y variables declared with let and const inside a block cannot be accessed from outside of it. This is entirely different for variables declared with the var keyword as they can be accessed from outside the block in which they are created hence making them not block scoped

{
   var x = 20
}

console.log(x)// This gives 20 in the console

Functions are also block-scoped (only in strict mode)

Function Scope

Each function creates a new scope, Variables declared inside a function cannot be accessed from outside the function i.e they are locally scoped to the function. var, let and const have the same behavior when declared inside a function

function num() {
    const num1 = 2040;
    let num2 = 17;
    var num2 = 60;
}

console.log(num1) //Reference error
console.log(num2) //Reference error
console.log(num3) //Reference error

This happens because the variables are declared in the scope of the function. However, a function can access all the variables which are declared in the scope in which it is defined. This means that a function defined in the global scope has access to all the variables defined in the global scope. If defined in another function, it has access to all the variables of its parent function

//This are variables declared in the global scope
const num1 = 15;
const num2 = 20;

//The function is also declared in the global scope
function num(){
    console.log(num1 * num2) 
}

num(); //This gives 300

//A function in another function
function age(){
   const age1 = 17;

   function years(){
       console.log(`femi is ${age1} years old`)
    }
   return years();
}

age();//It gives femi is 17 years old on the console

Global Scope

Variables declared outside any function have global scope, They can be accessed from anywhere in the javascript code. Variables declared with var, let and const have similar behaviors when declared outside

const num1 = 20;
const num2 = 20;
const num3 = 100;

These are global variables that are globally scoped and can be accessed from anywhere in the javascript code

Example:

const num1 = 20;
const num2 = 20;
const num3 = 100;

function age(){
    const name = 'Gbenga'
    function nameAge(){
          console.log(`${name} is ${num1} years old`)
    }
     return nameAge()
}
age(); //This gives Gbenga is 20 years old as the nameAge function has access to the variables in the global scope and its parent scope

Another important aspect of scope is the scope chain

Scope Chain

The scope chain is the way javascript looks for a variable. When looking for variables in a nested scope, The inner scope first looks at its scope. If the variable is not declared inside it, it looks up to its outer scope or parent scope. if the variable cannot be found in any of its outer scopes, it gives a reference error.

This explains a lot about the example given for the global scope, The nameAge function looks up in search of the name and age1 variables which were later found in the outer scope

Conclusion

Scoping may be a bit difficult to understand but with time and a lot of practice, you will surely understand the concept of scoping.

This wraps it up, I hope something new was learned today. If yes let me know in the comment section. Thank you for reading ๐Ÿ˜Š

ย