How to make a variable which is inside a function global?

Question

Following is my javascript function, I want to use variable selected outside function, but I am getting selected not defined error in console of inspect element. window.yourGlobalVariable is not solving my problem.

function showMe(pause_btn) {
    var selected = [];
    for (var i = 0; i < chboxs.length; i++) {
        if (chboxs[i].checked) {
            selected.push(chboxs[i].value);
        }
    }
}

Answer 1

If you really want it to be global, you have two options:

1. Declare it globally and then leave the var off in the function:

   var selected;
   function showMe(pause_btn) {
       selected = [];
       for (var i = 0; i < chboxs.length; i++) {
           if (chboxs[i].checked) {
               selected.push(chboxs[i].value);
           }
       }
   }
   

2. Assign to a window property

   function showMe(pause_btn) {
       window.selected = [];
       for (var i = 0; i < chboxs.length; i++) {
           if (chboxs[i].checked) {
               selected.push(chboxs[i].value); // Don't need `window.` here, could use it for clarity though
           }
       }
   }
   

   A properties of window are global variables (you can access them either with or without window. in front of them).

But, I would avoid making it global. Either have showMe return the information:

function showMe(pause_btn) {
    var selected = [];
    for (var i = 0; i < chboxs.length; i++) {
        if (chboxs[i].checked) {
            selected.push(chboxs[i].value);
        }
    }
    return selected;
}

...and then where you need it:

var selected = showMe();

...or declare it in the scope containing showMe, but not globally. Without context, that looks exactly like #1 above; here's a bit of context:

(function() {
    var selected;
    function showMe(pause_btn) {
        selected = [];
        for (var i = 0; i < chboxs.length; i++) {
            if (chboxs[i].checked) {
                selected.push(chboxs[i].value);
            }
        }
        return selected;
    }

    // ...other stuff that needs `selected` goes here...
})();

The outer anonymous function is a "scoping function" which means that selected isn't global, it's just common to anything in that function.

Answer 2

Instead of assigning it to the window object or declaring it outside of the function, I would recommend creating your own object outside of the function, then assigning variables from there. This avoids cluttering the window object and puts all of your global variables in one place, making them easy to keep track of. For example,

var globalObject {}
function MyFunction {
  globalObject.yourVariableName=what your variable is
}