Passing javascript variables from one function/file to another

Question

I have a function with lots of variables and very big arrays being defined; this makes the function very large and hard to work with. How can I define the variables/arrays in another file and use them in this function?

Example:

DoStuff.js:

function genList(){
    var listData = [

    //lots of inner arrays and data

    ]

    var dataItem = "value";//50 of these

    //do stuff with the data
}

What I'm trying to do:

ExternalData.js:

var listData = [

//lots of inner arrays and data

]

var dataItem = "value";//50 of these

DoStuff.js:

function genList(){

//call variables/arrays from ExternalData.js

//do stuff
}

Note: JQuery is applicable here, but I'd rather not call any other libraries for something so small.

Many options: http://browserify.org/, http://requirejs.org/, https://github.com/jrburke/almond and more — elclanrs, Dec 06 '13 at 03:55
Is there anything that's a simple native javascript method of doing it? I'd hate to call on a library just to pass some data from page to page or from function to function. — , Dec 06 '13 at 03:56
You can load the libraries in your HTML with `script` tags. Create a global namespace and put shared stuff in there. — elclanrs, Dec 06 '13 at 03:56
I know how to load them, the problem is loading more script than what's needed. Seems like adding a library would be overkill. — , Dec 06 '13 at 03:58
Adding a library is not overkill, in fact it is very common practice. Browserify is more of a tool than a library, it lets you use Common modules like in Node and adds [less than 1KB of code](http://pastebin.com/tjUxXCcH) to make it work. — elclanrs, Dec 06 '13 at 04:02
I see. I do use libraries often, I guess it's more that this is something that I think can probably be done natively. No need to use a library if there's an easier way, right? — , Dec 06 '13 at 04:04
you can directly access the Variable in **ExternalData.js** just by including the script and calling out them as objects so whats your exact problem. — Kawinesh S K, Dec 06 '13 at 04:05
Create a unique global object (namespace) `window.MY = {}` and shared code there, that's how you'd do it without libraries. — elclanrs, Dec 06 '13 at 04:08
You can declare a "namespace" by creating `window.jtodd = {}` and then build your data onto that. — Ja͢ck, Dec 06 '13 at 04:08
That's great guys. Thanks, whoever posts it as an answer first gets the answer accept! Thanks again. — , Dec 06 '13 at 04:09
@KawineshSK I tried to just declare them in a function on anoter file and then call that function in the genList function, but of course that wasn't right. — , Dec 06 '13 at 04:11

limoragni · Accepted Answer · 2013-12-06T04:38:34.090

I would define all the variables in an object for example:

var obj = {
   array_one: ['x', 'y'],
   some_value: 'z'
}

This method has the advantage of make a kind of namespace for all the variables, saving you from overriding values.

And then use that object into my code using some kind of include method.

One simple method could be to add the script before the one you are writing like this:

<script type="text/javascript" scr="file_with_object.js"></script>

Other more sophisticated but only advisable if you are going to repeat this kind of behavior is to use a Library or a framework to make includes more concise, require.js is a good example

EDIT: In the previous example I used the object with var considering that the code was written on the global scope, I think it would be better to use window.obj = {} to ensure the variable is global. And, just for the record, any variable you define like this window.somevariable is going to be a global variable. Once you define a global variable you could use it anywhere in your code (after the definition takes place). The namespace is the right way to go though.

EDIT 2: I think this post is more about scope than includes. When you declare a variable this way: var some_variable; you are saying that you want to bind that variable to the current scope. So if you do that inside a function, that variable "lives" inside that function:

var some_var = 10;
function(){
   var some_var = 5;
   console.log(some_var) // 5
}

console.log(some_var) // 10

But if you declare the variable without the var on both cases you are making that varaible global the first time and overriding its value on the second:

    some_var = 10;
    function(){
       some_var = 5;
       console.log(some_var) // 5
    }
    console.log(some_var) // 5

And alway you declare a varaible without the var, that variable is accessible trough window.variablename, because you are not binding the variable to any particular scope, so the binding is made to the window objecy, which is the global scope "namespace".

This answers my question. I do have a question here: Can I do this in a way so that everywhere that my variables are used in my function I don't have to change the name that I call them through? Its not a very big problem; I'm just wondering if there's a way to skip that. — , Dec 06 '13 at 04:13
Well, I haven't used global variables before, but I assume I'll need to access them via window.variableName rather than just variableName? — , Dec 06 '13 at 04:26
No, that is not the case. You could access those variables without the window. In fact if you don't use the var prefix the variable would be declare as global and would be accessible by both using window.varaiblename or just variablename. That's because window is the object that holds the global scope in the browser context. Using window.varaiblename is just for readability, is more concise. Because if you don't use var when declaring the variable it could be thougth that the variable was already defined. — limoragni, Dec 06 '13 at 04:31

Passing javascript variables from one function/file to another

1 Answers1