By Michael Woloszynowicz

By Michael Woloszynowicz

Saturday, April 16, 2011

You Don't Know JavaScript

Over the last year or so I've noticed an irritating phenomenon developing. I've seen a repetitive pattern of programmers dressing their resumes with technologies that they don't really know, but have merely touched on. While this seems to be happening with many languages, the most commonly violated language is JavaScript.

You Don't Know That You Don't Know It
The reason for this is that just about every web developer comes across the need for JavaScript at one point or another. With a lack of understanding, the most common approach to learning JavaScript is to search for code samples case by case and perform some quick copy/paste. The problem with this sort of 'learning' is that developer never actually learns the language, and instead gains the false sense that they know it. What I've discovered over the course of learning and working with JavaScript for several years, is that you don't know that you don't know it, until you actually know it. Since this is a bit of a circularity, what you really need is someone to tell you that you don't know it, and that some real learning is needed. Too often I interview someone that proudly lists JavaScript on their resume having only done some simple onClick handlers or form validation that they pieced together from code samples. The use and knowledge of frameworks such as jQuery or Dojo is great, but you can't become a master of these toolkits without a good understanding of the JavaScript behind them. In order to present the many elements of JavaScript, I have divided its concepts into what I feel are basic, intermediate, and advanced knowledge levels as follows:

A basic level of understanding for JavaScript includes:
  • Knowing the syntax of basic programming tools such as loops, if statements, try/catch, etc.
  • Understanding function definitions including the various ways they can be defined and assigned, as well as anonymous functions
  • Understanding basic scope principles, global (window) scope versus object scope (closures excluded)
  • Understanding the role of context and the use of the 'this' variable
  • Understanding the different ways to instantiate and declare an object as well as functions as objects
  • Understanding JavaScript comparison operators like '<', '>', '==', '===',  what is falsy, and how object and string comparison works, as well as casting
  • Array indexing for object attributes and functions and how this differs from actual arrays (object literals vs. array literals)
An intermediate level of understanding includes:
  • Understanding timers, how they work, and when/how they can be useful as well as asynchronous method execution
  • In depth knowledge on callbacks and function application such as the 'call' and 'apply' methods for controlling context and function argument passing
  • Understanding JSON notation and the 'eval' function
  • Understanding closures, how they affect the performance of your code, and how they can be used to create private variables, along with the lovely (function(){})() call
  • AJAX and object serialization
An advanced level of understanding includes:
  • Understanding a methods 'arguments' variable and how it can be used to overload functions through arguments.length and make recursive calls through arguments.callee. It should be noted that use of arguments.callee can be dangerous as ECMAScript 5 Strict Mode doesn't support it, although both jQuery (up to 1.4) and Dojo take advantage of it. 
  • Advanced closures such as self-memoizing functions, currying, and partially applied functions
  • Function and html prototyping, the prototype chain, and how to use base JavaScript objects and functions (e.g. Array) to minimize coding
  • Object type and the use of instanceof and typeof
  • Regular expressions and expression compiling
  • With statements and why you shouldn't use them
  • The most difficult part of all, knowing how to tie all these tools together into clean, robust, fast, maintainable, and cross browser compatible code. 
The final point in the advanced section is particularly important, and is also the hardest to achieve. Given the lax nature of JavaScript, it's easy for your application to spiral into a mess of unmaintainable spaghetti code. Once you learn the JavaScript language itself, the real mastery comes from being able to structure it and tie it together in the context of a large web application. It is this final point that requires years of practice and getting it wrong, and can't be learned from a book. I myself have been using JavaScript for several hours daily for several years, and continue to discover better ways of structuring and writing my code. It is for this reason that jumping straight into a framework is dangerous, as jQuery code has a habit of becoming unmaintainable. Dojo offers some help with this through its Class and Package system. 

Given that JavaScript has now permeated into the back-end with things like Node.js, I've decided to isolate the above requirements from web-specific knowledge. It is the web aspects (namely the DOM and IE) that have given JavaScript a bad name and send chills down every programmers spine. That being said, if you're looking to use JavaScript in a web context there are additional things that every good developer should know:
  • The DOM and manipulating it in an efficient manner, namely adding, removing, and changing nodes, as well as working with text nodes. This includes minimizing browser re-flows through the use of tools such as document fragments. 
  • Extracting information from DOM elements in a cross browser manner (e.g. style, position, etc.). Things such as this are best done with a framework like jQuery or Dojo, however, it's important to understand the differences between extracting information specified in CSS vs. style tags and computing positions and sizes, etc. 
  • Cross browser event handling, binding, and unbinding, bubbling, and how to achieve desired callback context. Again this is best handled via a framework but one should understand the differences between IE and W3C standard browsers. 
  • Expandos vs. attribute setting, the performance differences between them, and the naming discrepancies that exist
  • Regular expressions for DOM node extraction
  • Effective browser functionality detection and graceful degradation
As you can see from the above list, there is a hell of a lot more to JavaScript than alert(myVal) and myBtn.onclick = ... There is certainly a lot more to it than you can copy/paste from, and you can only become a true JavaScript programmer through reading and practice. Two great books for covering all these topics are JavaScript: The Good Parts, and Secrets of the JavaScript Ninja. Let's remember that JavaScript is quite possibly the most accessible language there is, everyone has a browser, and there is little to no setup time. Create a simple html page and start playing around with the above concepts. As for the resume decoration, I would say that if you've covered the beginner level and are venturing into the intermediate stages, it is justifiable to list JavaScript. Once you find yourself developing your desired functions rather than copying and pasting them, you can then claim to know JavaScript, until then, please don't advertise it. 

If there are any aspects of JavaScript that I've missed please chime in, in the comments section. Also please share any experience you've had with people claiming to know JS or other languages.

It should be noted that I am not a front-end developer, I'm a back end developer that has evolved into a full-stack developer. Today almost every back-end developer needs to learn JavaScript and that is what this article is meant to encourage. It's not meant to sound condescending as I hardly claim to know everything there is to JS. What I would like to see is more people realize that JavaScript is a vast and powerful language, and that there is more to it than initially meets the eye. 

If you liked this post please follow me on Twitter for more.

No comments:

Post a Comment