Introduction

In JavaScript, a function can use a global variable by resolving it through the scope chain. The syntax is easy, but the important part is understanding when a variable is truly global, when you are shadowing it, and when a global should be replaced with a function parameter or module export.

Reading a Global Variable

A variable declared outside any function is available to functions defined in the same scope.

1let appName = "Codemia";
2
3function showAppName() {
4  console.log(appName);
5}
6
7showAppName();

The function does not receive appName as an argument, so JavaScript looks outward and finds it in the surrounding scope.

Updating a Global Variable

If you assign to that same variable name inside the function without redeclaring it, you update the global value:

1let counter = 0;
2
3function increment() {
4  counter += 1;
5}
6
7increment();
8increment();
9console.log(counter);

This works, but it also means the function has a side effect. Side effects are not always bad, but they make code harder to reason about because the function changes shared program state.

Shadowing the Global

A common mistake is creating a local variable with the same name. Then the function no longer uses the global variable.

1let status = "ready";
2
3function run() {
4  let status = "running";
5  console.log(status);
6}
7
8run();
9console.log(status);

The inner status shadows the outer one, so the global value remains "ready".

Global Does Not Always Mean Global Object

Many tutorials oversimplify this part. In older browser scripts, top-level variables often behave like globals for the page environment. In ES modules, top-level variables are module-scoped and are not automatically attached to the global object.

If you truly want a value on the global object, use globalThis explicitly:

1globalThis.appConfig = { mode: "dev" };
2
3function printMode() {
4  console.log(globalThis.appConfig.mode);
5}
6
7printMode();

globalThis is more portable than assuming the environment is always window or always Node.js.

Prefer Parameters for Most Functions

Even though globals are accessible, many functions are better written with explicit parameters:

1function greet(userName, appName) {
2  return `Welcome to ${appName}, ${userName}`;
3}
4
5console.log(greet("Ada", "Codemia"));

This style is easier to test, easier to reuse, and easier to understand because the dependencies are visible in the function signature.

var Versus let and const

Scope behavior also depends on how the variable is declared. Modern JavaScript uses let and const, which are block-scoped. Older code often uses var, which is function-scoped and can lead to confusing shadowing behavior.

1var message = "global";
2
3function demo() {
4  if (true) {
5    var message = "local to demo";
6  }
7  console.log(message);
8}
9
10demo();
11console.log(message);

Inside demo, the var belongs to the whole function, not just the if block. That is one reason let and const are usually easier to reason about.

When Globals Are Reasonable

Global variables can be acceptable for:

• application boot configuration
• feature flags
• tiny scripts and demos
• one deliberately shared app-wide state object

The real problem is not "using a global once." The problem is making many unrelated parts of the code depend on mutable shared state with no clear ownership.

Common Pitfalls

The biggest mistake is assuming that every top-level variable is automatically a property of the global object. That is not true in modules.

Another mistake is shadowing a global by redeclaring the same name locally and then wondering why updates do not persist.

People also overuse globals when a parameter, closure, or module export would be clearer.

Finally, avoid accidental globals created by assigning to undeclared names in non-strict code. Modern code should use modules or strict mode so that mistake becomes an error.

Summary

• A function can read a global variable by resolving it through the scope chain.
• Reassigning the same name without redeclaring it updates the global variable.
• Declaring a local variable with the same name shadows the global one.
• In ES modules, top-level variables are module-scoped, not automatically global-object properties.
• Prefer explicit parameters when you want functions that are easier to test and maintain.

Example with Modification

If you want to modify the global variable inside the function, you can do so directly:

1function updateGlobalVar() {
2    globalVar = "Hello, universe!";
3}
4
5console.log(globalVar);  // Output: Hello, world!
6updateGlobalVar();
7console.log(globalVar);  // Output: Hello, universe!

Important Notes

• Avoid Overusing Global Variables: Global variables are accessible throughout the entire script, so excessive use can lead to potential bugs or conflicts.
• Global Variables in Functions: If a variable with the same name is declared inside a function, it will shadow the global variable within that function's scope. To avoid this, do not redeclare the variable within the function.

Summary

To use a global variable in a function, simply define it outside any function, then reference or modify it directly inside the function.