Referencing an Array in a function from a different .JS file

Question

so I find myself in the awkward situation where I have a function in main.js which requires an array that's populated in second.js...

Simply put, the function in main.js is intended to be reusable:

function chug()
{
    p1.innerHTML = st_a[0];
    p2.innerHTML = st_a[1];
    ...
}

Now, 'st_a' is supposed to be resolved as: st_ + , in this case that variable is 'a'. The idea being the second.js file will have multiple arrays (st_a, st_b, etc.) and depending on the need, the relevant array will be used to populate the paragraph elements (p1, p2, etc.)

Any ideas?

KooiInc · Accepted Answer · 2012-04-06T08:20:46.153

2

If st_[x] is a global variable, you can use window['st_a'] to reference it. So, you should be able to use something like:

function chug()
{
    var arrid = 'st_'+'a';
    p1.innerHTML = window[arrid][0];
    p2.innerHTML = window[arrid][1];
    //...
}

or use a function to retrieve the array:

function getArr(id){
  return window['st_'+id];
}

Alternatively you could use a container object in second.js with a 'get' method, something like:

var myArrays = {
  st_a: [],
  st_b: [],
  st_c: [],
  get: function(id){
    return this['st_'+id];
  }
  /* etc */
}

Now chug could look like:

function chug()
{
    var arr = myArray.get('a');
    p1.innerHTML = arr[0];
    p2.innerHTML = arr[1];
    //...
}

edited Apr 06 '12 at 08:20

answered Apr 06 '12 at 08:05

KooiInc

119,216
31
141
177

Ok, let me see if I get this straight... Declaring the array 'st_a' in second.js outside of a function makes it global? – Abhishek Apr 06 '12 at 08:11
A variable *not* assigned within a namespace or function scope ... yes, should be global. But there are other solutions (like using a namespace and assigning the arrays as properties). – KooiInc Apr 06 '12 at 08:15
Oh my... You sir, deserve a damn medal... It worked, by using window[arrid][0]... Mind explaining the logic behind this, just so I understand how much trouble you've saved me...? – Abhishek Apr 06 '12 at 08:15
Hi Abhishek, check http://www.svennerberg.com/2009/02/global-variables-in-javascript/. In my answer I provided an alternative, because using global variables are considered to be something to avoid (see: http://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use). – KooiInc Apr 06 '12 at 08:25

score 0 · Answer 2 · answered Apr 06 '12 at 08:36

Using global variables is evil. Because you can override another already set and javascript won't tell you you've done something stupid.

You have several choices to avoid using them:

Use a single object to contain all your functions. This example should show you how to do this:

var MYAPP = {} MYAPP.chug = function() { // Your code } // Then, in any other file loaded after this one, you can do this: MYAPP.anotherFunction = function() {} // And even this: MYAPP.chug()

This way, you pollute the global scope with one variable only.

Another way would be to use a library such as Require.js.

Then, to solve your problem, you could do the following depending on the solution you chose:

// Let me borrow this code from kooiinc
MYAPP.myArrays = {
   st_a: [],
   st_b: [],
   st_c: [],
   get: function(id){
       return this['st_'+id];
   }
   /* etc */
}
MYAPP.chug = function() {
    var arr = this.myArrays.get('a') // 'this' refers to the MYAPP object in this case
    p1.innerHTML = arr[0]
    // ...
}

Referencing an Array in a function from a different .JS file

2 Answers2