Yogesh Chauhan's Blog

Revisiting variable scope in JavaScript

in JavaScript on April 20, 2021

Another scope related post: Function Scope in JavaScript for Beginners

Each variable has a scope that basically defines its boundary. A boundary that restricts the variable and sets the line(scope) in which part of the program the variable is going to be visible/callable/usable.

What happens when you define the variable inside a function?

Those variables’ scope is limited to that function only. They become local variables.

Every time you call that particular function, a new instance of that variable is created. So even if you have variables with same names in different functions, JavaScript allows it even though they are in a same program.

Just like this:


function a() {
  var container = "a";
  console.log(container);
}

function b() {
  var container = "b";
  console.log(container);
}

a(); //a
b(); //b

When you declare variables with let or const, they are local to the specific code block(for e.g. a loop). So, the code before the loop (or after the loop) doesn’t know about those variables.

So, you can’t make use of a variable declared with let or const outside of the function but you can use the variable declared with var.


Just like this:


let a = 10;
if (a == 10) {
  let b = 20;
  var c = 30;
  console.log(a + b + c); // 60
}
console.log(b + c); // b is not defined
console.log(a + c); // 40

You can use the variable declared with var in another function just like this:


let a = 10;
if (a == 10) {
  let b = 20;
  var c = 30;
  console.log(a + b + c); // 60
}

function sum() {
  console.log(a + c);
}
sum(); // 40

function sum2() {
  console.log(a + b);
}
sum2(); // b is not defined

What happens when you define the variable outside a function?

Those variables’ scope is the whole program, call/use them anywhere in the program. They become global variables.

What happens when the local and global variable both have the same name?

In that case, the local variable precedes. Just like this example:


let a = 10;
if (a == 10) {
  let a = 20;
  let b = 20;
  var c = 30;
  console.log(a + b + c); // 70
}


Nested scope

JavaScript has local and global scope but even inside the local there is sub-local(not an official word) scope.

Look at this example:


let a = 10;

function sum() {
  let b = 20;
  var c = 30;
  console.log(a + b + c); // 60
  sum2();
  function sum2() {
    var d = 40;
    console.log(a + b + c + d); // 100
  }
}

sum();

In the example above, sum2() function can see the variables defined outside of itself, in the outer function.

Now, look at the example below.


let a = 10;

function sum() {
  let b = 20;
  var c = 30;
  console.log(a + b + c + d); // d is not defined, program will fail at this point
  sum2();
  function sum2() {
    var d = 40;
    console.log(a + b + c + d);
  }
}

sum();

As you can see the outer function can not see the variable defined in the inner function. The whole concept called lexical scoping in JavaScript.


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
The Complete Basic Explanation of PHP SessionsPHPJavaScript arrays: a separate data type or Objects?JavaScriptHow to load a module with configuration in SCSS?SCSSSafe Practice to add Links to cross-origin destinationUI/UXUse SwiperJS to create mobile touch sliders fastMiscellaneousHow to define constants in PHP?PHP