How to organize JS functions using objects

Question

I would like to know if organizing JS functions in object notation is a good or bad practice. The intention is to keep js organized/easy to maintain.

Example:

var helper = {
    myAlert: function(){
    return alert('Alert from helper');
},
    toLowerCase: function(){
    var str = document.getElementById("txt").innerHTML;
    return alert(str.toLowerCase());
}
}

Html:

<body>
    <h1 onclick="helper.myAlert()">Hello Plunker!</h1>

    <p id="txt" onclick="helper.toLowerCase()">Testing LowerCaseFunction</p>
</body>

Plunker

Thanks in advance!!!

It's called namespacing, and it's generally a good practice, but a better way to do it is [with an IIFE](http://stackoverflow.com/a/5947280/5743988). — 4castle, Oct 22 '16 at 00:33
This really belongs on Software Engineering SE or Code Review SE. — Jared Smith, Oct 22 '16 at 00:33

score 3 · Accepted Answer · answered Oct 22 '16 at 00:36

code organization is an strategic topic when it comes to make software survive more than a couple of years yet this is also a very opinionated terrain.

You can make a nice job by keeping semantically related functions near each other under the same namespace, or even make it related to the user story being solved, it can be done in many ways.

If you want to know this approach is good enough, simulate an iteration on it, add a new feature and see what happens to the code.

The code avoids duplication? It gets reusable? Is it easy to locate and relate with the user needs? If so, then it will help you.

Finally, if applicable consider to use some module builder, webpack or browserify for example, so you will be able to not only separate your modules logically but "physically" too.

score 2 · Answer 2 · answered Oct 22 '16 at 00:29

For me it is a good practice. When working with little projects, you do do see it important, but in large projects you are almost obliged to do it.

simply imagine you are making a chat website, you will need to create function that will delete messages, add messages. you can simply do it as you did it up.

   var messages = {
       remove:function{//remove code},
       add:function{//add code}
      }

in this way you can define contacts management object as

       var contacts = {
             remove:function{//remove code},
             add:function{ //add code},
             block:function{//block code}
         }

Jared Smith · Answer 3 · 2016-10-22T00:44:34.053

This isn't really an answer per se but too long for a comment:

Since you are asking about best practices I'd like to point out a few things in your sample:

onclick. Just...don't. You don't want to grep through your JS trying to diagnose a behavioral problem only to realize 8 hrs in that its being called from HTML. That's a maintenance nightmare waiting to happen.
innerHTML again, just...don't. Unless you are working with HTML. 9 times out of 10, textContent will do and you can assign to it without security risk. Google 'innerHTML security risk' for more info.
alert alert blocks. Blocks your whole browser until you click annoying box. And which of your 50 open tabs was it in? Blocking is bad. Use console.log. You're a dev, and you do have devtools open right?
Your toLowerCase function. You mix data access (getting the DOM element's text) with data transformation. Bad idea.

Note that none of these are particular to JavaScript, they apply to pretty much all UI coding: don't mix business logic with the presentation layer, don't block user interactions, use the principle of least privilege, don't mix data access with data processing, etc. And all of the above issues are bigger problems than whether or not you namespace some functions.

How to organize JS functions using objects

3 Answers3