Research Abstracts - 2006

Static Checking of JavaScript

Jonathan E. Stritar & Robert C. Miller

Introduction

Programmers frequently run code in a variety of environments and contexts. Since current Integrated Development Environments (IDE) and editors cannot access this environment, the tools cannot statically check the code as much as they otherwise would have. The lack of static checking slows down development time. Developers do not realize errors occur until after building and running the program. Since execution of the program usually stops when errors are thrown, the program needs to be fixed, rebuilt and reinstalled each time.

The goal of the project is to create a system that integrates the Eclipse development environment with the Firefox browser. The system provides Firefox extension developers with a tool to statically check JavaScript files with data collected directly from the run-time environment.

Approach

The static checking system gives Eclipse access to the JavaScript contexts of Firefox. The system is comprised of two parts -- an Eclipse plugin and a Firefox extension. The Eclipse plugin injects calls to the Firefox extension at the beginning of every function in each JavaScript file. The Firefox extension then crawls the object hierarchy for each function. The variables and identifiers present in the object hierarchy define the function's context. The extension builds a database mapping functions to their respective contexts. The Eclipse plugin then statically checks the JavaScript files in the project as they are edited by cross-referencing with the context database.

On each consecutive call to the Firefox extension, the system records both the union and intersection of the sets of variables defined in the hierarchy. The extension stores both sets in the context database. The union and intersection provide Eclipse with a spectrum of feedback. If Eclipse identifies a variable that is in the union, but not the intersection, then that variable may not be defined at execution. Similarly, if the variable exists in the intersection, then it most likely will be defined at execution.

By knowing the code's context, the system can check the code in a variety of ways. The most straight forward application is to detect references to undefined variables. This would prevent spelling mistakes and errors associated with not knowing exactly the contents of the run-time environment. The left half of Figure 1 illustrates examples of other programming bugs that do not readily produce errors, or exceptions, yet may lead to problems elsewhere in the program.

Figure 1. Programming bugs that do not throw exceptions, yet lead to problems.

The static checking system can help prevent errors similar to those in Figure 1 by providing feedback for various types of variable accesses and assignments. The right half of Figure 1 shows a concept user interface where creations of variables are indicated by ⁺ characters, and global and local variables are distinguished by color. The programmer could presumably realize the actual behavior of the code, whether correct or incorrect.

Future Work

The static checking system can collect a wealth of information from the JavaScript contexts. For example, the system can crawl object properties, classify the objects into various types and impose such types. The degree to which the system enforces the checking can greatly affect the user experience. User tests are needed to determine what information is useful, and the best way to present the results of the static checking.