DEV Community

Chisom🦄
Chisom🦄

Posted on

Scopes of variables in JavaScript

Introduction
The scope is the life of a variable, it holds the present set of variables and their values, variables in JavaScript work differently from other languages. In this article, we will talk about variable scopes in JavaScript, the types, and how to declare them. This article will help you if you are learning JavaScript.

What are Variable Scopes In JavaScript?
Scope refers to where a variable is declared and where it can be accessed, that is an area where you can use it. It is the visibility of variables, variables are not visible outside the scope in which they are declared which means they either exist outside or within the scope they are declared. JavaScript variables are declared with the ‘var’ keyword.

Types of variable scopes
We have two types of variable scopes namely;

  • Global scope
  • Local scopes

Let's dive in;

Global Scope
In global scope, variables are not declared inside a function they are declared outside of a function, which means they work from outside the function, they can be accessed and modified by any function.

Let's look at an example;

`var userName = "Jane";

function modifyUserName(){
userName = "Chisom";
};
function showUserName () {
alert (userName);
};
alert (userName);
modifyUserName ();
showUserName();
Enter fullscreen mode Exit fullscreen mode

`
In the example above, the variable userName is the global scope because it is declared outside the function, the value of a global variable can also be changed inside the function that simply means that even though my variable is declared I can use it from inside my function.

In browser environment the global scope variables are controlled by window object but in node.js it is controlled by global object.

Variables declared without var keyword inside any function is automatically a global variables.

Global variables are mostly used for programming and are useful for cases where all the functions need to access the same data, we cannot declare many variables with the same name.

Local Scope
In local scope, variables are declared inside a function, It can be accessed only inside the function where it is declared.

For example;

`function modifyUserName(){
var userName = “Jane”;
};
function showUserName () {
alert (userName);
};
alert (userName);
modifyUserName ();
showUserName();`
Enter fullscreen mode Exit fullscreen mode

The variable “userName” in the example above is accessible inside the function. Since we cannot access a local variable outside it, the compiler generates an error.

The same name of a local variable can be used in different functions because it is only recognized by the function which it is declared, when the function is executed a local variable is created.

Note: if local variables and global variables have the same name then changing the value of one variable does not affect the value of the other variable.

`var userName = "Jane";

function modifyUserName(){
var userName = "Chisom";
};
function showUserName () {
alert (userName); // “Chisom”
};
alert (userName); // Jane
modifyUserName ();
showUserName();`
Enter fullscreen mode Exit fullscreen mode

Any change in the local variable does not affect other functions of the program.

It can only be accessed by the function statements in which it is declared.

Conclusion
In JavaScript, scopes are created by code blocks, functions, modules.

Variables scopes are meant to be understood by every developer. In this article, we went over what variable scope is, and the types of variable scopes. I hope this article helped you understand the scopes of variables in JavaScript.

Top comments (0)