how could I access the global variable in another function

Question

I see there is a script in the DOM.

I want to access the data variable in another function later, is it possible ?

data = {"labels":["07/19 (Sun)","07/20 (Mon)","07/21 (Tue)","07/22 (Wed)","07/23 (Thu)","07/24 (Fri)","07/25 (Sat)","07/26 (Sun)","07/27 (Mon)","07/28 (Tue)","07/29 (Wed)"
....

Because currently,

I couldn't access the variable initChart in debug console.

      //<![CDATA[
      (function() { 

        var initChart = function() { window.Chart && window.Chart["chart-0"] && window.Chart["chart-0"].destroy(); 

        var data = {"labels":["07/19 (Sun)","07/20 (Mon)","07/21 (Tue)","07/22 (Wed)","07/23 (Thu)","07/24 (Fri)","07/25 (Sat)","07/26 (Sun)","07/27 (Mon)","07/28 (Tue)","07/29 (Wed)","07/30 (Thu)","07/31 (Fri)","08/01 (Sat)","08/02 (Sun)","08/03 (Mon)","08/04 (Tue)","08/05 (Wed)","08/06 (Thu)","08/07 (Fri)","08/08 (Sat)","08/09 (Sun)","08/10 (Mon)","08/11 (Tue)","08/12 (Wed)","08/13 (Thu)","08/14 (Fri)","08/15 (Sat)","08/16 (Sun)","08/17 (Mon)","08/18 (Tue)","08/19 (Wed)"],"from":"TAIPEI","to":"TOKYO","start_date":"07/19 (Sun)","end_date":"08/19 (Wed)","datasets":[{"label":"Jetstar(12:45)","data":[4798.0,6698.0,5298.0,4798.0,4198.0,4198.0,4198.0,3798.0,3798.0,3798.0,3798.0,3398.0,3398.0,3398.0,2998.0,2998.0,2698.0,2998.0,3398.0,3398.0,3798.0,3798.0,3798.0,4198.0,4798.0,4198.0,5298.0,7598.0,9098.0,4798.0,4798.0,4798.0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(254,88,21, 0.3)","pointHighlightStroke":"rgba(254,88,21, 0.9)","strokeColor":"rgba(254,88,21, 0.4)","max":9098.0,"min":2698.0,"average":4344.875},{"label":"Peach(11:05)","data":[7300.0,0,5490.0,5490.0,5490.0,4900.0,4900.0,4900.0,0,4900.0,4410.0,4410.0,4410.0,4900.0,4900.0,0,3520.0,3520.0,4900.0,3970.0,4410.0,3520.0,0,4410.0,4410.0,4900.0,4900.0,6080.0,7700.0,0,5490.0,3970.0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(224,64,251, 0.3)","pointHighlightStroke":"rgba(224,64,251, 0.9)","strokeColor":"rgba(224,64,251, 0.4)","max":7700.0,"min":0,"average":4128.125},{"label":"Peach(18:30)","data":[4860.0,6520.0,4410.0,4410.0,4410.0,4410.0,3970.0,4900.0,4900.0,3970.0,3970.0,3520.0,3970.0,3080.0,3520.0,3520.0,2750.0,2750.0,2750.0,3520.0,3080.0,3520.0,4410.0,5490.0,4410.0,4900.0,6740.0,7700.0,6740.0,5490.0,4410.0,4410.0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(224,64,251, 0.3)","pointHighlightStroke":"rgba(224,64,251, 0.9)","strokeColor":"rgba(224,64,251, 0.4)","max":7700.0,"min":2750.0,"average":4419.0625},{"label":"Peach(10:55)","data":[0,7300.0,0,0,0,0,0,0,4900.0,0,0,0,0,0,0,3970.0,0,0,0,0,0,0,4410.0,0,0,0,0,0,0,5490.0,0,0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(224,64,251, 0.3)","pointHighlightStroke":"rgba(224,64,251, 0.9)","strokeColor":"rgba(224,64,251, 0.4)","max":7300.0,"min":0,"average":814.6875},{"label":"Peach(09:35)","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4410.0,3970.0,0,0,0,4900.0,0,6080.0,6080.0,0,0,0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(224,64,251, 0.3)","pointHighlightStroke":"rgba(224,64,251, 0.9)","strokeColor":"rgba(224,64,251, 0.4)","max":6080.0,"min":0,"average":795.0},{"label":"Peach(09:15)","data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3970.0,0,4410.0,0,4900.0,0,0,5490.0,0,4410.0],"fillColor":"rgba(220,220,220,0.2)","pointColor":"rgba(224,64,251, 0.3)","pointHighlightStroke":"rgba(224,64,251, 0.9)","strokeColor":"rgba(224,64,251, 0.4)","max":5490.0,"min":0,"average":724.375}]}; var opts = {"animation":false}; if (!("animation" in opts)) { opts["animation"] = (typeof Modernizr == "undefined") || Modernizr.canvas; } var canvas = document.getElementById("chart-0"); var ctx = canvas.getContext('2d'); var chart = new Chart(ctx).Line(data, opts); window.Chart["chart-0"] = chart; }; /* W3C standard */ if (window.addEventListener) { window.addEventListener("load", initChart, false); document.addEventListener("page:load", initChart, false); } /* IE */ else if (window.attachEvent) { window.attachEvent("onload", initChart); document.attachEvent("page:load", initChart); } })();
      //]]>

Beside my answer, another thing i see in your code is that you're using `//<![CDATA[` in your program. It means you're using JS code inside HTML file to make it compliant with XHTML and HTML; It's obviously not a good practice. You can avoid this by moving your JavaScript code to a separate file. — Muhammad Imran, Jul 19 '15 at 04:28

score 1 · Answer 1 · edited May 23 '17 at 12:23

I see you are using IIFE:

Your js structure:

(function(){    //outer function
  //variables declered here
function samplefunc(){
    // variable accessible here
}
})();

// variable not accessible here

So your data varaible is scoped to this outer function. You can use it in any function inside this outer function but not outside this scoped function(in console too)

Example:

(function() {
  var data = "sample";
  $("#first").html(data);
})();

(function() {
  $("#second").html(data);
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="first"></div>
<div id="second"></div>

score 0 · Answer 2 · answered Jul 19 '15 at 03:54

Because your code is in a self executing block, that variable is not globally scoped; which is usually a good thing. If you really need it scoped globally, you'll have to set it as a property of the window.

window.myVar = {...};

For your example:

window.initChart = initChart;

But I hate even suggesting it. Consider using an event to pass that value to a listener elsewhere or sending it directly to a class your create after initializing over the use of a global variable.

http://www.w3.org/wiki/JavaScript_best_practices

Muhammad Imran · Answer 3 · 2015-07-22T17:45:43.763

You're not creating any global variable here. You're creating variable that is private to your self-invoking function (function(){}());. Any variable defined inside this will never be visible to any other code except inside it.

First, best practice is try to avoid global variable. Maximum, you should create only one global variable(which should be object containing all properties that are meant to be accessed throughout your program) and define what you need inside it. Like:

var MyApp = {};
MyApp.data="abc";
MyApp.otherData = "test";

This should be defined outside any scope (directly at js file, and not inside any function). Best example is BOM's window variable, which you can access anywhere you want.

So, in a nutshell, your program should look like this:

//example.js
var MyApp = {};
MyApp.data="abc";

(function(){
var myData = MyApp.data;
//use myData here as you want

//delete MyApp.data if it's not needed anywhere by using: delete MyApp.data;
})();

EDIT:

Alternatively, if it's necessary to define variable inside self-invoking function expression, then you can use closure to use it in other functions. Like:

var myOtherFunc = (function(){
var globalInThisScope = "";
return function(arg) {
// use arg if required
// use and manipulate globalInThisScope if required
// return if required
};
}());


myOtherFunc(arg); //this can access globalInThisScope now.

Alternative:

Use this inside closure to access variables in global scope. Like:

var globalVariable = "abc";
var myFunction = function(){
return function(){
    console.log(this.globalVariable);
};
};

//call it like

myFunction ()();////output: abc

how could I access the global variable in another function

3 Answers3