JavaScriptJavaScript Tools:Tools: JSLintJSLint && JSHintJSHint

SangSang ShinShin JPassion.comJPassion.com ““CodeCode withwith Passion!”Passion!”

1 Topics

• What is JSLint? • Things that are being flagged by JSLint • What is JSHint?

2

WhatWhat isis JSLint?JSLint? What is JSLint?

• JSLint is a static code analysis tool used in development for checking if JavaScript complies with coding rules • It was developed by • It is provided primarily as an online tool, but there are also command-line version

4 JSLint Online Tool

• http://www.jslint.com/

5 JSLint Command Line Tool

• Install “” plugin to your Node.js installation > install jslint -g • Then run “jslint” command > jslint myapp.js

6 JSLint Plugins for text editors and IDEs

• Editors > Sublime Text, TextMate, , Emacs, Nodepad++ • IDE's > Visual Studio, Eclipse, IntelliJ, NetBeans • Build tool > Maven

7

ThingsThings thatthat areare flaggedflagged byby JSLintJSLint Global Variables

• Issues > JavaScript's biggest problem is its dependence on global variables, particularly implied global variables > If a variable is not explicitly declared (usually with the “var” statement), then JavaScript assumes that the variable was global. This can mask misspelled names and other problems • What JSLint expects > JSLint expects that all variables and functions are declared before they are used or invoked > This allows it to detect implied global variables. It is also good practice because it makes programs easier to read.

// The declaration should appear near the top of the file. It must appear // before the use of the variables it declares. var getElementByAttribute, breakCycles, hanoi; 9 Scopes

• Issues > In many languages, a block introduces a scope. Variables introduced in a block are not visible outside of the block. > In JavaScript, blocks do not introduce a scope. There is only function-scope. A variable introduced anywhere in a function is visible everywhere in the function. JavaScript's blocks confuse experienced and lead to errors because the familiar syntax makes a false promise. • What JSLint expects > JSLint expects blocks with function, if, switch, while, for, do, and try statements and nowhere else > Because JavaScript does not have block scope, it is wiser to declare all of a function's variables at the top of the function. It is recommended that a single “var” statement be used per function. 10 var

• Issues > JavaScript allows var definitions to occur anywhere within a function. JSLint is more strict. • What JSLint expects > JSLint expects that a var will be declared only once, and that it will be declared before it is used. > JSLint expects that a function will be declared before it is used. > JSLint expects that parameters will not also be declared as vars. > JSLint does not expect the arguments array to be declared as a var. > JSLint does not expect that a var will be defined in a block. This is because JavaScript blocks do not have block scope. This can have unexpected consequences. Define all variables at the top of the function. 11 eval

• Issues > eval is evil > The eval function (and its relatives, Function, setTimeout, and setInterval) provide access to the JavaScript compiler. This is sometimes necessary, but in most cases it indicates the presence of extremely bad coding. The eval function is the most misused feature of JavaScript. • What JSLint expects > JSLint expects no usage of eval

12 Constructor Function and “new”

• Issues > Constructor functions are functions that are designed to be used with the new prefix. The new prefix creates a new object based on the function's prototype, and binds that object to the function's implied this parameter. If you neglect to use the new prefix, no new object will be made and this will be bound to the global object. This is a serious mistake. • What JSLint expects > JSLint enforces the convention that constructor functions be given names with initial uppercase > JSLint does not expect to see a function invocation with an initial uppercase name unless it has the new prefix > JSLint does not expect to see the new prefix used with functions whose names do not start with initial uppercase. 13 Constructor Function and “new”

• Issues > Constructor functions are functions that are designed to be used with the new prefix. The new prefix creates a new object based on the function's prototype, and binds that object to the function's implied this parameter. If you neglect to use the new prefix, no new object will be made and this will be bound to the global object. This is a serious mistake. • What JSLint expects > JSLint enforces the convention that constructor functions be given names with initial uppercase > JSLint does not expect to see a function invocation with an initial uppercase name unless it has the new prefix > JSLint does not expect to see the new prefix used with functions whose names do not start with initial uppercase. 14 Properties

• Issues > Since JavaScript is a loosely-typed, dynamic-object language, it is not possible to determine at compile time if property names are spelled correctly. JSLint provides some assistance with this. • What JSLint does > At the bottom of its report, JSLint displays a /*properties*/ directive. It contains all of the names and string literals that were used with dot notation, subscript notation, and object literals to name the properties of objects. You can look through the list for misspellings. This is to make misspellings easier to spot.

15 “use strict”

• What you see when you do not use “use strict” in your function > Problem at line 1 character 1: Missing "use strict" statement. • What is “use strict” for? > Strict Mode is a new feature in ECMAScript 5 that allows you to place a program, or a function, in a "strict" operating context. This strict context prevents certain actions from being taken and throws more exceptions • Strict mode helps out in a couple ways > It catches some common coding mistakes, throwing exceptions. > It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object). > It disables features that are confusing or poorly thought out

16 Lab:Lab:

ExerciseExercise 1:1: JSLintJSLint 4253_javascript_tools.zip4253_javascript_tools.zip

17

WhatWhat isis JSHint?JSHint? What is JSHint?

• http://jshinit.com • A fork from JSLint – initially created to provide more flexible way of using JSLint (for example, turning off some checks) • More intuitive UI than JSLint

19 JSHint Command Line Tool

• Install “” plugin to your Node.js installation > npm install jshint -g • Then run “jslint” command > jshint myapp.js

20 JSHint Plugins for text editors and IDEs

• Editors > Sublime Text, TextMate, VIM, Emacs, Nodepad++ • IDE's > Visual Studio, Eclipse, IntelliJ, NetBeans • Build tool > Maven

21 Lab:Lab:

ExerciseExercise 2:2: JSHintJSHint 4253_javascript_tools.zip4253_javascript_tools.zip

22 CodeCode withwith Passion!Passion! JPassion.comJPassion.com

23