Understand variables scope in JavaScript

Photo by Benjamin Davies on Unsplash

Variables Scope is one of the essential things you need to understand in JavaScript. Knowing this concept will make you reduce error and write better code, and lucky for you it is not hard to grasp.

There are two type of scopes in JavaScript: Global and local scope. Lets look at each one of them!

But before we do that, Before we start discussing the difference, I just want to mention that there is a difference between let & const and var in determining variables scope. I will focus on var now and talk about let & const later.

Global scope

Variables declared outside of functions are called global and they can be used anywhere in the JavaScript document even inside of functions. Here is an example:

// text is a global variable 
var text = “TEXT”;function myFunction() {
console.log(“Text inside of a function: “ + text)
}myFunction()
// Output: “Text inside of a function: TEXT”console.log(“Text Outside of a function: “ + text)
// Output: “Text Outside of a function: TEXT”

In this example, we created a variable in the global scope called text. We then tried to log the variable in the console inside a function and outside and it worked just fine. This means that we can use global variables anywhere in our document.

Local scope

Variables declared inside of a function are called local and they cannot be used outside of their function. Lets have an example!

function myFunction() {
// text is a local variable
var text = “TEXT”;

console.log(“Text inside of a function: “ + text)
}myFunction()
// Output: “Text inside of a function: TEXT”console.log(“Text Outside of a function: “ + text)
// Output: Uncaught ReferenceError: text is not defined

You can see that in this example we could not get access to the variable we declared inside of myFunction because text in this case is local to myFunction. If we are to create another variable outside of myFunction with the same name, they are going to have separate values. Lets look at this example:

// text is a global variable
var text = “TEXT_OUTSIDE”function myFunction() {
// text is a local variable
var text = “TEXT”;

console.log(“Text inside of a function: “ + text)
}myFunction()
// Output: “Text inside of a function: TEXT”console.log(“Text Outside of a function: “ + text)
// Output: “Text Outside of a function: TEXT_OUTSIDE”

Let & Const

Lets now talk about the difference between let & const and var in defining the scope of variables. As we said previously, the scope in var is local only inside of functions. However, with let and const the scope is local at any block of code. A block of code is anything that is inside of curly braces like a for loop or a while loop.

Wrap Up

Scope in JavaScript is necessary to know because that will help you write better code. I hope that you understand how scope works and if you have any questions or additions, please let me know. You can contact me from my website: My-Website

Thank you for reading :)

I write about topics related to web development.