JavaScript Global Variable Guide

Global variables in JavaScript are accessible from anywhere in your code. They are defined outside any function or block. While they seem easy, they can cause big problems. This guide explains everything you need to know.

What Is a JavaScript Global Variable?

A global variable is declared in the global scope. It can be read or changed by any part of your script. In a web browser, the global object is window. Any global variable becomes a property of window.

Example of a global variable:

 
// Global variable
let userName = "Alice";

function greet() {
  console.log("Hello, " + userName);
}

greet(); // Output: Hello, Alice

Here, userName is global. The function greet() can access it easily.

How to Create a Global Variable

You create a global variable by declaring it outside any function. Use var, let, or const. Without a keyword, the variable becomes global too. But that is a bad practice.

Example of different ways:

 
// Using var
var city = "New York";

// Using let
let country = "USA";

// Using const
const planet = "Earth";

// Without keyword (bad practice)
language = "JavaScript"; // becomes global

Always use let or const to avoid confusion.

Global Scope and the Window Object

In browsers, global variables declared with var become properties of the window object. Variables declared with let or const do not. This is an important difference.

Example:

 
var a = 10;
let b = 20;

console.log(window.a); // 10
console.log(window.b); // undefined

This behavior affects how you access global variables in different contexts.

Risks of Using Global Variables

Global variables can cause issues. They are easy to overwrite. They make code hard to debug. They create dependencies between functions. This is called global namespace pollution.

Example of a conflict:

 
let count = 5;

function add() {
  count = count + 1;
}

function reset() {
  let count = 0; // local variable
  console.log(count); // 0
}

add();
console.log(count); // 6
reset();
console.log(count); // 6 (not reset)

The reset() function creates a local count. It does not change the global one. This leads to confusion.

Best Practices for Global Variables

Limit the use of global variables. When you need them, follow these rules:

• Use constants with const for values that never change.
• Group related global values inside a single object.
• Use modules or functions to encapsulate logic.
• Always declare variables with let or const.

Example of a better approach:

 
// Use a namespace object
const AppConfig = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  debug: false
};

// Access with AppConfig.apiUrl
console.log(AppConfig.apiUrl);

This keeps your global footprint small.

Global Variables vs Local Variables

Local variables are declared inside a function or block. They are safer and easier to manage. Use local variables whenever possible. Only use global variables for truly shared data.

Comparison example:

 
let globalVar = "I am global";

function test() {
  let localVar = "I am local";
  console.log(globalVar); // works
  console.log(localVar);  // works
}

test();
console.log(globalVar); // works
console.log(localVar);  // ReferenceError: localVar is not defined

Local variables are scoped to the function. They do not leak out.

How to Avoid Global Variables

Use IIFE (Immediately Invoked Function Expression) or modules. These create a private scope. Your variables stay inside.

Example with IIFE:

 
(function() {
  let secret = "hidden";
  console.log(secret); // works inside
})();

console.log(secret); // ReferenceError

Modern JavaScript uses ES6 modules. They are the best way to avoid globals. For a deeper look at variable types, check our JavaScript Variables Guide.

Global Variables in Different Environments

Node.js has a different global object called global. In browsers, it is window. In web workers, it is self. Always use globalThis for a universal reference.

Example:

 
// Works in browsers and Node.js
globalThis.myVar = "Hello";
console.log(globalThis.myVar);

This ensures your code runs anywhere.

Conclusion

JavaScript global variables are powerful but dangerous. They are easy to create but hard to manage. Always prefer local variables. Use modules, IIFE, or namespace objects to keep your code clean. Remember to declare variables properly. This will save you from bugs and headaches. For more on variable declarations, read our JavaScript Variables Guide. Keep your global scope tidy and your code will be better.