JSHint: Learning JavaScript the Hard Way
1 like1,212 views
The document discusses the author's experience with JavaScript and the use of JSHint for static code analysis. It emphasizes the importance of understanding JavaScript conventions, code quality, and best practices, particularly for novice developers. The author shares insights from working on a web application project and highlights the benefits of JSHint in maintaining code standards and improving novice programmers' skills.
![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](https://image.slidesharecdn.com/iasijs-141127013333-conversion-gate02/85/JSHint-Learning-JavaScript-the-Hard-Way-9-320.jpg)
![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](https://image.slidesharecdn.com/iasijs-141127013333-conversion-gate02/85/JSHint-Learning-JavaScript-the-Hard-Way-21-320.jpg)
JSHint: Learning JavaScript the Hard Way
- 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
- 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
- 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