CODEWITHSUNDEEP
jqueryfunctiongoogle-maps
Legionar
Legionar

Reputation: 7597

How to access object inside a function?

I have this code:

var mapInit = function() {
    var trasaVyska = new google.maps.Marker({
        map: map,
        icon: "/i/yellow-dot.png",
        visible: false
    });

    var info = $("#info");

    var zobraz_trasu_na_mape = function(id) {
        zobrazInfo(null, id);
    }

    // more lines of code
}

$(document).ready(function() {
    mapInit();

    console.log(mapInit.trasaVyska);
    console.log(mapInit.info);
    console.log(mapInit.zobraz_trasu_na_mape);
});

Why is it showing in console "undefined" for all three?

Upvotes: 0

Views: 50

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074138

Why is it showing in console "undefined" for all three?

There must be more to your function (specifically, it must be returning something), otherwise it wouldn't be showing undefined, it would be throwing an error. (Because if it didn't return anything, the result of calling it would be undefined, and doing .trasaVyska on undefined would throw a TypeError.)

Fundamentally, the variables inside a function are not available to the code calling the function; in fact, once the call completes, in the normal case they don't exist at all. (In your case they will [in theory] if you return the zobraz_trasu_na_mape function, since it's a closure over the call to mapInit, but that's a detail specific to this code, and as that function doesn't use them, a smart JavaScript engine could optimize them away.)

If you want to use those variables outside your function, have your function return them, probably using an object:

var mapInit = function() {
    var trasaVyska = new google.maps.Marker({
        map: map,
        icon: "/i/yellow-dot.png",
        visible: false
    });

    var info = $("#info");

    var zobraz_trasu_na_mape = function(id) {
        zobrazInfo(null, id);
    }

    // more lines of code

    return {
        /* Put whatever you're currently returning here */,
        trasaVyska: trasaVyska,
        info: info,
        zobraz_trasu_na_mape: zobraz_trasu_na_mape
    };
}

Wanting to do things like that, creating properties on an object with names that are the same as the variables we use for the values, is so common that in ES6 the syntax is getting simpler:

// ES6 only
return {
    /* Put whatever you're currently returning here */,
    trasaVyska,
    info,
    zobraz_trasu_na_mape
};

Upvotes: 3

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

There comes the closure,

Try,

var mapInit = function() {

    var trasaVyska = new google.maps.Marker({
        map: map,
        icon: "/i/yellow-dot.png",
        visible: false
    });
    var info = $("#info");
    var zobraz_trasu_na_mape = function(id) {
        zobrazInfo(null, id);
    }

    return {   trasaVyska : trasaVyska, 
              info:info,
              zobraz_trasu_na_mape:zobraz_trasu_na_mape 
          };
}

$(document).ready(function() {
    var obj = mapInit();
    console.log(obj.trasaVyska);
    console.log(obj.info);
    console.log(obj.zobraz_trasu_na_mape);
});

Problem with your code:

By default all the functions would return undefined. And undefined does not have any property under it.

Upvotes: 3

Related Questions