JS variable scope: pushing into an array in one function and accessing it another function

Question

I'm trying to make an "initializer" function that will be used to define CSS id and class names.

function init() {

    //our empty array for pushing
    var DivNamingPushArray = [];

    //object where we define our properties that will be used later
    var namingScheme = {
        "parentId": {
            "firstChild": "blah",
            "secondChild": "blahblah",
            "thirdChild": "blahblahblah"
        }
    }

    //loop through the namingScheme object and push into array
    for (propOne in namingScheme) {
        DivNamingPushArray.push(propOne);
        for (propTwo in namingScheme[propOne]) {
            DivNamingPushArray.push(namingScheme[propOne][propTwo])
        }
    }
}

function execute() {

    //call the "init" function
    init();

    //this cannot be called
    console.log(DivNamingPushArray);

    //however, why can this be successfully called?
    console.log(propOne);
}

execute();

I would really prefer to keep these functions separate, instead of including execute inside init. There are other functions that will need to call the DivNamingPushArray variable later on.

I am looking through the MDN documentation on variable scope but not finding a simple solution...

Please note that if you don't declare propOne and propTwo they will be global. Using strict mode would prevent these kind of potential future problems — a-d
– a-d, Commented Jan 30, 2015 at 14:56

a-d · Accepted Answer · 2015-01-30 15:14:18Z

1

I'd suggest you use a third function to separate your logic

As for the propOne, you can see my comment in your question, just put var in front of it.

Working example here

execute();

function init(app) {
    app.DivNamingPushArray = getNamingArray();
}

function execute() {
    var app = {};

    //call the "init" function
    init(app);

    console.log(app.DivNamingPushArray);

}

function getNamingArray() {
    //our empty array for pushing
    var DivNamingPushArray = [];

    //object where we define our properties that will be used later
    var namingScheme = {
        "parentId": {
            "firstChild": "blah",
            "secondChild": "blahblah",
            "thirdChild": "blahblahblah"
        }
    }

    //loop through the namingScheme object and push into array
    for (var propOne in namingScheme) {
        DivNamingPushArray.push(propOne);
        for (var  propTwo in namingScheme[propOne]) {
            DivNamingPushArray.push(namingScheme[propOne][propTwo])
        }
    }

    return DivNamingPushArray;
}

edited Jan 30, 2015 at 15:14

answered Jan 30, 2015 at 15:05

a-d

10.9k2 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

discardthis Over a year ago

Thank you! This will definitely come in handy as I continue to learn best OOP practices.

Maurizio Brioschi · Accepted Answer · 2015-01-30 14:57:40Z

0

I suggest to use some js pattern like module to separate it:

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript

and the using something like observer to let function comunicate.

This is not a simple implementing solution, but you can have fun with it!

answered Jan 30, 2015 at 14:57

Maurizio Brioschi

6138 silver badges14 bronze badges

Comments

Maen · Accepted Answer · 2015-01-30 14:59:24Z

0

If you want DivNamingPushArray accessible within the scope of execute(), take its declaration one level upper, before init() declaration :

//Declare your array outside of your init function
var DivNamingPushArray = [];

function init() {
   //...

For propOne, see Amit Joki's answer.

answered Jan 30, 2015 at 14:59

Maen

10.7k3 gold badges47 silver badges71 bronze badges

Comments

Amit Joki · Accepted Answer · 2015-01-30 15:05:14Z

0

When you declare a variable without the keyword var, it becomes global. Add var before you declare the variables in for...in loop.

for (var propOne in namingScheme) {
    DivNamingPushArray.push(propOne);
    for (var propTwo in namingScheme[propOne]) {
        DivNamingPushArray.push(namingScheme[propOne][propTwo])
    }
}

When a variable becomes global, or part of window, it can be accessed anywhere. So, always use var to keep the variables in scope and thereby avoiding the pollution of global scope.

After you've called init, propOne and propTwo have become global variables and therefore can be accessed anywhere. As to DivNamingPushArray, declare it one-level higher, so it will be visible to other functions or try to use module pattern.

edited Jan 30, 2015 at 15:05

answered Jan 30, 2015 at 14:57

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

1 Comment

Amit Joki Over a year ago

@aduch it did already, but yet, I've made it even more clear.

user1695032 · Accepted Answer · 2015-01-30 15:24:36Z

Javascript variable scoping works like this:

//this will not be changed in "init" function.
DivNamingPushArray = [];

//this will be changed because you don't localize your variable in init function
propone = 'value'; 

function init() {

    //this "var" declaration localizes the variable. 
    //You can do anything you want with it and 
    //the global DivNamingPushArray wont change.
    //The only way to use the global variable now is through 
    //the global object. (window.DivNamingPushArray for browsers)
    var DivNamingPushArray = [];

    // if you would have used "for (var propOne in namingScheme)",
    // the variable would have been local
    for (propOne in namingScheme) {
        // ...
    }
}

Collectives™ on Stack Overflow

JS variable scope: pushing into an array in one function and accessing it another function

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related