jshint: learning javascript the hard way
DESCRIPTION
If you want to learn JavaScript nowadays, you will normally go to W3Schools, MDN, or Codecademy, start with a simple "helloWorld()" tutorial and build up from there. Here is an alternative to this method of learning the intricacies of an otherwise cool language: take a junior programmer coming from the Java/ Python/ C++ world, give him an existing NodeJS/ MongoDB/ Redis/ Web Sockets/ single-page HTML5 Web application, and one month to add new major features to it. Our junior does not know JavaScript, but is in love with static analysis/ linting tools, and thinks of using JSLint in order to both learn the language and complete his tasks in time with a minimal number of bugs. As this is the way in which I learned JavaScript, I will present you my experience, including the fact that the programmers before me had little idea of how the language actually works, what lessons I was (self-)taught in the process, and how this knowledge and some practices stuck with me. While this was an unconventional learning experience, I believe that the method can be quite efficient, maybe not for first-year Computer Science students, but for programmers coming from other language realms.TRANSCRIPT
About me
● ~5 years of Computer Science● Germany, Switzerland, Romania● NEC, CERN, Cynny Social Cloud● Web Applications Development
JavaScript
● Used first time around 2010● Recently moved from Python● Open Source: Invenio, Intro.js, silog
First Real JavaScript Project
● Inherited project with some (many) issues
● Web Analytics/ Advertisements Web App
● Shared client/ server code base
Taming the Beast
● First step: understand the code● pylint/ PEP8 → JSHint● Cleanup → Discovery ↔ Learning
JSHint
● Static code analysis● Highly-configurable● Open-source, used by:
○ Mozilla○ Twitter○ Facebook○ Apache
What would JSHint complain about?
gcd = function(first_number, second_number) {
var result;
while (first_number != second_number)
if (first_number > second_number) {
var first_number = first_number - second_number;
} else if (first_number <= second_number) {
second_number -= first_number;
} else {}
console.log('result is:', first_number | second_number);
}(12, 24)
First run
● maxerr = 50, hit that● Things started looking suspicious● Did the guys before me have any idea
what they were doing?● Do I have any idea about what I am
doing?
eqeqeq
● Expected '===' and instead saw '=='.● Anyone coming from any other
language to JS will find this amazing● [ ] == 0 // true● [ ] === 0 // false
eqeqeq (Cont.)
● The Strict Equals Operator (===): shorter, more straight-forward algorithm
● Better for someone accustomed to this behaviour
● Inexperienced devs might miss the point of == and experience some sleepless nights
Is this real life?
● Function scope - funcscope, shadow● Hoisting● Closures● Missing var… but not in strict mode,
whatever that is
asi/ lastsemic (Cont.)
● Zen of Python: “Explicit is better than implicit.”
● Controversial, but smart life decision for (junior?) developers
forin (Cont.)
● The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
● So, it doesn’t work like Python…? (obv.)● typeof [] === ‘object’ - I am really confused
now.
Code quality
● quotmark● immed● boss● newcap● expr● notypeof● freeze
● maxlen● unused● loopfunc● camelcase● es3/ esnext● noempty● nonew
Function over style?
● maxparams - maybe use an args object?
● maxstatements - don’t make me scroll● maxdepth - nests, nests everywhere● maxcomplexity - if for if wtf if while if
else
Conclusions
● Static code analysis: controversial but will help novices (and not only) write maintainable code
● Expose juniors to some new concepts○ latedef and -W004 will send you
through a long spiritual journey
Conclusions (Cont.)
● Can help maintain some standards, especially among heterogeneous teams
● My project had a good outcome, some JS learned
● Still using JSHint
Other tools
● JSLint - more explanatory, explicit○ jslinterrors.com
● ESLint - very configurable, check it out!● Google Closure Linter - strict typing● Flow - static type checker● JSure, JavaScript Lint
How do I use it?
● Editor plugin● Grunt task: grunt-contrib-jshint● Git hook: pre-push, merge request● Continuous integration step