Access objects outside loop (javascript)

Question

In an attempt to respect the principle of not

"polluting the global namespace"

and for other reasons I saw that global variables are "generally" a bad idea, I switched in my code from global variables:

stBgAsset15_src = $image.attr('src');

to what, as a beginner I thought the most relevant, that is to say to create Object Image() with a "src" attribute/method.

var stBgAsset15 = new Image();
stBgAsset15.src = $image.attr('src');

But I can't access it outside the 'for' loop. I need to be able to access it inside the outer function of the loop and inside a function called ClickOnButton() that is referenced at the bottom of the main outer function.

I am getting the following error message:

Uncaught ReferenceError: stBgAsset15 is not defined

Also, and this is optional as it is not required today (but might be in the future), I wonder if it would be possible to also acces it from a totally different function called anotherFunctionTotallyUnrelated()

Full Demo on Jsfiddle: https://jsfiddle.net/nm4t1nob/

I have put console.log hints in each place I would need to be able to access the variables.

The loop here is not functional but just to allow the dissussion on scopes and best way to achieve this.

Code :

preloadFirstPriorityStAssets();

var $image = $('#intro').find('#Asset-15');

function preloadFirstPriorityStAssets() {

   // Variables
    var i,
        s;    
    var rawDataArray = [ 
          'https://example.com/image9',
          'https://example.com/image10',
          'https://example.com/image11'],
    len = rawDataArray.length;

    var $image = $('#intro').find('#Asset-15');

    for (i=0; i<len; ++i) {
      (function(index) {
        var s = rawDataArray[index];  

        //send to img shell the first raw data-src
        //which *automatically* generates src for img via Cloudinary responsive 
        $image.attr('data-src', s);

        //fire off a request to Cl. server to get the correct SRC
        //(asynchronous by default)
        $.cloudinary.responsive($image);

        var stBgAsset{a dynamic variable-injected by my backend on each loop occurence"} == new Image();
        stBgAsset{a dynamic variable-injected by my backend on each loop occurence"}.src = $image.attr('src');
       //if we take as assumption one of the  dynamic variable  
       //injected by my  backend on each loop occurence" is 15
       stBgAsset15.src = $image.attr('src');
      })(i);       
    };

 //if we take as assumption one of the  dynamic variable-injected by     
 //my  backend on each loop occurence" is 15
    console.log('stBgAsset15 value: '+stBgAsset15);
    console.log('stBgAsset15.src value: '+stBgAsset15.src);

    afterClickOnStThrobber();
  };

function afterClickOnStThrobber() {
  console.log('stBgAsset15 value: '+stBgAsset15);
  console.log('stBgAsset15.src value: '+stBgAsset15.src);
}

I am not very good with scopes as javascript beginner and wonder how to make this work.

I can't really use Arrays because, even if in this example I only have stBgAsse15, actually I will have in the actual code adynamic variable

stBgAsset+<id form database that will change on each loop>

So I really need for them to have a EXPLICIT name I can call when they are outputted form the loop. In an array, the values would all be in the array but it would be too complex to know which one is which. I need them have a name, a variable or sth they can be called on.

EDIT I need to add an important info following this answer "Just define stBgAsset15 outside of your for loop. This variable will still not be global as it will be scoped inside of your preloadFirstPriorityStAssets function. Then you need to pass stBgAsset15 as an argument to afterClickOnStThrobber."

The thing is I can't because I added somùe details: the src is set inside the loop as it changes for each value of the DataArray. It's a feature where I inject a dat-src then Cloudinary analyze each data-src and generate a different src. so i can't move it outside the loop. It needs to be processed by the loop.

Answer 1

You can store assets in array and pass that array to other functions:

preloadFirstPriorityStAssets();

function preloadFirstPriorityStAssets() {

   // Variables
    var i,
        s;    
    var rawDataArray = [ 
          'https://example.com/image9' ],
    len = rawDataArray.length;
    
    var $image = $('#Intro').find('#Asset-15');
    
    var bgAssets = []; // create array for images
    
    for (i=0; i<len; ++i) {
      (function(index) {
        var s = rawDataArray[index];  
             
        var stBgAsset15 = new Image();
        stBgAsset15.src = $image.attr('src');
        bgAssets.push(stBgAsset15); // put image in array
   
      })(i);       
    };
    console.log('assets: '+bgAssets);

    afterClickOnStThrobber(bgAssets); // pass array to another function
  };
  
function afterClickOnStThrobber(data) {
  console.log('assets: '+data); // another operation with array
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="intro">
  <img    
      class="example"
      id="Asset-15"
      src="https://media-cdn.tripadvisor.com/media/photo-s/08/cd/99/1a/hard-rock-hotel-ibiza.jpg">  

</div>

Answer 2

You will need to create stBgAsset as an empty object before the loop starts:

var stBgAsset = {};

Then, inside the loop you will need to initiate its elements with a code like:

stBgAsset["stBgAsset15"] = {}; //Your value

This way you will have the names you need and you will be able to find them on server-side. You will also be able to reach any such members after the for, therefore outside the cycle.

Before you complain that JSON.stringify-ing, sending things to the server and parsing them will be too slow I kindly ask you to try it out, I would bet that you will be surprised by the result. If not and it is slow indeed, then I would like to know which line is slow, how slow it is and what is the size of data you are parsing and sending.

Answer 3

Just define stBgAsset15 outside of your for loop. This variable will still not be global as it will be scoped inside of your preloadFirstPriorityStAssets function. Then you need to pass stBgAsset15 as an argument to afterClickOnStThrobber.