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.

1. JSHint
Learning JavaScript the Hard Way
Adrian-Tudor Pănescu
tudor.panescu@cynny.com

2. About me
● ~5 years of Computer Science
● Germany, Switzerland, Romania
● NEC, CERN, Cynny Social Cloud
● Web Applications Development
jobs@cynny.com 2

3. JavaScript
● Used first time around 2010
● Recently moved from Python
● Open Source: Invenio, Intro.js, silog
jobs@cynny.com 3

4. First Real JavaScript Project
● Inherited project with some (many)
issues
● Web Analytics/ Advertisements Web
App
● Shared client/ server code base
jobs@cynny.com 4

5. Taming the Beast
● First step: understand the code
● pylint/ PEP8 → JSHint
● Cleanup → Discovery ↔ Learning
jobs@cynny.com 5

6. JSHint
● Static code analysis
● Highly-configurable
● Open-source, used by:
○ Mozilla
○ Twitter
○ Facebook
○ Apache
jobs@cynny.com 6

7. 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)
jobs@cynny.com 7

8. 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?
jobs@cynny.com 8

9. eqeqeq
● Expected '===' and instead saw '=='.
● Anyone coming from any other
language to JS will find this amazing
● [ ] == 0 // true
● [ ] === 0 // false
jobs@cynny.com 9

10. eqeqeq (Cont.)
jobs@cynny.com 10

11. eqeqeq (Cont.)
jobs@cynny.com 10

12. 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
jobs@cynny.com 11

13. foo is already defined (-W004)
jobs@cynny.com 12

14. Deeper the Rabbit Hole - latedef
jobs@cynny.com 13

15. Is this real life?
● Function scope - funcscope, shadow
● Hoisting
● Closures
● Missing var… but not in strict mode,
whatever that is
jobs@cynny.com 14

16. Semicolons: FUD or truth?
jobs@cynny.com 15

17. Semicolons: FUD or truth?
jobs@cynny.com 15

18. asi/ lastsemic (Cont.)
● Zen of Python: “Explicit is better than
implicit.”
● Controversial, but smart life decision
for (junior?) developers
jobs@cynny.com 16

19. Curly
jobs@cynny.com 17

20. forin
jobs@cynny.com 18

21. 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.
jobs@cynny.com 19

22. Code quality
● quotmark
● immed
● boss
● newcap
● expr
● notypeof
● freeze
● maxlen
● unused
● loopfunc
● camelcase
● es3/ esnext
● noempty
● nonew
jobs@cynny.com 20

23. 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
jobs@cynny.com 21

24. 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
jobs@cynny.com 22

25. Conclusions (Cont.)
● Can help maintain some standards,
especially among heterogeneous teams
● My project had a good outcome, some
JS learned
● Still using JSHint
jobs@cynny.com 23

26. Your questions,
answered.
jobs@cynny.com 24

27. 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
jobs@cynny.com 25

28. How do I use it?
● Editor plugin
● Grunt task: grunt-contrib-jshint
● Git hook: pre-push, merge request
● Continuous integration step
jobs@cynny.com 26