Explain the Behavior of the following JS code(Closures)

Question

I want to know why there is such a weird behavior as variableOne should be same.

myfun = (function() {
            var variableOne = 10;
            get = function(){
            return variableOne;
            }
            set = function(value){
            variableOne = value;
            }
            return {variableOne,set,get};
            })();
        // Console Window Output
        console.log(myfun.variableOne);    
        >>10
        myfun.variableOne = 90;
        myfun.get()
        >>10

Why the value hasn't changed to 90 for variableOne.

Because you've changed the object property, not the variable. — Bergi, Aug 12 '17 at 11:53

trincot · Answer 1 · 2017-08-12T11:13:43.000

The ES6 shorthand object literal { variableOne } creates an object property that copies the value from the local variable variableOne. Once copied, it lives a separate life. It does not give you access to the local variable.

If you want to keep a reference to the local value, you need to step away from a primitive variable, and use an object with the property variableOne instead. This way you don't copy its value into the property that is returned: it is now that property's value itself you return in the get method:

myfun = (function() {
    return {
        variableOne: 10,
        get: function(){
            return this.variableOne;
        },
        set: function(value){
            this.variableOne = value;
        }
    };
})();
// Console Window Output
console.log(myfun.variableOne);    // 10
myfun.variableOne = 90;
console.log(myfun.get()); // 90

Using get and set as property names is not advised, since these are keywords in ES6. Instead use real getter/setters:

myfun = (function() {
    return {
        _variableOne: 10,
        get variableOne() {
            return this._variableOne;
        },
        set variableOne(value) {
            this._variableOne = value;
        }
    };
})();
// Console Window Output
console.log(myfun.variableOne); // 10
myfun._variableOne = 90;
console.log(myfun.variableOne); // 90

This is not a destructuring assignment. – mdziekon Aug 12 '17 at 11:00 — mdziekon, Aug 12 '17 at 11:00

mdziekon · Answer 2 · 2017-08-12T11:04:54.087

This happens because variableOne is a Primitive value - primitive values are copied by value, not by reference, so once the assignment in the return (which is by the way creating properties by using the "object literal property value shorthand", not a destructuring assignment) is done, these are now two separate variables. On a side note - as I said, objects are copied by reference, but you still can change the reference itself by using assignment operator (you can read more about this in another SO question here: Is JavaScript a pass-by-reference or pass-by-value language?).

What is more, the get method accesses the variableOne that is outside of the returned object - the one that was defined in the closure (it still lives on even though the closure has been already executed).

The set method is not actually a property setter, because creating a setter requires you to pass the property name. In this case, this is just another, regular object method.

Explain the Behavior of the following JS code(Closures)

2 Answers2