Local and global variables in JavaScript

In JavaScript, variables can be categorized as local or global based on their scope. Local variables are declared within a function or block and are accessible only within that specific scope. They have a limited lifespan and are destroyed once the execution of the function or block is complete.

On the other hand, global variables are declared outside any function or block and can be accessed from anywhere in the code. They persist throughout the entire script execution. It’s generally recommended to limit the use of global variables to avoid naming conflicts and improve code maintainability.

Local Variable Syntax:

function functionName() {
  var localVar = value; // Declaration and initialization of a local variable
  // Rest of the function code...
}

Global Variable Syntax:

var globalVar = value; // Declaration and initialization of a global variable
// Rest of the code...

In both cases, var is used to declare a variable. However, it’s important to note that the let and const keywords introduced in ECMAScript 2015 (ES6) can also be used to declare local variables with block scope, and they provide some additional features and benefits.

Using let:

function myFunction() {
  let localVar = value; // Declaration and initialization of a local variable using let
  // Rest of the function code...
}

Using const:

function myFunction() {
  const localVar = value; // Declaration and initialization of a local variable using const
  // Rest of the function code...
}

Global variable declaration without keyword:

For global variables, it’s common to use the var keyword, but you can also declare them without any keyword. However, using var explicit is recommended for better code clarity.

globalVar = value; // Declaration and initialization of a global variable without var/let/const
// Rest of the code...
using window object:

window object:

window.globalVar = value; // Declaration and initialization of a global variable using window object
// Rest of the code...

Local and global variables in JavaScript example

Simple example code that demonstrates the usage of local and global variables in JavaScript:

var globalVar = 'I am a global variable'; 

function myFunction() {
  var localVar = 'I am a local variable'; 
  console.log(localVar); 
  console.log(globalVar); 
}

myFunction(); // Invoking the function

console.log(globalVar); 
console.log(localVar); 

Output:

When we invoke the myFunction() function, it prints the values of localVar and globalVar. However, if we try to access localVar outside the function, it will result in an error since it is not defined in the global scope.

What is the difference between global and local Variables in JavaScript?

Answer: The main differences between global and local variables in JavaScript are as follows:

Local Variables:

• Local variables are declared within a function, block, or specific scope.
• They are only accessible within the function or block in which they are defined.
• Local variables have a limited lifespan and are destroyed once the function/block execution is completed.
• They cannot be accessed from outside the function/block.
• Each invocation of a function creates a new instance of its local variables.

function myFunction() {
  var localVar = 'I am a local variable';
  console.log(localVar);
}

myFunction(); // Output: I am a local variable

console.log(localVar); // Error: localVar is not defined

Global Variables:

• Global variables are declared outside of any function or block.
• They are accessible from any part of the JavaScript code, including functions, blocks, and other files.
• Global variables have a longer lifespan and persist throughout the entire execution of the script.
• They can be accessed and modified from anywhere in the codebase.
• Overusing global variables is generally discouraged due to potential naming conflicts and difficulty in managing code dependencies.

var globalVar = 'I am a global variable';

function myFunction() {
  console.log(globalVar);
}

myFunction(); // Output: I am a global variable

console.log(globalVar); // Output: I am a global variable

It’s important to note that when a local variable has the same name as a global variable within the same scope, the local variable takes precedence over the global variable. To access the global variable in such cases, you can use the window object (in a browser environment) or the global object (in a Node.js environment) explicitly.

var myVariable = 'global';

function myFunction() {
  var myVariable = 'local';
  console.log(myVariable); // Output: local
  console.log(window.myVariable); // Output: global
}

myFunction();

Comment if you have any doubts or suggestions on this JS variable topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version