Javascript - Storing function in object - bad practice?

JavascriptFunctionObject

Javascript Problem Overview


Is it considered bad coding-practice to store functions in an object instead of just defining them (and therefore globally)?

Consider:

Foo = {
    bar: function() {
        alert("baz");
    }	
}
	

Foo.bar();

vs.

function bar() {
    alert("baz");
}
    

bar();

Sure, it might be slightly less code for the second example, but when you start to get lots of functions - it will get messy. I find it way, way, cleaner to, for example, use Game.update() instead of using updateGame(); or similar. When getting deeper, like Game.notify.admin(id) and so on, it gives you even prettier code.

Is there any downsides by storing a function in an object?

Javascript Solutions


Solution 1 - Javascript

The first approach is preferred. This way you are explicitly defining the scope of your functions instead of polluting the global scope. There are no downsides of using the first approach. Only upsides :-)

Conclusion: always use the first approach to define functions. The second is like javascript in the 90s, let's leave it rest in peace back in the past and use proper scoping.

Solution 2 - Javascript

In this specific case go with the first one. But if you Foo object gets really complex you might want to use another approach that will give you the opportunity to use a constructor. And also the first approach sometimes is not the best when it comes to the function's scope:

function Foo(appName){
    this.name = appName;      
}

Foo.prototype.Bar = function(){
   alert(this.name)
}

var a = new Foo("baz");
a.Bar();

Solution 3 - Javascript

There is no magic with namespace objects, nor will you necessarily have any issues if you use lots of global variables. The main reason to use "namespace" objects is to reduce the potential for duplicate global variable names. A second reason is to group similar functions together for convenience, e.g:

// Object example (suggested best practice):
// DOM functions are under myLib.dom
myLib.dom.someDOMFunction0;
myLib.dom.someDOMFunction1;
   
// Utility functions are under myLib.util
myLib.util.someUtilityFunction0;
myLib.util.someUtilityFunction1;

Note that the above has practically the same chance of duplicates as similarly global variables:

// Global variable example:
myLib_dom_someDOMFunction0;
myLib_dom_someDOMFunction1;

myLib_util_someUtilityFunction0;
myLib_util_someUtilityFunction1;

Of course the former is generally preferred because it seen as easier to work with. I'm not advocating that you adopt the second approach (I use the first), just pointing out that while there is an issue with creating lots of global variables, so–called "global namespace pollution" is greatly overrated as a hazard.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionZarView Question on Stackoverflow
Solution 1 - JavascriptDarin DimitrovView Answer on Stackoverflow
Solution 2 - JavascriptKarl MendesView Answer on Stackoverflow
Solution 3 - JavascriptRobGView Answer on Stackoverflow