JavaScript Usage - OOP, Prototypes, and (not-so) Simple Variables

Question

I have been programming JavaScript for a fair while. I haven't ever taken a course or read guides/books as to best practices, but I've seemed to figure things out pretty well as I've gone. I know that my code isn't always the shortest and cleanest, but it's made sense for me.

I recently got into object-oriented programming and think that it's a great time to jump head-first into the language. While I know that it would be in my best interest to spend a few days pouring over OOP, I have a specific question that would help me in my attempts.

Making Variables Objects

I have a PhoneGap application, for example, that includes many functions each serially listed in split-up .js files. Everything worked okay, but I would have to keep passing the same few functions between every function, and the potential for error was fine. After reading into methods and objects a little, each page evolved to this usage:

var myPage = {
    myVar1 : 'value',
    myVar2 : 32,
    initialize : function() {
        //code that initialized the variables within this object
    },
    doSomething : function() {
        //function that would do something with myPage vars
    }
    //...
};

Using this methodology, each page ended up as a grand variable with many encompassed methods and variables. This cleaned up quite a bit and greatly reduced global vars, but I still don't feel as though it's perfect. My shared .js files are broken into types and many objects, each with their own functions. My first question is: is this a bad thing, and if so, why? If I could get an explanation for my specific use, it would benefit me much more than seeing optimal examples in textbooks and guides.

Making Prototypes and Classes with a Single Instance

Looking at examples provided here and across the web and dead-tree publications, I see that objects and prototypical behavior is defined as a class, then instances of the class are created. Nothing that I need to do, however, seems to fit this budget, and I'm nearly positive that it's because I'm simply not thinking in the correct paradigm. However, if I have a function that validates input, how does that fit into a better OOP methodology?

I simply have a variable/object named validate that contains the functions necessary, then put that variable in the shared file. If I were to create it as a class and create an instance of it each time that I needed to validate something, doesn't that create a lot more overhead? I don't see how it works for applications such as this.

I think that OOP is the way to go, and I want to be part of it. Thanks in advance for all answers and comments.

As a passing comment, ECMAScript 6 will be a step up for OOP patterns using javascript. Even though it is all still possible with Prototypes, classes tend to be much easier to get a grasp on when learning OOP. ECMAScript 6 is not here yet, however there are some alternatives which compile down to current day javascript. Namely TypeScript from Microsoft and Traceur from Google. Both of these allow you to code using OOP and compile to Javascript. Surprisingly to everyone, I think Microsoft offers the better alternative of the two I mentioned. — francisco.preller, Sep 26 '13 at 01:24
You should read about dependency injection and try require.js. Sounds like it would be a smooth transition from the model you currently have. — bfavaretto, Sep 26 '13 at 02:24
francisco.preller: I find that very interesting, but OOP as-is is still foreign enough that I'm not ready for that big of a shift. Thanks bfavaretto; that looks like a good middle ground for me. — Nathan, Sep 26 '13 at 04:25

score 1 · Accepted Answer · answered Sep 26 '13 at 01:07

My first question is: is this a bad thing, and if so, why?

Competent developers avoid having functions defined in the global scope (what you do when you write function() {} inside a script) because it pollutes the global scope, where many other scripts try to do the same. Think of it as many of us trying to make a better "share()" function on the same page - only one of us will win.

I see that objects and prototypical behavior is defined as a class, then instances of the class are created. Nothing that I need to do, however, seems to fit this budget, and I'm nearly positive that it's because I'm simply not thinking in the correct paradigm

There's not much you can do there. If you have a function that validates input, then it would be better as part of the element:

someElement.validate();  // as a prototype

instead of the conventional

validate(someElement);  // as a global function

Thank you for the detailed information. So the global scope is polluted by the anonymous functions defined within others? Is that ever recycled, and what would you consider a better alternative? I use `function() {}` for everything from calls to callbacks. Thanks. — Nathan, Sep 26 '13 at 01:12
`var`s declared inside anonymous functions don't pollute the global scope, because they are not in global scope. See [this famous question](http://stackoverflow.com/questions/500431/javascript-variable-scope) about JS scoping. — Brian, Sep 26 '13 at 01:16

JavaScript Usage - OOP, Prototypes, and (not-so) Simple Variables

Making Variables Objects

Making Prototypes and Classes with a Single Instance

1 Answers1