Introduction

Welcome to the first part of the series, Javascript - The Tricky Parts. This series is all about learning some tricky, albeit the important parts of Javascript. In this article, we will explore an important concept in Javascript called Scope.

Scopes in Javascript

Scope is the context in which values and expressions are "visible" or can be referenced - MDN

By scopes, we mean the lifetime of a variable where the variable is visible and available for you to use in your code.

In Javascript, we have different types of scopes:

1. Global Scope
2. Function Scope
3. Block Scope

1. Global scope

Any variable declared outside of a block or a function, we refer to them as global scope variables.

var myAge = 21;

Here, we have declared myAge variable that can be used in any part of the program including deeply nested loops or functions.

We can also declare a global variable with the help of the window object.

window.myName = "Vinit";

Here, we have declared another global variable myName. We can also access the myAge variable using window.myAge, the reason we can use global variables with the window object is that all the global variables are the properties of the window object.

Note: window object is only available inside the browser environment. We have a global object inside the node environment that behaves the same way.

2. Function scope (Local scope)

As the name implies, the variables that are declared inside of a function are function scoped. This means the variables are only accessible within that particular function.

function printName() {
  var myName = "Vinit";
}
printName();
console.log(myName); // ReferenceError: myName is not defined

Here, we get an error because var are function scoped. We can only access the myName inside the printName function.

function printName() {
  var myName = "Vinit";
  console.log(myName); // "Vinit"
}
printName();

Now, the engine won't throw an error because we have access to the myName variable inside the printName function.

Let's talk about a tricky case:

for (var i = 0; i < 5; i++) {
  var j = 5;
}

console.log(i); // 5

Is i accessible outside of a for loop? If you're coming from another programming background, you may think this block of code will throw an error, but it prints 5. In other programming languages like C++ or Java, if we declare a variable using a loop such as for loop, they are block-scoped but this is different in Javascript. var in javascript are function scoped. If var is declared inside a function, it's available inside that particular function.

Note: j here will be declared as a global variable since it's not declared within a function.

3. Block scope

In ES6, another scope was introduced which is a block-level scope with keywords like const and let. The difference between const and let is that we can't reassign variables that are declared with const. The idea here is the visibility of variables inside a block scope is limited to that particular block only. Let's see an example:

{
  var myName = 'Vinit';
}
console.log(myName); // Vinit

Even though we have defined a block, variables declared with var are always function scoped. What happens if we declare the same with a let or const keywords?

{
  let firstName = 'Vinit';
  const lastName = 'Raut';
}
console.log(firstName);  // ReferenceError: firstName is not defined. 
console.log(lastName);   // ReferenceError: lastName is not defined.

We are getting errors because variables declared with let and const are block-scoped. We can only access firstName and lastName inside that particular block.

{
  let firstName = 'Vinit';
  const lastName = 'Raut';

  console.log(firstName);  // Vinit
  console.log(lastName);  // Raut
}

Tip: Always use const while declaring a variable unless you want to modify it, use let for this use case. Avoid using var while declaring variables to write more robust code.

Quiz time

Can you guess the output of the code?

1. Quiz A

   for (let i = 0; i < 5; i++) {
   console.log(i);
   }
   console.log(i); // ?
   

2. Quiz B

   function person() {
   const name = "Vinit";
    function printName() {
      console.log(name); // ?
    }
    printName();
   }
   person()
   

Solution A: It will print 0, 1, 2, 3, 4 and then throw reference error because i is only accessible (block scoped) inside the for loop.

Solution B: It will print Vinit since variables can be accessible by the inner functions and nested loops but it's not vice versa.

Summary

• In Javascript, we have three different types of scope - Global scope, Function scope, and Block-level scope.
• Variables declared with var keyword inside a function are function scoped and are accessible inside that particular function only.
• Variables declared outside of a function or a block are global scoped that can be accessed in any part of the program.
• Variables declared with let and const (recommended) inside a block are block-scoped that is accessible inside that particular block only.

If you found this useful, feel free to like and share this article. If you have any feedback or suggestions you can reach out to me on Twitter or LinkedIn. In the next article, we will explore Hoisting in Javascript.