Javascript Revealing Module Pattern And Variables

My question is precisely the same as this one Javascript revealing module pattern, public properties In that thread, the answer was given but not the 'why'. Here's the same ques

Solution 1:

Where is the pointer to the value within the function living?

In the scope of the function - which contains all the variables it has access to. This access makes the function a closure actually.

Why do all the functions "magically" get access to the update(s)?

Because all the functions share the variables declared in a higher scope.

Solution 2:

They don't "magically" get access to the update. They are inside myApp.User that's why they can access the variable location.

When you do myApp.User().getFirstName(), because getFirstName is inside the function (scope), it will be able to access variables declared both inside this function and outside this function.

functiona(){
    var b = "hello";
    return {
        setB: function(c){ b = c; },
        getB: function(){ return b; }
    };
}

var obj = newa();
obj.getB();         //hello
obj.setB("new");
obj.getB();         //new

In the example above, getB and setB both live inside your object, and they can access all variables inside the a() scope.

Solution 3:

look at what you did here in your first example

setFirstName: firstName

setFirstName is not a reference to the function "setFirstName" but rather the variable 'firstName'... you don't have access to the function 'setFirstName'. That function is still unavailable to you, so you can't modify firstName, like you want.

It is out of scope - you didn't return it, so that it is available to the outside world, so to speak. It is not available "outside" of the scope of the function. Return the function (), and apply the "setFirstName", as shown below.

try this;

myApp.User = function () {
    var firstName = 'Default',
        lastName = 'Default';

    functionsetFirstName(name) {
        firstName = name;
    }

    functionsetLastName(name) {
        lastName = name;
    }

    functiongetFirstName() {
        return firstName;
    }

    functiongetLastName() {
        return lastName;
    }

    return {
        getLastName: getLastName,
        getFirstName: getFirstName,
        setLastName: setLastName,
        setFirstName: setFirstName
    };
}();
myApp.User.setFirstName('bill');
myApp.User.getFirstName();

Solution 4:

varUser = function () {
    var firstName = 'Default',
        lastName  = 'Default';

    return {
        getLastName:  function() { return lastName; },
        getFirstName: function() { return firstName; },
        setLastName:  function(name) { lastName = name; },
        setFirstName: function(name) { firstName = name; },
        getName:      function() { return firstName + ' ' + lastName; }
    };
};

var u = User(),
    v = User();
console.log( u.getName() + ' - ' + v.getName() );
// Outputs: 'Default Default - Default Default'
u.setFirstName( 'Alice' );
u.setLastName( 'Bob' );
console.log( u.getName() + ' - ' + v.getName() );
// Outputs: 'Alice Bob - Default Default'