5

I have the following code and I don't understand why I can't access the private properties when I redeclare the get method.

(function(w,d,a,undefined){
    var cfg = {
        currency: 'GBP',
        exponent: 2
    };
    var get = function () {
        return cfg;
    };
    a.init = function (settings) {
        for (var k in settings) {
            cfg[k] = settings[k];
        }
    };
    a.set = function (args) {
        get = args.get || get;
        //eval(args) //works but why??
    };
    a.get = function () {
        return get();
    };
})(window,document,window.fxc = {});

fxc.init({currency: 'EUR'});

// prints, Object { currency="EUR", exponent=2}
console.log(fxc.get());

fxc.set({get: function(msg){
    // cannot access private properties
    return cfg;
}});

// prints, undefined
console.log(fxc.get());

I've been trying to find the right way to do this for a while now but I can't seem to find the correct combination. I did have eval(), but surely that can't be the right way? Would love any help.

Puck
  • 2,080
  • 4
  • 19
  • 30
Christian
  • 3,708
  • 3
  • 39
  • 60
  • 1
    You forgot a `return` at the end of your private `get`. – Raymond Chen Sep 26 '14 at 14:36
  • why do you name your `var get` and your property `get` on top of `get` also being the default getter notation for getters in javascript? That just demands bugs to happen :) – Winchestro Sep 26 '14 at 14:44
  • @Winchestro true and in production that wont be the case, but im doing it to see how javascript thinks. by naming things the same, i can see that js has distinction. – Christian Sep 26 '14 at 14:54
  • One thing is, that your first `console.log(fxc.get());` does not print `Object { currency="EUR", exponent=2}`, but the `init`! – loveNoHate Sep 26 '14 at 15:16
  • Hi @DOCASAREL, i had too many console.logs in there :)... corrected – Christian Sep 26 '14 at 15:21
  • @DOCASAREL, ar I see what you mean..... – Christian Sep 26 '14 at 15:26
  • Yeah, that bugged me the whole time ;) – loveNoHate Sep 26 '14 at 15:29
  • Coincidentally, can you post the eval version? I can't see how an eval can change the fundamental mechanics of closures. – slebetman Sep 26 '14 at 15:37
  • 1
    Also, if you don't mind, can you get rid of the HTML? A lot of people would just prefer clean js code. – slebetman Sep 26 '14 at 15:38
  • @slebetman, as DOCASAREL pointed out, eval doesnt work. (have removed the html) – Christian Sep 26 '14 at 15:57
  • So, moral of the story - make most things public so they can be overridden or accessed if necessary as opposed to writing public subroutines that just set/get the private props/methods – Christian Sep 26 '14 at 16:28
  • You might want to read this: [`http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript`](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript) %)P. – loveNoHate Sep 27 '14 at 15:12

3 Answers3

43

That's correct. Partly because javascript does not have private properties. What you're doing is not declaring a private property. You're using a design pattern that uses a closure to emulate private properties.

Closures evolve out of scope. A scope refers to the lifespan of variables while object properties refer to binding of variables.

So before discussing closures, lets have a short discussion about scope.

The Stack:

