Basic query for JavaScript and TypeScript code¶

Learn to write and run a simple CodeQL query using Visual Studio Code with the CodeQL extension.

For information about installing the CodeQL extension for Visual Studio code, see “Setting up CodeQL in Visual Studio Code.”

About the query¶

In JavaScript and TypeScript, any expression can be turned into an expression statement. While this is sometimes convenient, it can be dangerous. For example, imagine a programmer wants to assign a new value to a variable x by means of an assignment x = 42. However, they accidentally type two equals signs, producing the comparison statement x == 42. This is valid JavaScript, so no error is generated. The statement simply compares x to 42, and then discards the result of the comparison.

The query you will run finds instances of this problem. The query searches for expressions e that are pure—that is, their evaluation does not lead to any side effects—but appear as an expression statement.

Finding a CodeQL database to experiment with¶

Before you start writing queries for JavaScript/TypeScript code, you need a CodeQL database to run them against. The simplest way to do this is to download a database for a repository that uses JavaScript/TypeScript directly from GitHub.com.

In Visual Studio Code, click the QL icon in the left sidebar to display the CodeQL extension.
Click From GitHub or the GitHub logo at the top of the CodeQL extension to open an entry field.
Copy the URL for the repository into the field and press the keyboard Enter key. For example, https://github.com/ajaxorg/ace.
Optionally, if the repository has more than one CodeQL database available, select javascript to download the database created from the JavaScript/TypeScript code.

Information about the download progress for the database is shown in the bottom right corner of Visual Studio Code. When the download is complete, the database is shown with a check mark in the Databases section of the CodeQL extension (see screenshot below).

Running a quick query¶

The CodeQL extension for Visual Studio Code adds several CodeQL: commands to the command palette including Quick Query, which you can use to run a query without any set up.

From the command palette in Visual Studio Code, select CodeQL: Quick Query.
After a moment, a new tab quick-query.ql is opened, ready for you to write a query for your currently selected CodeQL database (here a javascript database). If you are prompted to reload your workspace as a multi-folder workspace to allow Quick queries, accept or create a new workspace using the starter workflow.

In the quick query tab, delete select "" and paste the following query beneath the import statement import javascript.

from Expr e
where e.isPure() and
  e.getParent() instanceof ExprStmt
select e, "This expression has no effect."

Save the query in its default location (a temporary “Quick Queries” directory under the workspace for GitHub.vscode-codeql/quick-queries).
Right-click in the query tab and select CodeQL: Run Query on Selected Database. (Alternatively, run the command from the Command Palette.)

The query will take a few moments to return results. When the query completes, the results are displayed in a CodeQL Query Results view, next to the main editor view.

The query results are listed in two columns, corresponding to the expressions in the select clause of the query. The first column corresponds to the expression e and is linked to the location in the source code of the project where e occurs. The second column is the alert message.

../../_images/basic-js-query-results-1.png

If any matching code is found, click one of the links in the e column to open the file and highlight the matching expression.

../../_images/basic-js-query-results-2.png

Note

If you want to move your experimental query somewhere more permanent, you need to move the whole Quick Queries directory. The directory is a CodeQL pack with a qlpack.yml file that defines the content as queries for JavaScript/TypeScript CodeQL databases. For more information about CodeQL packs, see “Working with CodeQL packs in Visual Studio Code.”

About the query structure¶

After the initial import statement, this simple query comprises three parts that serve similar purposes to the FROM, WHERE, and SELECT parts of an SQL query.

Query part	Purpose	Details
`import javascript`	Imports the standard CodeQL libraries for JavaScript and TypeScript.	Every query begins with one or more `import` statements.
`from Expr e`	Defines the variables for the query. Declarations are of the form: `<type> <variable name>`	`e` is declared as a variable that ranges over expressions.
`where e.isPure() and e.getParent() instanceof ExprStmt`	Defines a condition on the variables.	`e.isPure()`: The expression is side-effect-free. `e.getParent() instanceof ExprStmt`: The parent of the expression is an expression statement.
`select e, "This expression has no effect."`	Defines what to report for each match. `select` statements for queries that are used to find instances of poor coding practice are always in the form: `select <program element>, "<alert message>"`	Report the expression with a string that explains the problem.

Extend the query¶

Query writing is an inherently iterative process. You write a simple query and then, when you run it, you discover examples that you had not previously considered, or opportunities for improvement.

Remove false positive results¶

Browsing the results of our basic query shows that it could be improved. Among the results you are likely to find use strict directives. These are interpreted specially by modern browsers with strict mode support and so these expressions do have an effect.

To remove directives from the results:

Extend the where clause to include the following extra condition:

and not e.getParent() instanceof Directive

The where clause is now:

where e.isPure() and
  e.getParent() instanceof ExprStmt and
  not e.getParent() instanceof Directive

Re-run the query.

There are now fewer results as use strict directives are no longer reported.

The improved query finds several results on the example project including the result below:

point.bias == -1;

As written, this statement compares point.bias against -1 and then discards the result. Most likely, it was instead meant to be an assignment point.bias = -1.