Accessing an array within a function from a separate .JS file

Question

Accessing an array within a function from a separate .JS file

Currently, I am facing a somewhat awkward predicament where I have a function in main.js that requires an array that is populated in second.js...

In simple terms, the function in main.js is designed to be reusable:

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

The variable 'st_a' is meant to be interpreted as: st_ + , with 'a' being the specific variable in this scenario. The concept is that the second.js file will contain multiple arrays (st_a, st_b, etc.) and depending on the requirement, the corresponding array will be used to fill the paragraph elements (p1, p2, etc.)

Any suggestions on how to tackle this situation?

javascript arrays

Answer 1

Answer №1

In case st_[x] serves as a global variable, you have the option of referencing it using window['st_a']. Therefore, you should be able to implement something similar to:

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

Alternatively, you can utilize a function to fetch the array:

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

Alternatively, you could create a container object in second.js with a 'get' method, similar to:

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

Subsequently, chug could resemble:

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

Answer 2

In case st_[x] serves as a global variable, you have the option of referencing it using window['st_a']. Therefore, you should be able to implement something similar to:

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

Alternatively, you can utilize a function to fetch the array:

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

Alternatively, you could create a container object in second.js with a 'get' method, similar to:

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

Subsequently, chug could resemble:

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

Answer 3

Answer №2

Avoiding the use of global variables is crucial in programming. When global variables are used, there is a risk of inadvertently overriding previously set variables without any warning from JavaScript.

There are several alternatives to utilizing global variables:

One approach is to encapsulate all functions within a single object. Here is an example:

var MYAPP = {} MYAPP.chug = function() { // Your code } // Then, in any subsequent file, you can continue adding functions to MYAPP: MYAPP.anotherFunction = function() {} // And call functions like this: MYAPP.chug()

By taking this approach, you only introduce one variable into the global scope.

Another option is to implement a library like Require.js.

To address this issue, you can apply the following modifications based on your chosen solution:

// Using a snippet 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' here refers to the MYAPP object
    p1.innerHTML = arr[0]
    // ...
}

Answer 4

Avoiding the use of global variables is crucial in programming. When global variables are used, there is a risk of inadvertently overriding previously set variables without any warning from JavaScript.

There are several alternatives to utilizing global variables:

One approach is to encapsulate all functions within a single object. Here is an example:

var MYAPP = {} MYAPP.chug = function() { // Your code } // Then, in any subsequent file, you can continue adding functions to MYAPP: MYAPP.anotherFunction = function() {} // And call functions like this: MYAPP.chug()

By taking this approach, you only introduce one variable into the global scope.

Another option is to implement a library like Require.js.

To address this issue, you can apply the following modifications based on your chosen solution:

// Using a snippet 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' here refers to the MYAPP object
    p1.innerHTML = arr[0]
    // ...
}

Accessing an array within a function from a separate .JS file

Answer №1

Answer №2

Similar questions

"Troubleshooting a 400 Bad Request Error in Node.js and Express for a

When attempting to swap out ":customimage:" with an image in a React.js HTML view, the result displayed is [object Object]

What are the steps to effectively utilize the $filter('filter') function when filtering multiple columns with OR as the condition?

Is there a way to retrieve JSON data from a specific URL and assign it to a constant variable in a React application?

Exploring nested list iteration in Python

Tally up the occurrences of each item in the array and provide the result in the form

Leveraging body-parser for capturing an indefinite amount of text fields in node/express

Automatically choosing a radio button in a carousel using Angular

Accessing a specific child div within a parent div using JavaScript and CSS

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

Access the most recent state value with React's Context API

How to access the parent array element in a nested ng-repeat in AngularJS

Unable to locate xpath during the second iteration or attempt

Update: Cannot mark as invalid a nested document that has not been included in an array

Tips for incorporating a Survey Monkey website embed into an Angular application

Displaying the saved MTRC (markdown-to-react-components) content from the database

Steps for extracting URL parameters from AWS API Gateway and passing them to a lambda function

Multiple card displays not working with Javascript Fetch API

What is the best way to target and focus on all class fields that have a blank value?

What is the best way to invoke a Javascript function within the same file using PHP?