Define a global variable in a JavaScript function

javascript

javascript-best-practices

variable-scoping

global-variables

byAlex Kataev·Sep 24, 2024

Create a global variable by directly assigning it to the window object:

function createGlobal() {
  window.globalVar = "I'm everywhere, just like your WiFi";
}
createGlobal();
console.log(globalVar); // "I'm everywhere, just like your WiFi"

Take note though, global variables are frowned upon in the developer community: use them sparingly to avoid name collisions and to sustain a high level of code quality.

Embrace the scope: understanding global and local variables

When you declare a variable outside any function, it automatically becomes global and can be accessed from anywhere in your code:

let myGlobalVar = "Hello, World";
function printGlobalVar() {
  console.log(myGlobalVar); // "Hello, World"
}
printGlobalVar();

However, favoring local variables scope in functions helps avoid unexpected results and makes debugging way less of a nightmare.

A more organized jumble: encapsulating with modules

To keep your code clean and professional, choose modules. Modules help limit the scope of variables, essentially boxing them in from the global scope:

// vars.js
let secretVar = "You can't see me!";

export function revealSecret() {
  return secretVar;
}

// main.js
import { revealSecret } from './vars.js';
console.log(revealSecret()); // "You can't see me!"

This way, everyone plays happily in their own yards and no one's toys get mixed up.

Don't love me like you do: avoiding implicit globals

If you assign a variable without declaring it, it becomes global. This might sound cool but trust me, it's not.

function noVar() {
  ninjaVar = "Look ma, no hands, err... var";
}
noVar();
console.log(ninjaVar); // "Look ma, no hands, err... var"

This practice is as risky as texting while driving. Always use var, let, or const to declare your variables first.

Universal truth: the globalThis object

The new kid in JavaScript town is globalThis, a universal way to access the global variable, regardless of the environment:

function declareGlobalThis() {
  globalThis.globalParty = "Everyone's invited!";
}
declareGlobalThis();
console.log(globalParty); // "Everyone's invited!"

globalThis is like buying the universal charger for all your devices!

Treat your variables right: using meaningful names

Naming conventions are there for a reason - they make your code readable:

let g_updateCycle = 24; // g_ indicates a global variable

Remember, code is more often read than written!

Secure your secrets with scoping functions

Guess what? You can predictably control the access to global variables, sort of like a VIP section, with scoping functions:

(function() {
  var myPrivateParty = "No gate crashers allowed!";
  window.publicParty = myPrivateParty;
})();
console.log(publicParty); // "No gate crashers allowed!"

The global curses: why you should avoid globals

Global variables, like drunk texts, often lead to unexpected consequences and sometimes even some embarrassment. You might spend hours debugging a problem only to find that it was a pesky global variable causing the mess. So avoid them like spoilers for your favourite show's finale.

Embrace modules, avoid mumbo-jumbo

Modern JavaScript has bestowed upon us ES6 modules which help us neatly package related variables and functions:

// ES6 module syntax
export const moduleNameVar = "Packaged neatly, just for you";

Your code is now as organized as an obsessive-compulsive librarian's bookshelves.

Updating global variables: it's a trap!

Yes, you can update global variables inside functions. But beware, these are the stepping stones on your path to debugging hell:

let aCupOfCoffee = 0;
function moreCoffeePlease() {
  aCupOfCoffee++; // Just like your developing coffee addiction
  // Remember, addiction to caffeine - bad; addiction to best practices - good!
}
moreCoffeePlease();

Assign don't redeclare: proper handling global variables

Updating a global variable inside a function doesn't require using var, let, or const again. That's like renaming your dog every time you take it for a walk:

let statusMessage = "Initializing the matrix...";
function updateStatus() {
  statusMessage = "Matrix initialized. No red pills found!";
}
updateStatus();