Problem keeping variable alive in a javascript function

Question

I want to house a variable in a function. This variable will change state depending on user interaction. For example:

function plan_state(current){
    if (current != ''){
        state = current;
    }
    else {
        return state;
    }
}

When the document loads I call plan_state('me'), and when certain things happen I may call plan_state('loved'). The problem occurs when I run a function and want to check the current state:

alert(plan_state());

I get undefined back, but the value should be 'me' as I previously set this value on document load.

What am I doing wrong?

is it declared in the function onload by setting it to 'me'? — Daniel Hunter
– Daniel Hunter, Commented May 4, 2012 at 16:33

Community · Accepted Answer · 2017-05-23 12:34:44Z

60

The function isn't stateful because the state variable is declared inside the function and therefore only exists for the lifetime of the function call. An easy solution would be to declare the variable globally, outside the function. This is bad bad bad bad.

A better approach is to use the module pattern. This is an essential pattern to learn if you're serious about javascript development. It enables state by means of internal (private variables) and exposes a number of methods or functions for changing or getting the state (like object oriented programming)

    var stateModule = (function () {
        var state; // Private Variable

        var pub = {};// public object - returned at end of module

        pub.changeState = function (newstate) {
            state = newstate;
        };

        pub.getState = function() {
            return state;
        }

        return pub; // expose externally
    }());

so stateModule.changeState("newstate"); sets the state

and var theState = stateModule.getState(); gets the state

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered May 4, 2012 at 16:34

reach4thelasers

27k24 gold badges95 silver badges127 bronze badges

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

7 Comments

Daniel Hunter Over a year ago

this is great. I think this is more of what i am looking for and even though i do not fully understand it.. YET... i am accepting it as answer as I was avoiding the global variable problem. Thanks.

Daniel Hunter Over a year ago

works!! and after implementing it and playing with it I sort of understand it.. had to change ChangeState to changeState by the way.. or vise versa.

reach4thelasers Over a year ago

Glad it helped. Using that pattern you'll be a JavaScript ninja in no time! I fixed the function call case error thx for pointing it out.

Zirak Over a year ago

You could have skipped the object entirely, have the API remain the same; something like this Edit: Now that I think about it, why do you need all this, instead of just having a state variable...and that's it?

reach4thelasers Over a year ago

He's learning JavaScript/programming and the intricacies of scope. What would he have learned/gained from using a global variable besides becoming a bad developer? Your example would work but wouldn't help him understand the module pattern. We're all here to learn, right?

|

Richard · Accepted Answer · 2012-05-04 16:41:09Z

1

I believe the scope of your variable is too "low"; by defining the variable within the function, either as a parameter or explicitly as a var, it is only accessible within the function. In order to achieve what you're after, you can either implement the variable outside the scope of the function, at a more global evel (not recommened really).

However, after re-reading your question, it's slightly miss-leading. Would you not want to return state regardless of the current? I think you might be after something like so:

var state;
function plan_state(current)
{
    if (current != '' && current != state)
    {
        state = current;
    }
    return state;
}

Alternative object structure:

function StateManager(state)
{
    this.state = state;

    this.getState = function(current)
    {
        if (current != '' && current != this.state)
        {
            this.state = current;
        }
        return this.state;
    }
}

// usage
var myStateManager = new StateManager("initial state here");
var theState = myStateManager.getState("some other state");

edited May 4, 2012 at 16:41

answered May 4, 2012 at 16:29

Richard

8,2903 gold badges39 silver badges60 bronze badges

2 Comments

Daniel Hunter Over a year ago

i thought by housing the variable in a function it was a way to avoid globals

Richard Over a year ago

By declaring a variable within a function it isn't global, that's correct. However the lifespan of that variable is only active whilst the function is being used. When the function exists, the variable "no longer exists". You may want to consider an object :)

Collectives™ on Stack Overflow

Problem keeping variable alive in a javascript function

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related