Question

I plan to do “extension points” in a framework im building and i’m finding a way how i can provide the “core” to an extension so it can add functionality but not exposing the core object that it can be arbitrarily manipulated (i know providing an interface is the better idea) but sill, while i was testing (as well as learning), i wondered why this happens:

(function() {
    var core = {'bar': 'foo'}
    function getCore() {return core;}
    window.kit = {
        core: core,
        getCore: getCore
    }
}());

//initial check
console.log(kit.core)
console.log(kit.getCore());

//change the bar
kit.core.bar = 'baz';

//we will both see 'baz'
console.log(kit.core)
console.log(kit.getCore());

//null the core
kit.core = null;

//this time...
console.log(kit.core)       //core is null on this one
console.log(kit.getCore()); //why is the core still there on this one?​​​​​​​​​​​​

Answer 1

It’s important to understand the difference between an object and an object reference.

At the beginning, core and kit.core reference the same object. Any changes to the object itself will reflect in all references to that object. However, if one of the references is changed, the other references are not automatically changed.

This line:

kit.core.bar = 'baz';

modifies the object referenced by kit.core and core. The references do not change, but the object does. This is reflected in both references.

This line:

kit.core = null;

modifies the reference kit.core to reference null but does not change core, which still references the original object. The object itself does not change.