laying out your javascript

Question

Right here's my question how are the cool kids laying out their javascript these days? I've been looking around and from what I can tell everyone seems to be doing it different some people contain their functions inside object literals, some seem to just list there functions and have all there variable listed above. So what does eveyone think how should I be laying out my code.

var logsomestuff ="somestuff";

function logIt(){ 
   console.log(logsomestuff);
}

or maybe

logIt = {
   logsomestuff: "somestuff",
   logIt: function(){
      console.log(this.logsomestuff);  
   }
}

I don't know what do people think, best way to layout your js? above are just two example I'm sure there are a ton more. Thanks for anyhelp. I posted the same question of stack overflow but apparently it's better off here.

Answer 1

(function() { // because it is cool
  var logsomestuff = "somestuff"; // notice two space indent. 
  function logIt() { // spaces before braces
    console.log( logsomestuff ); // spaces inside brackets.
  }
}());

Now really, the cool kids all wrap their stuff up in

$(function() {

});

or

$(document).ready(function() {

});

but I never knew why....

Answer 2

I guess what you mean is how others commonly "contain" their code. Well, with that comes namespacing which protects your variables and functions from global pollution and collision and a quick way to do that is to actually store variables and functions in an object literal:

var myNamespace = {
    property : 'value',
    aFunction : function(){
        console.log('things to do');
    }
}

myNamespace.property     //gives 'value'
myNamespace.aFunction(); //logs 'things to do'

Another common way to do it is to pass the global namespace into your private working space, by using a closure.

(function(){

    //do whatever you wish in here without code collision

    function innerbar(){
        console.log('from bar');
    }

    function innerbaz(){
        console.log('from bar');
    }

    //expose a namespace with bar on it referencing to innerbar
    //innerbaz is not exposed therefore it remains inside the closure
    window.myNamespace = {
        bar : innerbar
    }

}());