JavaScript Local and Global Variables

JavaScript variables are used to store data that can be accessed and used throughout a program. However, a variable’s accessibility depends on where it is declared. Some variables can only be accessed inside a function or block, while others can be accessed from a wider scope.

In JavaScript, local and global variables help control where data can be accessed and modified. Understanding the difference between them is important when writing reusable, organized, and reliable code.

In this tutorial, you will learn what local and global variables are, how to declare them, how they work with var, let, and const, and the differences between local and global scope.

What Are Variables in JavaScript?

Variables are named containers used to store values such as strings, numbers, Boolean values, arrays, and objects.

JavaScript provides three main keywords for declaring variables: var, let, and const.

let name = "Karim";
const age = 22;
var city = "Hyderabad";

console.log(name);
console.log(age);
console.log(city);

Output:

Karim
22
Hyderabad

In this example, three variables store a name, an age, and a city.

The location where a variable is declared determines its scope, which describes where that variable can be accessed.

Read our JavaScript Variables tutorial to learn more about declaring and using variables.

What Are Local Variables in JavaScript?

A local variable is a variable declared within a particular scope and accessible only within that scope and its nested scopes.

Local variables are commonly declared inside functions or blocks using let, const, or var. The exact scope depends on the declaration keyword.

For example, a variable declared inside a function using let cannot normally be accessed outside that function.

Example of a Local Variable

function greet() {
    let message = "Hello, World!";

    console.log(message);
}

greet();

Output:

Hello, World!

In this example, message is declared inside the greet() function. Therefore, it is a local variable that can be accessed inside that function.

Accessing a Local Variable Outside a Function

Consider what happens when you try to access the same variable outside the function.

function greet() {
    let message = "Hello, World!";

    console.log(message);
}

greet();

console.log(message);

Output:

Hello, World!
ReferenceError: message is not defined

The first console.log() works because message is accessible inside greet().

The second console.log() causes a ReferenceError because message is not defined in the outer scope.

Multiple Functions with Local Variables

Different functions can declare local variables with the same name without interfering with each other.

function firstFunction() {
    let message = "Hello";

    console.log(message);
}

function secondFunction() {
    let message = "Welcome";

    console.log(message);
}

firstFunction();
secondFunction();

Output:

Hello
Welcome

Both functions have their own local variable named message. Each variable belongs to its own function scope.

Advantages of Local Variables

Local variables provide several benefits:

Limited accessibility: Other parts of the program cannot directly access a function’s local variables.
Less interference: Variables in different functions can use the same name without conflicting.
Better organization: Each function can manage the data it needs.
Easier maintenance: Smaller scopes make code easier to understand and debug.

Local variables are useful when a value is only needed for a particular calculation, function, or operation.

What Are Global Variables in JavaScript?

A global variable is a variable declared in a scope that makes it accessible to multiple parts of a program.

In a traditional browser script, a variable declared outside all functions and blocks is often described as a global variable. However, the exact behavior depends on whether the code runs in a classic script, an ES module, or another JavaScript environment.

For example, a variable declared at the top level of a classic browser script using let can be accessed by functions in that script.

Example of a Global Variable

let website = "Web4Learners";

function displayWebsite() {
    console.log(website);
}

displayWebsite();

console.log(website);

Output:

Web4Learners
Web4Learners

In this example, website is declared outside the function. Both the function and the outer code can access it.

The function can read the variable because JavaScript searches the surrounding scopes when a name is not declared locally.

Modifying a Global Variable

A global variable can be updated from inside a function if the function has access to it and the variable is writable.

let count = 10;

function updateCount() {
    count = 20;
}

updateCount();

console.log(count);

Output:

The variable count is declared outside the function. The function changes its value from 10 to 20, so the updated value is displayed.

This behavior can be useful, but modifying shared global state in many different places can make a program harder to maintain.

Accessing a Global Variable from Multiple Functions

let score = 100;

function displayScore() {
    console.log(score);
}

function updateScore() {
    score = 150;
}

displayScore();

updateScore();

displayScore();

Output:

100
150

The first function call displays the initial score of 100. The second function updates the global variable to 150. The final function call displays the updated value.

Both functions use the same variable because it is declared outside them.

Advantages and Disadvantages of Global Variables

Global variables can be useful when multiple parts of a program need to share the same data.

However, they also have disadvantages:

They can be accessed or modified from many places.
Unexpected changes can affect unrelated code.
Variables with overly broad scope can cause naming conflicts.
Debugging becomes more difficult when many functions depend on shared state.

For these reasons, use global variables only when the shared data genuinely needs a broad scope.

Local Variables vs Global Variables

The main difference between local and global variables is their scope and accessibility.

Feature	Local Variables	Global Variables
Declaration	Inside a function or block	In a broader scope, often outside functions
Accessibility	Within the relevant scope and nested scopes	Wherever the declaring scope is accessible
Lifetime	Depends on scope, references, and execution	Depends on the environment and references
Naming conflicts	Usually limited to a smaller scope	Can affect more parts of the program
Typical use	Temporary calculations and function-specific data	Data intentionally shared across multiple functions

Consider this example:

let globalMessage = "Global";

function showMessages() {
    let localMessage = "Local";

    console.log(globalMessage);
    console.log(localMessage);
}

showMessages();

console.log(globalMessage);

Output:

Global
Local
Global

The function can access both variables, but the outer code can access only globalMessage. The variable localMessage is limited to the function.

Local and Global Variables with var, let, and const

JavaScript provides three common variable declaration keywords: var, let, and const. They differ in scope and reassignment behavior.

Using var

The var keyword is function-scoped when declared inside