What is the proper way to export a variable so it can accessed from other modules and the global scope?

Question

I was wondering about the proper way to export javascript and functions so they are accessable by other modules and also in the global scope. For example I have this .js file with some utility functions.

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}

function random_choice(arr){
  let index = getRandomInt(0,arr.length);
  return arr[index];
}

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

window.getRandomInt = getRandomInt;
window.random_choice = random_choice;
export {getRandomInt,random_choice,setCookie};

I found an answer on stackoverflow that said that to make variables and functions from modules accessible from the global scope (window) you can do window.VARIABLE = VARIABLE; This works, but is that really how you are supposed to do it? What is the proper way to go about it if you have some variables or functions you want to be accessible from both other modules and in the window scope?

Answer 1

This works, but is that really how you are supposed to do it?

If you're using modules, assigning to the window is pretty weird - modules make dependencies between portions of your script explicit , which makes things MUCH more manageable when the scripts get large. In your case, consider whether there's any way you can refactor the code to avoid the global pollution - instead, have everything that needs getRandomInt to explicitly import it from this module.

That said, assigning to the window isn't completely unheard of. It's common for libraries to assign a big namespace object to the window. For example, I believe jQuery does something like:

const jQuery = /* lots of code */;
export default jQuery;
window.$ = jQuery;

But usually that sort of thing is only done once, at most.

If you have a bunch of assorted helper functions that get called from lots and lots of places all over your script, and you aren't happy with importing them everywhere, you could make a global helpers object:

window.shivanHelpers = {
  getRandomInt,
  random_choice,
};

But IMO you should first consider whether it's absolutely necessary. Usually, it isn't.

Answer 2

if you use this js file in browser, window is a place to hold global variable; even you use var x = 1; not in any scope, it will automatically bind it to window as window.x = 1 . if you use this js file in nodejs in backend, you may use global or use process.env to store global variable or if it is a module, you can also use module.exports .

if you want to hide sth you can try this form:

// set global = window / global, related to your runtime env
(function () {
   var hidden_var = 1;
   var export_var = 2;
   global.export_var = export_var;
})();
// then outside the function,
// you can use global.export_var to get the export_var
// but hidden_var is not available outside the function.

// if you do not want to use it any more
delete global.export_var;

so the proper way depends on your decision; as long as the data are accessible and no leading to memory leak (set anywhere and cleanup when it is time)