Control the Complexity of Your JavaScript Functions with JSHint

New JSHint Features

Many of you are aware of the JSHint code quality tool that has been around for the past couple of years. As of recently, the following new options that have been added regarding the complexity of a function.

• maxparams
• maxdepth
• maxstatements
• maxcomplexity

Parameters, Depth, and Statements

By reducing the number of parameters, the number of nesting, and the number of statements in your function you can dramatically increate the readability and modularity of your code.

The following piece of code shows using the maxparams, maxdepth, and maxstatements to warn us of possible issue with our functions.

JSHint gives an error that too many parameters were used because we limited maxparams to 3 and the code accepted 4 parameters. An error occurred because the depth of logic is too deep because we limited it to a maxdepth of 2. We will also get an error about the number of lines in our function because we limited maxstatements to 5 and we have many more than that.

Cyclomatic Complexity

A less commonly known software metric used to evaluate functions is Cyclomatic Complexity. Like it sounds, it's purpose is to calculate the overall intricacy of a function and to give a score that reflects it's complexity.

"The cyclomatic complexity of a section of source code is the count of the number of linearly independent paths through the source code." --http://en.wikipedia.org/wiki/Cyclomatic_complexity

In addition to the above parameters, depth, and statement metrics you can now track the overall complexity using the maxcomplexity option.

As you see above, the above function has more complexity that what we set in maxcomplexity.

You might be wondering what a reasonable maxcomplexity value is for your project. In the 2nd edition of Steve McConnell's Code Complete he recommends that a cyclomatic complexity from 0 to 5 is typically fine, but you should be aware if the complexity starts to get in the 6 to 10 range. He further explains that anything over a complexity of 10 you should strongly consider refactoring your code.

Global Options

Instead of adding these options to the top of each and every JavaScript file you an instead use a .jshintrc file in your project and JSHint should pick up those settings. This is handy if your project is large and you want some consistent settings across the board.

Custom JSBin Code Editor Settings

You may already know about the JSBin tool created by Remy Sharp (@rem). It was the first website of it's kind that I'm aware of that lets you quickly prototype and play around with web concepts in a way that is social and fun. Although it has been around for a while Remy has been adding more and more features to it recently.

One of the ones that I want to point out is the ability to modify the settings of it's internal code editor in order to look and behave something like the following screenshot...

CodeKit Configuration Settings

JSBin internally uses the CodeMirror library for it's HTML, JavaScript, and CSS code editors. JSBin exposes the Configuration Settings of CodeMirror and allows you to set them yourself. The settings are stored in localStorage so they are available the next time you use JSBin. CodeMirror supports a whole suite of settings, but the following are the ones that I am most interested in:

• theme - Color scheme that will be used for the editor.
  Currently the following themes exist: solarized-light, solarized-dark, monokai, vibrant-ink, cobalt, blackboard, ambiance, & jsbin (default)
• indentUnit - The number of spaces inside a block of code
• smartIndent - Automatically indent based on the context of what you are doing
• tabSize - This defines the width of the tab character
• indentWithTabs - Determines to use tabs instead of spaces when you intent
• autoClearEmptyLines - Clears whitespace only lines when the cursor exits the line
• lineWrapping - Wrap the contents of the line if it extends outside of the viewable area
• lineNumbers - This will show lines numbers in the left gutter
• matchBrackets - Matches associated bracket when your cursor is on a bracket

Making Changes to Your Editor Settings

You can set the above options manually in your browser's console like the following snippet of code...

Sharing Your Editor Settings With Others

If you want to share with others your settings for a specific JSBin you can add an api URL parameter pointing to a configuration file.

The following URL will load JSBin with a custom set of code editor options.

http://jsbin.com?api=http://j.mp/jsbin-settings

The http://j.mp/jsbin-settings file I am using looks like the following...


Remy has been making videos about various features of JSBin on his Tips and Bits blog. You can view the video about the above feature here...

Exterminate Common jQuery Bugs Video

I recently gave a presentation at aspConf: The Virtual ASP.NET Conference on `Exterminating Common jQuery Bugs`. I recorded the session locally and the aspConf guys graciously processed it and hosted it on the Channel 9 website.

The video above is the full 1 hour session with all of the points from my blog series plus a couple more that I haven't blogged yet. You can view the slides from the presentation from my GitHub account.

If you enjoy the talk please consider rating it on Channel 9 and SpeakerRate.

I presented this same talk at the jQuery San Fransisco 2012 Conference about a month ago, but I was limited to 30 minutes so I had to trim down what sections I covered.

The session is not referring to bugs in jQuery core itself, but rather bugs that tend to crop up in your application code the more you use jQuery.

Each point focuses on Examining a code sample with a bug, Explaining what is going on, Exterminating the bug by solving it one or more ways, and then dive into some Extra tidbits of knowledge that might be interesting about that topic.

The bugs vary from synchronous/asynchronous code, looking into the $.each method, looking at some confusing jQuery methods, digging into event delegation, unpacking strange animation behavior, and much more.

I hope you enjoy the session and pick up at least one thing you didn't know and can start using right away.

I want to thank all the staff and volunteers that put together and ran the jQuery and aspConf conferences. I had a blast participating in the events and enjoyed interacting with the audience in person and virtually. Thanks!