What Scope says about Variable in JavaScript?

Scope is one of the fundamental concept that every JavaScript developer should know to become a better JavaScript Developer.
So, in the article I will explain about it and how it work in JavaScript.

What is Scope?

Scope determines where a variable is visible in JavaScript .In JavaScript functions and objects are also variable.

How many types of scopes are there?

1. Local Scope
2. Global Scope
3. Block Scope

Three main points to keep in mind

1. A variable is said to be in local scope when it is defined inside a function.
2. A variable is said to be in global scope when it is defined outside a function.
3. A new scope is created each time a function is invoked.

Global Scope

When we first write JavaScript on a JavaScript file, you are already in Global scope. There is only one global scope in the entire JavaScript document. Variables are in the Global scope when defined outside of a function.

var name = 'Mike'; 

The value of the variables within the Global scope can be accessed and changed in any other scopes.

var name = 'Mike';

function Teacher(){
    console.log("Inside Function before change -> name:", name);
    name = 'Harry';
    console.log("Inside Function after change-> name: ", name);
}

Teacher();

console.log("Outside function-> ", language);

Output:
Inside Function before change -> name: Mike
Inside Function after change-> name: Harry

Local Scope

Local Scope is also known as Function scope. Variables defined within a function is in local scope. This means that variables with the same name can be used for different functions. This is because those variables are bound to their respective functions, each with different scope, and is not accessible to the other functions.

var name = 'Mike';

function Teacher() {
    var name = 'John'
    console.log("Inside Function Teacher()-> name:", name); //Output: John
    function Student() {
        var name = 'Harry'
        console.log("Inside Function Student()-> name:", name); // Output: Harry
    }
    Student();
}

Teacher();

console.log("Outside Function-> name:", name); //Output: Mike

Output:
Inside Function Teacher()-> name: John
Inside Function Student()-> name: Harry
Outside Function-> name: Mike

Block Scope

Block Scope determines the visibility of variables in a block of code. If a variable is declared inside a block can only be accessed inside the block and not outside the block then that variable is said to be block scope.

Think of the "block" of code as if statement, loop, while loop, etc.

var keyword does not support block scope. In the year 2015 , ES6 introduced two important keyword let and const which support block scope.

if (true) {
  var name = 'Mike';
  const name1 = 'John';
  let name2 = 'Harry';

  console.log("===Inside Block===")
  console.log(name); // Output: Mike
  console.log(name1); // Output: John
  console.log(name2); // Output: Harry
}

console.log("===Outside Block===")

console.log(name); // Output: Mike
console.log(name1); // Output: ReferenceError
console.log(name2); // Output: ReferenceError

Output:
===Inside Block===
Mike
John
Harry
===Outside Block===
Mike
Reference error
Reference error

In the above example you can see all the variable are accessible inside the block but only the variable with var keyword is accessible outside the block and the variables with keyword let and const shows error.

Difference between Local Scope and Block Scope

Basically, the difference between function scope and block scope is that in JavaScript, any variables declared within a function are visible anywhere within that same function. But with block scope, the visibility of variables is confined to any given block (whether it's an if statement, where/for loop, etc) enclosed by curly braces.

Wrap Up!!

I hope you enjoyed this article. Thank you for reading. Please share it with your network. Don’t forget to leave your comments below.