keeping variable alive in a javascript function

Daniel Hunter picture Daniel Hunter · May 4, 2012 · Viewed 27.2k times · Source

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

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

when the doc loads i call plan_state('me');

when certain things happen i may call plan_state('loved')

the problem, i run a function and want to check the current state..

alert(plan_state());

i get undefined back and at the very least is should be 'me' as i set this onload.

what am i doing wrong?

Answer

reach4thelasers picture reach4thelasers · May 4, 2012

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