A scope is related to the stack frame (in Computer Science it's called the "activation record" but most developers familiar with C or assembly know it better as stack frame). A scope is to a stack frame what a class is to an object. By that I mean that where an object is an instance of a class, a stack frame is an instance of scope.

Let's use a made-up language as an example. In this language, like in javascript, functions define scope. Lets take a look at an example code:

var global_var

function b {
    var bb
}

function a {
    var aa
    b();
}

When we read the code above, we say that the variable aa is in scope in function a and the variable bb is in scope in function b. Note that we don't call this thing private variables. Because the opposite of private variables are public variables and both refer to properties bound to objects. Instead we call aa and bb local variables. The opposite of local variables are global variables (not public variables).

Now, let's see what happens when we call a:

a() gets called, create a new stack frame. Allocate space for local variables on the stack:

The stack:
 ┌────────┐
 │ var aa │ <── a's stack frame
 ╞════════╡
 ┆        ┆ <── caller's stack frame

a() calls b(), create a new stack frame. Allocate space for local variables on the stack:

The stack:
 ┌────────┐
 │ var bb │ <── b's stack frame
 ╞════════╡
 │ var aa │
 ╞════════╡
 ┆        ┆

In most programming languages, and this includes javascript, a function only has access to its own stack frame. Thus a() cannot access local variables in b() and neither can any other function or code in global scope access variables in a(). The only exception are variables in global scope. From an implementation point of view this is achieved by allocating global variables in an area of memory that does not belong to the stack. This is generally called the heap. So to complete the picture the memory at this point looks like this:

The stack:     The heap:
 ┌────────┐   ┌────────────┐
 │ var bb │   │ global_var │
 ╞════════╡   │            │
 │ var aa │   └────────────┘
 ╞════════╡
 ┆        ┆

(as a side note, you can also allocate variables on the heap inside functions using malloc() or new)

Now b() completes and returns, it's stack frame is removed from the stack:

The stack:     The heap:
 ┌────────┐   ┌────────────┐
 │ var aa │   │ global_var │
 ╞════════╡   │            │
 ┆        ┆   └────────────┘

and when a() completes the same happens to its stack frame. This is how local variables gets allocated and freed automatically - via pushing and popping objects off the stack.

Closures:

A closure is a more advanced stack frame. But whereas normal stack frames gets deleted once a function returns, a language with closures will merely unlink the stack frame (or just the objects it contains) from the stack while keeping a reference to the stack frame for as long as it's required.

Now let's look at an example code of a language with closures:

function b {
    var bb
    return function {
        var cc
    }
}

function a {
    var aa
    return b()
}

Now let's see what happens if we do this:

var c = a()

First function a() is called which in turn calls b(). Stack frames are created and pushed onto the stack:

The stack:
 ┌────────┐
 │ var bb │
 ╞════════╡
 │ var aa │
 ╞════════╡
 │ var c  │
 ┆        ┆

Function b() returns, so it's stack frame is popped off the stack. But, function b() returns an anonymous function which captures bb in a closure. So we pop off the stack frame but don't delete it from memory (until all references to it has been completely garbage collected):

The stack:             somewhere in RAM:
 ┌────────┐           ┌╶╶╶╶╶╶╶╶╶┐
 │ var aa │           ┆ var bb  ┆
 ╞════════╡           └╶╶╶╶╶╶╶╶╶┘
 │ var c  │
 ┆        ┆

a() now returns the function to c. So the stack frame of the call to b() gets linked to the variable c. Note that it's the stack frame that gets linked, not the scope. It's kind of like if you create objects from a class it's the objects that gets assigned to variables, not the class:

The stack:             somewhere in RAM:
 ┌────────┐           ┌╶╶╶╶╶╶╶╶╶┐
 │ var c╶╶├╶╶╶╶╶╶╶╶╶╶╶┆ var bb  ┆
 ╞════════╡           └╶╶╶╶╶╶╶╶╶┘
 ┆        ┆

Also note that since we haven't actually called the function c(), the variable cc is not yet allocated anywhere in memory. It's currently only a scope, not yet a stack frame until we call c().

Now what happens when we call c()? A stack frame for c() is created as normal. But this time there is a difference:

The stack:
 ┌────────┬──────────┐
 │ var cc    var bb  │  <──── attached closure
 ╞════════╤──────────┘
 │ var c  │
 ┆        ┆

The stack frame of b() is attached to the stack frame of c(). So from the point of view of function c() it's stack also contains all the variables that were created when function b() was called (Note again, not the variables in function b() but the variables created when function b() was called - in other words, not the scope of b() but the stack frame created when calling b(). The implication is that there is only one possible function b() but many calls to b() creating many stack frames).

But the rules of local and global variables still applies. All variables in b() become local variables to c() and nothing else. The function that called c() has no access to them.

What this means is that when you redefine c in the caller's scope like this:

var c = function {/* new function */}

this happens:

                     somewhere in RAM:
                           ┌╶╶╶╶╶╶╶╶╶┐
                           ┆ var bb  ┆
                           └╶╶╶╶╶╶╶╶╶┘
The stack:
 ┌────────┐           ┌╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶┐
 │ var c╶╶├╶╶╶╶╶╶╶╶╶╶╶┆ /* new function */ ┆
 ╞════════╡           └╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶╶┘
 ┆        ┆

As you can see, it's impossible to regain access to the stack frame from the call to b() since the scope that c belongs to doesn't have access to it.

Workaround:

The workaround, since this is a binding (javascript calls it context) issue not a scope issue, is to use object binding to store your cfg object.

Unfortunately javascript doesn't have private variables. So it's only possible to bind it as a public variable. The workaround's workaround to this problem is to use Perl convention to tell other programmers not to touch that object unless they're modifying the implementation itself. And that convention is to start a variable name with underscores:

// WARNING: Private!
a._cfg = {
    currency: 'GBP',
    exponent: 2
};
slebetman
  • 109,858
  • 19
  • 140
  • 171
  • Actually, having read plalx's answer, that is a fairly good work-around. – slebetman Sep 26 '14 at 15:36
  • Note that when I say in most programming languages you can't access other people's stack frame, what I'm actually saying is that I know a few programming languages where you can access other people's stack frame (well, your caller's stack frame at least). – slebetman Sep 26 '14 at 15:40
  • just discovered this beautiful answer going over / correcting my old answers. a great explanation. sad that such a gem got lost on stackoverflow. – Winchestro Jan 30 '15 at 21:14
  • @Winchestro: To be honest. This is not exactly the appropriate question for the explanation. But the explanation is necessary to answer the question. This probably belongs in one of those "how do closures work" questions but there are lots of those and hundreds of answers to those questions so this would get lost even there. – slebetman Feb 04 '15 at 02:15
  • Your answer was cited extensively [here](http://stackoverflow.com/a/31778897/1048572) - judge yourself whether this level of copy&paste is OK or if you want to involve a mod :-) – Bergi Aug 03 '15 at 13:22
  • +1 btw. Notice that the opposite of local variables are not globals, but *free* variables. – Bergi Aug 03 '15 at 13:22
  • @Bergi: I would have preferred to copy-paste it myself for the points. Not exactly sure what I feel about it because I was the one who pointed him to this answer in a comment. Didn't think he'd copy-paste it though. Was expecting someone to ask me to paste it there or link it here by closing as duplicate. – slebetman Aug 04 '15 at 03:58
  • Ah, I missed [that](http://stackoverflow.com/questions/31735129/how-do-javascript-closures-work-at-a-low-level/31778897#comment51487386_31735129). At least he doesn't get points for it, and the answer makes clear that it's you who deserve to be upvoted. – Bergi Aug 04 '15 at 16:04
2

Well, you just said it, cannot access private properties. Variables defined within the IIFE aren't accessible from functions defined outside.

If you do not want to make the cfg variable publicly available, perhaps you could do something like this:

(function(w, d, a, undefined) {
    var cfg = {
        currency: 'GBP',
        exponent: 2
    };
    var get = function() {
        return cfg; //must return cfg
    };
    a.init = function(settings) {
        for (var k in settings) {
            cfg[k] = settings[k];
        }
    };
    a.set = function(args) {
        get = args.get(get) || get;
    };
    a.get = function() {
        return get();
    };
})(window, document, window.fxc = window.fxc || {});

fxc.set({
    get: function(initialGet) {
        return function(msg) {
            var cfg = initialGet();
            console.log('custom get');
            return cfg;
        };
    }
});


console.log(fxc.get());
//custom get
//{currency: "GBP", exponent: 2}
plalx
  • 42,889
  • 6
  • 74
  • 90
  • 1
    Beautiful FP! I didn't consider saving the old accessor function to provide restricted access to the closure :) – slebetman Sep 26 '14 at 15:50
  • Im not quite sure what is going on here. i dont see when (initialGet) is assigned with just fxc.get() – Christian Sep 27 '14 at 10:48
  • @Christian Rather than passing the `get` override function directly, you pass in a factory function responsible for creating it. Then, when you register the get's factory function with `fxc.set(...)`, the internal `get` function is passed to the factory as an `initialGet` argument. This allows the new `get` function created by the factory to hold onto `initialGet` and use it to query the internal state of your component. – plalx Sep 27 '14 at 13:19
0

Javascript does not have private properties. If I understand your question correctly, from your 2nd scrip tag, you want to access the "cfg" object declared in your first script tag.

For that, you need to understand how closure works. In this case, you declared "cfg" as a variable inside your anonymous function. This means that your other functions declared in that scope will have access to the "cfg" object, however, it will not work from any other context.

To fix this, replace var cfg = with a.cfg =

Lewis Diamond
  • 23,164
  • 2
  • 24
  • 32