Saturday, August 30, 2014

JavaScript 'strict' mode and OOP template

"JavaScript is not a complete programming language. It gives so many chances for us to make errors. The code is not very structured. It is very difficult to follow the control flow." This is a common statement one could hear from back-end developers starting to do client side development. While I agree to that statement to some extent. I still believe that JavaScript is a very nice dynamic language with its own good parts. It is a language which has got a larger role to play in the future of the web. It might take sometime for the beginners to get used to some of the core concepts like prototype, closures, etc. But, once mastered, the language will help you to get your things done quickly (especially on the web). 

Ecosystem
The language itself has been going through various iterations and lots of good parts (some bad parts as well) are being built into the language. New build tools (grunt, gulp) are evolving around the ecosystem to help improve the build process. New package managers (npm, bower) are rising up to manage the dependencies when it comes to accessing third party libraries. New application frameworks (Ember.js, Angular.js) are coming up to help architect web applications in a more scalable and maintainable way. New testing tools (Mocha, Karma) are cropping up to help you gain confidence over your code. JavaScript has made its way on to the server side as well with the emergence of Node.JS. The system is evolving at a very good pace and it is important for the developers to get themselves updated on these developments and get benefited by the good parts of it. In this post, I am going to brief about strict mode JavaScript and why it is necessary for everyone to use it. I will also talk about my style of doing Object Oriented Programming in JavaScript.

Strict mode JavaScript
The dynamic nature of JavaScript makes it very soft. JavaScript engine tends to ignore even common mistakes like undeclared variables, writing to a read-only property, etc. This behavior of JavaScript could lead to unexpected results and could become a debugging nightmare for you. Strict mode JavaScript helps you to put in some restrictions on the code you write. Strict mode JavaScript will throw errors for cases which were otherwise ignored in normal mode.

For example, the example given below will work just fine in normal mode. Note that the variable 'lastNam' has been mispelt. In normal mode, the code will work just fine and the value will be set to window.lastNam which is incorrect. Strict mode can be enabled by just using the string "use strict"; at the beginning of your code. The mode can be enabled for the whole file or can be enabled for a specific function alone. In my opinion, this mode must be enabled by default for the whole file. With strict mode, one can capture most of the programming errors easily. This is the best safety net JavaScript has got for us.  Its hard to believe that developers are still not using it actively. Strict mode has been available in all the browsers for ages (from ES5). Do use it in your code. If you find a library which is not supported in strict mode, perhaps it is the time to move away from that library. There is a recent article on Mozilla developer network with detailed information about 'strict' mode. Check it out here.
Loading normal.js. If it is taking longer than expected, check out the direct link nromal.js
Loading strict.js. If it is taking longer than expected, check out the direct link strict.js
Organizing the complexity with Object Oriented Programming
In the software industry, most of us attempt to solve our problems by breaking them down into objects. And, it works out quite well as it is easy to map objects in the programming world to objects in the real world. Though OOP is not the only solution to organize the complexity, it helps us to manage the code complexity much easier than others. JavaScript is not a class based Object Oriented language. There is no first class support for classes in JavaScript (coming soon in ES Harmony). There are also tons of JavaScript patterns available to help us organize our code. I am a fan of module pattern and have been wrapping my functionalities into well defined modules. For defining domain / business objects in JavaScript, one would typically use object literals. Object literals are good but are not rigid when you pass it across functions. The literal can dynamically be changed to add / delete a member at a later point of time. At times, I have the need to define concrete classes and create objects that are locked. I don't want my object to be tampered at a later point of time. ES5 has lots of useful Object utilities to help us get there.

The code snippet attached below shows the template I use to mimic the behavior of classes in JavaScript. With the code shown below, we will be able to achieve encapsulation, abstraction and polymorphism. I am not a fan of prototype based inheritance and have been avoiding that with the help of strategy pattern. In the example below, the object p1 of type Person is similar to an object in any other OO language. I won't be able to add / remove any members to p1 dynamically. I won't able to tamper with the class 'Person' as well. It is completely locked and frozen for you. Though it is a little verbose, it provides exactly the same functionality a Java class will. Check out this article by John Resig on Objects and Properties in ES5. This has also been out there in the browser for ages but developers hardly use them. Do use them to structure your code. It will help you to organize the complexity much better.
Loading ....
As with other dynamic languages, there are many ways of doing the same thing. This is my style of structuring the code and it has been working out well for me. One could rewrite the same code without using objects and just using functions (JavaScript is a very powerful functional programming language). ES Harmony has first-class support for Classes and modules. Do check them out as well. Again, there are lots of developments happening on this space. Keep yourself updated. Be a responsible developer, build for the future web.

-- Varun

No comments:

Post a Comment