JavaScript Variable undefined outside of function

Question

I have a script section in my html file where I create a new instance of my gmap object. Outside of the function initMap() the variable gMap is undefined although I declared it outside of the function.

var gMap;
function initMap() {
    gMap = new gmap({
        //some Properties
    });
    console.log(gMap); //gMap is defined
}
console.log(gMap); //gMap is undefined

The function is called like this:

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

I also tried calling it through $(document).ready instead of google API callback but it changed nothing.

you haven't set gmap to anything when you log it outside of the function. the only time it will be set is when you call initMap. Any javascript outside of a function is executed when the page loads. — jordaniac89, Dec 15 '16 at 14:49
can you post a link to plunkr or somewhere with a MINIMALIST example of the issue. — gh9, Dec 15 '16 at 18:34

score 3 · Answer 1 · answered Dec 15 '16 at 14:53

I think you will find that's it's because you have not called the function. You need to call the function before logging it to have the value assigned.

EG:

var gMap;
function initMap() {
    gMap = new gmap({
        //some Properties
    });
    console.log(gMap); //gMap is defined
}
console.log(gMap); //gMap is undefined
initMap();
console.log(gMap); //gMap is defined

Hope that helps!

Alon Adler · Answer 2 · 2016-12-15T15:03:13.837

You get undefined because gMap exist but it doesn't assign with any value when you call it with console.log for the first time, outside of the function. Up until you call initMap() - only then gMap will get assigned with a value (or properties in your case). If you Don't want to get undefined before you call your function, you'll need to assign it some value on the 'outside function' scope,

Such as this simple example:

var gMap = 'im not undefined';
function initMap() {
    gMap = 'im still not undefined';
    console.log(gMap); //gMap is defined
}
console.log(gMap);
initMap();
console.log(gMap);

Will produce the following output:

"im not undefined" //outside call
"im still not undefined" //inside function call
"im still not undefined" //second outside call

score 0 · Answer 3 · answered Dec 15 '16 at 14:51

You are correct, the google call back is running after your console.log().

So what is happening is

You declare gMap var.
Then you create your InitMap function
Then you output gmap
Then google is calling your callback function. Thus when you output gmap outside of your function it is undefined

if you do this

$(document).ready(function(){
var gMap;
function initMap() {
    gMap = new gmap({
        //some Properties
    });
    console.log(gMap); //gMap is defined
}
console.log(gMap); //gMap is undefined
}

You will still get an undefined, because nothing is calling initMap before you are logging gmap. You need to gMap to something before you try and log it

The below code will load gMap properly, without knowing what you are using it for its hard for me to give you working code to do what you need.

$(document).ready(function(){
   var gMap = new gmap({});
   console.log(gMap); //gMap is defined

}

my Problem is that i want to use `gMap` in the html section (`onClick="gMap.function_name()"`). When the click is made `ìnitMap` already has been called but `gMap` is still undefined :( I thought it was because it is not defined outside of the function. — maidi, Dec 15 '16 at 15:38

JavaScript Variable undefined outside of function

3 Answers3

Linked