Variable Scope in JavaScript.

Jitu Chauhan 3 years ago Comments

Here we will get to know about Variable Scope in JavaScript. A variable is a container that we use for string values. It is the first and most important concept when learning any programming language.

In JavaScript, there are three keywords through which we declare a variable i.e. let, var, and const. Each of these keywords interprets the variable differently. Nowadays, there are lots of JavaScript-based frameworks available to help you speed up your project faster and with much ease. React is one of them.

Also, there are a number of great Reactjs resources available, which really can help you get rid of the time you need to spend creating things in plain JavaScript. These resources can include ready-to-use react templates, react-redux, redux-thunk, redux-saga, etc.

This JavaScript tutorial is based on understanding variable scope in JavaScript.

Variable Scope in JavaScript

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

There are two types of scope:

• Global variable
• Local variable

Global Variable

A global variable is a variable type that developers declare outside any function and is accessible to all functions throughout the program.

Example:

let global = "this is a global variable"
function run() {
   console.log(global)
}
run();
output:// this is a global variable

In the above example, we have a global variable named “global” and a run() function under it. Then we console.log the variable in the function to see if we can access the value we assign to the variable from the function or if we are going to get undefined but we got the value we assigned to the variable, Why? because the variable we declared is a global variable and can be used anywhere. even outside the function.

Let look out second example:

let global = "this is a global variable"
function run() {
let global = "this is a variable"
   console.log(global)
}
run();
output: // this is a variable

Now we have two variables one inside the function and the other outside the function. Since the variable inside the function and the one outside the function have the same name, let’s see the value that logs out when we console.log the variable in the function. We logged the value of the variable inside the function even though the variable outside of the function is a global variable and it will be accessible anywhere. Why this is happening? This happened because JavaScript tries to find a local variable in the current cope and if it finds one it output but if it does not it looks for the global variable and outputs it. But we can still access the global variable by overriding it.

let global = "this is a global variable"
function run() {
let global = "this is a variable"
   console.log(window.global)
}
run();
output: // this is a global variable

To over rid javascript and be able to access the global variable in a function that has a local variable with the same name as the global variable, We need to add window object to it the variable. Why did it work?. It works because all global variables are attached to the window object. Remember you can never use the same variable name when declaring a global variable.

Local Variable

You can think of local scope as any new scope that you create within the global scope. One simple example of this is when working with functions. Each function written in JavaScript creates a new local scope. These locally scoped variables can only be accessed within the function that they are defined.

Example:

function run() {
let local = "this is a local variable"
   console.log(local)
}
run();
output: // this is a local variable

The above example explains what the local variable is. We created a function run() and created a variable inside the function. If we try to log this variable outside the function gets undefined. But to be able to use the local variable let try and remove the let keyword and just name a variable and assign a value to it.

Example:

function run() {
local = "this is a local variable"
}
console.log(local)
run();
output: // this is a local variable

It worked because javascript searched the local variable in the local scope and output it but if there is a global variable with the same name it outputs the global variable and if there is no global variable with the same name it output both the global variable and the local variable. We can name the same variable with the same name in different function and it will not throw an error because it is a local variable and can only be access able in the function.

example:

function run() {
local = "this is a local variable"
console.log(local)
}
run();

function run2() {
local = "this is a local variable"
console.log(local)
}
run2()
output: // this is a local variable

Conclusion

In this tutorial, we were able to understand what a variable is, We also learn about scope and types of scope and how, where to use it.

Special Thanks
WrapPixel is the sponsor for the content, who is offering high quality free, and premium Angular Templates and React Templates.