How to write high quality Javascript

Question

I have been in the process of learning Javascript to complement ASP.NET. I have a strong background in general programming, and have always been an advocate of disciplined practices and good hygiene to reduce the error count in code.

However, the language that Javascript is seems to make this very difficult. Its dynamic and interpreted nature seem to push error detection to the last point possible in the cycle. For example, syntax errors can get caught as late as the point when the code is actually executed, rather than before it is run as would be the case in a more static language. Similarly the soft type system is a minefield of potential hidden errors. Although you can represent object oriented design patterns in the language, it almost seems like they have made it as hard as possible to do so with little in the way of syntactic support.

This is compounded by the fact that Javascript seems to attract a sloppy mindset, and a lot of newbie programmers who confuse conscision and cleverness with quality (and I am not referring to minimized code, but examples of putatively good programming.) I Feel like I am reading entries in the obfuscated C contest sometimes.

Of course I also recognize that there are a lot of assets to Javascript that makes it powerful and extensible. Some of the fluid functional like techniques in, for example, jquery are very attractive.

I guess my question then is this: how do you write quality javascript? What tools, practices, idioms, debugging and logging libraries and so forth do you incorporate to reduce the bug count in your javascript applications? Are there web sites or discussion groups that focus on bug free javascript rather than cute programming hacks?

Answer 1

Use an IDE to prevent for types and names error.

I had a hard time developing javascript applications because of the weakness of the classes and the types, but since I use Netbeans to develop, the Type checking and method existence is made automatically.

However, you have to code in a way your IDE can recognize what kind of objects you create. I use the prototype attribute and class initializers to create my classes, and forbid myself of creating methods and properties after the initialization of an object.

Answer 2

My approach:

• don't treat the language as a class-based OO language
• explore the functional traits (you can offload a lot of primitive ops into prepackaged functions)
• don't conflate the language with the browser environment
• write unit tests

For example, syntax errors can get caught as late as the point when the code is actually executed, rather than before it is run as would be the case in a more static language.

That's expected from a language without separate compilation. Nothing prevents you from using a lint-like program.

Answer 3

Nobody writes high quality software straight way in any language, even the experienced programmers in some other language.So I can't answer that part.

But i can recommend you to use JQuery,mootools and Yahoo UI and various frameworks of javascript.Play with them and look at the source of these javascript libraries.Read this book, JavaScript: The Definitive Guide by David Flanagan and read crockford blog

Answer 4

Normally I don't do this, but since the question has a fairly broad scope, I'm going to recommend a couple of books:

Javascript, the Definitive Guide, 5th Edition
Javascript, the Good Parts

I would imagine that, after reading these two books, you would have a very good grasp on what best practices are.

I'm not sure what to tell you about the newbies and sloppy programmers. You can only control you. You might try recommending these two books to them.

Answer 5

• Learn to think functionally ( because that's where the power is )
• Use the The Good Parts ( to sleep well )
• Use Jslint ( to validate )
• Avoid browser sniffing, and use feature detection instead ( because browsers lie )
• Keep the global scope clear ( to avoid collisions )
• Namespace your code ( to avoid collisions )
• Don't mess with host objects ( because they can't be trusted )
• Consider ES5 Strict mode ( because it is the future )
• Follow the Top-Rated bloggers ( beacause they know "stuff" )

Bonus: Avoid gotchas.

Answer 6

• Syntax Errors: Code in any single Javascript file or <script> tag will not be executed if it contains syntax errors. Other sources of Javascript will still run, but this is expected behavior of an interpreted language whose source code is loaded over a high latency network. Waiting until every last bit of code is in memory would be wasteful. However most browsers only seem to report the first syntax error found (not sure if this is normal for interperted languages) in any one script source.

• Soft Type System: Just be sure to use === and !== for comparisons. As with many other things in JS, it is only a minefield if you let it become one.

• OOP: Javascript IS NOT (!==) class based. "Going out of its way" would be adding syntax for traditional class constructs that do not fit in with a prototype based object model. It really is important to approach Javascript with a different mindset than many other popular languages. If you are coming from Lisp you will feel right at home. There is much documentation out there on how to achieve things like private/privileged/static variables/methods in JS. Almost all of this involves Clousers, Functions as first-class objects, and Scope (maybe the three most important keywords in Javascript). Take some time upfront to really understand these aspects of Javascript rather than just copying code. Also experiment, use the console in Firebug to throw together examples of code whose behavior you might find confusing. Once you understand the how and why of advanced Javascript techniques, you will no longer feel like you are "going out of your way" to emulate certain class based OOP techniques. More so, you'll realize that those techniques are not always the best solution and find better methods that take advantage of Javascript's flexibility.

  This page is a good proper introduction to Javascript and its ways: http://www.crockford.com/javascript/javascript.html

• Sloppy Mindset: Javascript will not force or even nudge you into using good practices. Such are the consequences of a language that is at the same time extremely flexible and extremely lenient. Accept this. Then use tools like jslint to keep your code in check especially in the beginning. In the end the best way to avoid this sloppy mindset is again to understand the language. For instance, many PHP coders coming to Javascript ended up treating it's array's just like PHP's associative arrays. In some cases this bad practice worked without issue, and of course no JS interpreter threw any kind of warning about it. But if you understand the differences between object properties and array indexes in Javascript, you will not likely make this mistake as you will know the potential problems that can result because of it.

  The paradox of Javascript is that by its very nature it invites you to jump right in and start banging out superficially procedural code, while at the same time demanding a fundamental understanding of functional programing and prototype based objects in order to use it properly and harness its full potential.

  Also remember that this understanding is equally essential when using libraries like jQuery.

So in summary, how do you write quality Javascript? By fundamentaly understanding how the language works. This is not hard, though it might be intimidating because it is different. Read about, and experiment with Clousers, Scope, and Functions as objects. Learning Javascript is kind of like learning to drive a stick shift. Once you get it, you'll find you might like it and the high level of control it provides, even if it can be a pain in the ass sometimes.

What practices should you use? Once you understand the language, you will already know.

Tools for debugging? Well that is pretty simple, use Firebug. And when testing for compatibility, use the console that is built in to every major browser, even IE. Also use whatever text editor/IDE you are comfortable with. I like to use Vim, but that's just me.

Answer 7

I just want to add my two cents. Don't fight it. Javascript is a very nice language, but people (including myself) initially approach it with a "similar to..." vision, and try to force concepts and patterns found in other languages into it.

I used to hate JavaScript, but after a while I improved my skills and learned to appreciate the language for what it is, without trying to coerce an unnatural programming style imported from any foreign language. Don't trust Crockford's "the good parts" as a mantra. His view is, in my opinion, excessive as he tries to force javascript into unnatural, eventually complex designs borrowed from other languages, in particular when it comes to class inheritance and "abuse" of closures to achieve results the language does not provide (such as private vars).

It takes a bit of time, but once you realize how javascript works, it comes out as a language pleasant to learn and use.