DEV Community

Alwar G
Alwar G

Posted on • Updated on

How variable scoping affects the performance

Hi,

Now we have one interesting topic of How variable scoping affects the performance.

Before diving into this topic, first, we need to know what is variable scoping?

variable scoping

Availability of the variable to a part of the program.
We have three major types of variable scoping

  • Global Scope
  • function Scope
  • Block Scope

Global Scope

The variable is available in every part of a program.
Example:

   let name = 'alwar';
   function getNamewithAge() {
       const age = 23;
       console.log(name, age);
   }
   function getName() {
       console.log(name);
   }
   getNamewithAge() // alwar, 24
   getName() // alwar
Enter fullscreen mode Exit fullscreen mode

Function Scope

var declared variables are available in the inside of the function.

    function getName(isUser) {
      if(isUser) {
        var name = 'alwar';
      }
      console.log(name);
    }
    getName(true); // alwar
Enter fullscreen mode Exit fullscreen mode

Even though the name is declared inside of the if block, We can able to access the name. Because var variables are function scoped. For most of the cases, this approach is considered a bad practice.

Block Scope

let and const declared variables are block-scoped. That is it is only accessible within the block itself.

   function getName(isUser) {
      if(isUser) {
        let name = 'alwar';
        console.log(name);
      }
    }
    getName(true); // alwar
Enter fullscreen mode Exit fullscreen mode

If we try to access the name outside of the if block, then it will give an error of name is not defined

ok, come to the point. Now we know what is the scope?
wait

I think We have one thing left to learn. That thing is how variable values will be determined?

For Example

   let name = 'alwar';
   function getNamewithAge() {
       const age = 23;
       console.log(name, age);
   }
   getNamewithAge(); // alwar, 23
Enter fullscreen mode Exit fullscreen mode

Here how name is logged as alwar? For that, we need to know about scope chain.

scope chain:

Actually JS Engine creates the lexical environment where variables are stored during the program execution.

for the above code, our lexical environments will be

globalLexicalEnvironment = {
  name: 'alwar'
  getNamewithAge: <ref. to getNamewithAge function>
  outer: <null>
}
functionLexicalEnvironment = {
  age: 23
  outer: <globalLexicalEnvironment>
}

Enter fullscreen mode Exit fullscreen mode

While calling the name variable, the JS engine will first search into the functionLexicalEnvironment. It can’t find it there, so it looks for the variable in the outer scope(globalLexicalEnvironment) and finds it there.

Scope chain and performance

consider the below two codes
code-1:

let name = 'alwar';
function getName() {
  console.log(name);
}
getName();
Enter fullscreen mode Exit fullscreen mode

code-2:


function getName() {
  let name = 'alwar';
  console.log(name);
}
getName();
Enter fullscreen mode Exit fullscreen mode

These two codes will give the same output. But code-2 has a high performance than compared to code-1.

Why

Because in code-2, name variable is in functionLexicalEnvironment. So no need to go to the outer scope(i.e globalLexicalEnvironment). But in code-1 name variable is in globalLexicalEnvironment. So it should go into outer scope(i.e globalLexicalEnvironment) to get that variable. Therefore code-2 saves some significant time to find the variable than compared to code-1. So keep the variables within the current scope as much as possible to improve the performance.

That's ok. But we have cases like accessing the common objects(ex: document object).
Example:

  function updateDOM() {
    document.getElementById('outputPara').innerHTML=  document.getElementById('inputPara').innerHTML
  }
  updateDOM();
Enter fullscreen mode Exit fullscreen mode

In the above example, we should go into the outer scope for two times to get the document object. To avoid two times reference of the document object we can cache the document object to improve the performance. That is

  function updateDOM() {
    let docObj = document
    docObj.getElementById('outputPara').innerHTML=  docObj.getElementById('inputPara').innerHTML
  }
  updateDOM();
Enter fullscreen mode Exit fullscreen mode

In the above code, the document object can be accessed by one time. This will save time to find the document object.

So we can conclude the two rules 😜
1) keep the variables within the current scope as much as possible
2) If rule 1 is not possible, then cache the outer scoped variables

Reference: https://blog.bitsrc.io/understanding-scope-and-scope-chain-in-javascript-f6637978cf53#:~:text=and%20dynamic%20scoping.-,Scope%20Chain,variable%20or%20reaches%20global%20scope.

Thank you for reading this post😍. I hope you learned something.

Follow me on Twitter at https://twitter.com/alwargak

Discussion (0)