Question

In JavaScript I see a few different ways, certain tasks can be performed within an object for example, the object Egg I have below.

Can anyone tell me the difference between each one, why I would use one and not the other etc

 var Egg = function(){

    //Properties

    var shell = "cracked" // private property 

    this.shell = "cracked" // public property

    shell: "cracked" // what is this??

    //functions

    function cook(){

        //standard function
    }

    cook: function(){
        //what kind of function is this?
    }

    //not sure what this is

    details: {
        //What is this? an array :S it holds 2 elements?
        cost: 1.23,
        make: 'Happy Egg';
    }




}

Answer 1

Sure, Ben.

This sort of gets to the bottom of the dynamism of JavaScript.
First, we’ll look at basics — if you’re coming from a place where you understand class-based languages, like, say, Java or C++/C#, the one that is going to make the most sense is the constructor pattern which was included very early on:

function Egg (type, radius, height, weight) {
    // private properties (can also have private functions)
    var cost = (type === "ostrich") ? 2.05 * weight : 0.35 * weight;

    // public properties
    this.type = type;
    this.radius = radius;
    this.height = height;
    this.weight = weight;
    this.cracked = false;

    // this is a public function which has access to private variables of the instance
    this.getCost = function () { return cost; };
}

// this is a method which ALL eggs inherit, which can manipulate "this" properly
// but it has ***NO*** access to private properties of the instance
Egg.prototype.Crack = function () { this.cracked = true; };


var myEgg = new Egg("chicken", 2, 3, 500);

myEgg.cost; // undefined
myEgg.Crack();
myEgg.cracked; // true

That’s fine, but sometimes there are easier ways of getting around things.
Sometimes you really don’t need a class.

What if you just wanted to use one egg, ever, because that’s all your recipe called for?

var myEgg = {};  // equals a new object
myEgg.type = "ostrich";
myEgg.cost = "......";
myEgg.Crack = function () { this.cracked = true; };

That’s great, but there’s still a lot of repetition there.

var myEgg = {
    type : "ostrich",
    cost : "......",
    Crack : function () { this.cracked = true; }
};

Both of the two “myEgg” objects are exactly the same.

The problem here is that EVERY property and EVERY method of myEgg is 100% public to anybody.

The solution to that is immediately-invoking functions:

// have a quick look at the bottom of the function, and see that it calls itself
// with parens "()" as soon as it's defined
var myEgg = (function () {
    // we now have private properties again!
    var cost, type, weight, cracked, Crack, //.......

    // this will be returned to the outside var, "myEgg", as the PUBLIC interface
    myReturnObject = {
        type : type,
        weight : weight,
        Crack : Crack, // added benefit -- "cracked" is now private and tamper-proof
        // this is how JS can handle virtual-wallets, for example
        // just don't actually build a financial-institution around client-side code...
        GetSaleValue : function () { return (cracked) ? 0 : cost; }
    };

    return myReturnObject;
}());

myEgg.GetSaleValue(); // returns the value of private "cost"
myEgg.Crack();
myEgg.cracked // undefined ("cracked" is locked away as private)
myEgg.GetSaleValue(); // returns 0, because "cracked" is true

Hope that’s a decent start.