indentation - Javascript when to split vs when to nest -

i wondering community of javascript developers when nest vs when split code

essentially lets running code within iife

why lot of times see things like

(function(context) {     context.bang = {         someting: function() {            //a lot of code         },         sometingelse: function() {            //a lot of code         }     } }(this)); 

vs

(function(context) {     function dosomething() {         // lot of code     }     function dosomethingelse() {         // lot of code     }     context.bang = {       someting : dosomething,       sometingelse : dosomethingelse     } }(this)); 

i find second piece of code more readable, , if want compressed send through google's closure compiler take second version of code , condense down first + tricks didn't think of. code maintained people, optimized compilers, , run applications.

edit:

though not apparent in example lets keep trend of putting children functions within children functions, don't care whats more scoped else within iife long nothing creeps out context

but along same trend end result of actual final code see like

(function(context) {     context.bang = {         someting: function() {            return {                another: function() {                   return {                      yetanotherfunction: function() {                         return true;                      }                   }                }            };              }     } }(this)); 

where each function level deep more 1 or 2 line functions im making here rather then

(function(context) {     function yetanotherfunction() {        return true;     }     function another() {         return yetanotherfunction;     }     function someting() {        /*blahblahblah*/        return another;     }     context.bang = {         someting: someting     } }(this));   

in many cases, they're equivalent , it's matter of personal preference.

semantically, 1st uses function expressions while 2nd uses function declarations, 2nd gets hoisting.

but, main difference in options each function has access another. having them separate of object utilizes iife closure allows them reach locals:

(function(context) {     function dosomething() {         // ...     }     function dosomethingelse() {         dosomething();     }     // ... }(this)); 

but, can assume this fitting object well:

(function(context) {     context.bang = {         someting: function() {             // ...         },         sometingelse: function() {             this.someting();         }     } }(this)); 

this may not object defined, somethings that's desired.

side note: parenthesis around function expressions aren't necessary when expression expected, after : in object literal.

---

regarding edit:

well, it's no longer style , readable. it's intended logic , necessary.

with 2nd (or 4th) snippet, each function returns reference already-existing function.

this.someting() === this.someting(); // true 

with 1st (or 3rd), however, every call of them creates new function same definition.

this.someting() === this.someting(); // false 

sometimes creation of new function particular definition necessary (again: closures). other times, can waste of resources.