Unveiling Javascript Scopes

Introduction:

Scopes are one of the fundamental concepts of Javascript. Many Developers face problems understanding the behavior of variables.

If you are also facing the same problem.

Don't Worry! You are in the right place!

In this blog, We'll explore What is Scope, and it's Types with examples.

What is Scope?

Scope in JavaScript refers to the current context of code, which determines the accessibility of variables to JavaScript.

We can only access the variables within their scopes otherwise they will throw an error.

Didn't Get it?

No worries!

Let's understand this with some examples.

var Hero = 'Iron Man'

function Wish(){
    console.log(`My Favourite hero is ${Hero}`);
    var Villain = 'Thanos' 
} 
Wish(); //Invokes the function
console.log(`I was scared of ${Villain}`);

So what will be the Out of this code?

// My Favourite hero is Iron Man
// Uncaught ReferenceError: Villain is not defined

Wondering why it's showing "Villain is not defined" in spite of declaring it?

Here comes the Scope.

Let me explain to you why this is happening,

We have defined the variable Villain with the function so the scope of the variable is within the function which means we can only access the variable within the function.

Types of Scopes

There are 3 main types of scopes in JavaScript:

Global Scope:

If the variable is declared outside of a function then it has global scope. It can be accessed from anywhere in your JavaScript code.

  let name = "Arindam"; // global scope

  function func1() {
    console.log(name); // Arindam
  }

  function func2() {
    console.log(name); // Arindam
  }

As the variable is declared globally, Both func1 and func2 can access the value and print Arindam.

Function Scope:

A variable declared within a function has function scope. It can only be accessed within that function.

  function func1() {
    let name = "Ronaldo"; // function scope

    console.log(name); // Ronaldo 
  }

  console.log(name); // Throws a ReferenceError

Block Scope:

If you declare a variable with let and const , They are only accessible within the block they are declared in - between curly braces { }.

Let's understand this with examples:

  {
    let name = "Roni";
  }

  console.log(name); // Throws a ReferenceError

It throws a reference error because the scope of the variable is within the curly braces.

Now let's move to the next example,

  {
    var name = "Messi";
  }

  console.log(name);

What will be the output here?

Undefined??

No, the output will be "Messi" .This is because the Variable defined with the var keyword is not block-scoped.

💡
Note: Var is 'Function-scoped' whereas let and const are 'Block-scoped'

Conclusion:

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript and other web development topics.

To sponsor my work, please visit: Arindam's Sponsor Page and explore the various sponsorship options.

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading :)