CODEWITHSUNDEEP
javascript
BflySamurai
BflySamurai

Reputation: 43

Declare variables and functions across JavaScript files

I'm trying to reduce the amount of global variables that my application uses, but I'm stuck trying to figure out how to structure my files.

This is the structure of the current application with some example variables and functions:

var x = 0;
var y = 1;
var z = 2;
foo = function(n) { return n + 1; }
bar = function(n) { return foo(n) * 2; }

This is the structure I'm moving to:

var app = new function() {
    var x = 0;
    var y = 1;
    var z = 2;
    foo = function(n) { return n + 1; }
    bar = function(n) { return foo(n) * 2; }
}

Is there a way to define these variables and functions in other files (or in the same file but outside the function) and add them to the application namespace? I have a lot of variables and functions to define, and I just want to move everything from the global namespace to the application namespace in a way that all the variables and functions can continue to access each other. I also need to put them into multiple files, because I don't want to have an application file that's thousands of lines long.

Adding variables and functions to the application by making them properties (using 'app.functionName') would mean I would need to change how functions reference each other, and it doesn't seem like the right way to do it. For example, I couldn't just do this:

app.foo = function(n) { return n + 1; }
app.bar = function(n) { return foo(n) * 2; }

I would have to do this:

app.foo = function(n) { return n + 1; }
app.bar = function(n) { return app.foo(n) * 2; }

I can do the same with variables (using 'app.variableName'), but the same issue arises in that I can't just reference the variable anymore without putting 'app.' in from of the variable.

Maybe the structure of my application is just terrible and this isn't the way things are meant to be done in Javascript, but I can't seem to figure out how to implement my application without using lots of global variables or without just putting everything into one function in one file.

Upvotes: 2

Views: 97

Answers (1)

Jonas Wilms
Jonas Wilms

Reputation: 138297

A more modern way would be to use a block statement and const to scope it locally to that:

var app = app || {};

{
  const foo = app.foo = n => n + 1;
  const bar = app.bar = n => foo(n) * 2;
}

The same can be achieved in older js with an IIFE:

var app = app || {};

(function() {
  var foo = app.foo = function(n) {
     return n + 1;
  };
  var bar = app.bar = function(n) {
    return foo(n) * 2;
  };
})();

Now you can put multiple js files with that structure into one page and then communicate with each other via app.sth().

This is still not really clean and you got a lot of boilerplate code. Therefore tools like Webpack were invented, so you can just write:

// Foo.js
export default function foo(n) { return n + 1 }

// Bar.js
import foo from "./foo";

 export default function bar(n) { return foo(n) * 2; }

And webpack will generate you one tiny little (unreadable) js file out of it.

Upvotes: 1

Related Questions