Javascript. Separate the flies from cutlets

Rule often for someone javascript-code (and not only him) often come across
a situation when programmer Vasya "does not separate flies from cutlets". This means global variables interfere.
along with functions, even if these variables and functions somehow relate to each other.

Then a case arises when Vasya leaves, leaving the code, and Peter comes and is forced to work with Vasya's code.

The situation for Petit is not the most pleasant. To somehow save his nerves and save time and need a javascript template that I want to offer:

var someComponent = ( function () {
var self = this ;

// Methods
this .method1 = function () {
}
this .method2 = function () {
}
this .method3 = function () {
}

// Constructor
this .prop1 = 'foo' ;
this .prop2 = 'bar' ;
this .prop3 = 'qaz' ;

return this ;

})();

* This source code was highlighted with Source Code Highlighter .

It would seem nothing supernatural, but for some reason many programmers either do not want or
forget to combine data and methods.
')
And instead of a single global variable, someComponent, we have a bunch of cluttering namespaces and
making code difficult to maintain.

In addition, another advantage of this approach is that we can easily access the context of an object from callback functions.
Example from working code:

var periodInfo = ( function (sportKind) {
var self = this ;

this .sportKind = sportKind || 'football' ;

this .hintBox = null ;
this .hintBoxTop = null ;
this .hintBoxLeft = null ;

this .inputElement = null ;
this .currentPeriod = 1;
/**
* Show panel.
*/
this .show = function () {
$( '#goals-panel' ).show();
}
/**
* Hide panel.
*/
this .hide = function () {
$( '#goals-panel' ).hide();
}
/**
*
*/
this .clear = function () {
$( '[class~="home"]' ).remove();
$( '[class~="away"]' ).remove();
}

$( document ).ready( function () {
// .
self.hintBox = $( '#hint-box' );
$( document ).click( function () {
self.hide_hint_box();
});
});

return this ;
})();

* This source code was highlighted with Source Code Highlighter .

That's how you can easily and effectively make life easier for yourself and other people.

// Update
Taking into account all that has been said in the comments, we get:

function Person(firstname, lastname, age) {
var self = this ;
// Assign values to private members.
var firstname = firstname;
var lastname = lastname;
var age = age || 'unknown' ;

// Private method.
this .name_fix_up = function (name) {
return name[0].toUpperCase() + name.substr(1);
}

// Public methods.
return {
get_age: function () {
return age;
},
get_name: function () {
return self.name_fix_up(firstname) + ' ' + self.name_fix_up(lastname);
}
}
}

var p = new Person( 'vasya' , 'pupkin' , 23);
alert( "It's " + p.get_name() + ', he is ' + p.get_age() + ' years old.' )
// Trying to access private method.
p.name_fix_up( 'sergey' );

* This source code was highlighted with Source Code Highlighter .

Template with support for private / public methods and properties.