Getting Started with Esprima

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

Thanks to two awesome people (Nick and Andy), for introducing me to Esprima. If you have never heard about Esprima, here is a quick intro.

Esprima is a high performance, standard-compliant ECMAScript parser written in ECMAScript

In simple words, Esprima is a Javascript parser. It reads a string that consists of Javascript code and makes sense of it.

So where and why exactly you need a Javascript parser? Simple answer is for code completion in IDEs. When you start typing  ale, you expect  alert to be suggested by your IDE.

Another powerful use case is for minification. If you would want to read a Javascript source file and rewrite it by stripping comments and minimizing the variable names, you need a Javascript parser, that understands Javascript and then helps you rewrite the code.

Esprima was created by Ariya Hidayat and is maintained by Ariya and a bunch of contributors. Ariya also gave a talk on Esprima a couple of years. I would recommend watching it before you continue.

As you can see from the above video, Esprima can be used for Static Analysis using the AST (Abstract Syntax Tree). It can be used for Dynamic tracing, which helps us in identifying how many times each function is called. It can also be used in editing tools and code transformations to implement code minification.

In this post, we will check if any variables are leaked to the global scope from our Javascript code using Esprima.

And this is how we are going to do it. First, we are going to set up esprima and read a Javascript file. Once we read the file, we will build the AST (Abstract Syntax Tree) using the esprima’s parse(). Next, using the  escope module, we fetch the global scope and see if there are any variables attached to this and then warn the developer.

So, let us get started.

Setup Esprima

First, create a new folder named leakDetector  and open a new terminal/prompt here. We will set up a new node project. Run

npm init

Next, we will download the required dependencies. Execute

npm install esprima escope

Detect Leaks

Once the modules are downloaded, create a new file named index.js. First, we will include the required modules

We will read an external script file, hence the fs module.

We will pass the script file name as an argument to our node function.

We read the content of the file and store it inside the srcCode  variable.

Now we parse and generate the AST from the source code.

This is an interesting juncture. Let us stop here and understand what AST is.

In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the abstract syntactic structure of source code written in a programming language.

Abstract_syntax_tree_for_Euclidean_algorithm

The above tree is a resultant of the below code

Each node of the tree denotes a construct occurring in the source code. The syntax is “abstract” in not representing every detail appearing in the real syntax. For instance, grouping parentheses are implicit in the tree structure, and a syntactic construct like an if-condition-then expression may be denoted by means of a single node with three branches.

In the exact same way Esprima takes in the source code and constructs the AST. To take a quick peek at AST, click on the links below and observe the tree on the righthand side of the page

You can play around and observe the tree that gets generated. This is a static analysis of the code. Interesting right?

AST is build based on the Parser API of Spider Monkey. A very interesting and long documentation can be found here.

Now once we have an AST, we will analyse it and get the global scope.

scopes[0] here refers to the global scope. Once we have that we will iterate through  implicit.variables in global scope and throw a warning.

The completed index.js would look like

This is all you need to check leaks.

To test the above program, create another file named test.js at the root of the project and add the below code

The above file is a sample Javascript source code file that consist of application logic for another application that we want to check for global leaks.

In the above example file, variables c , d  and z  are not declared, and when we run the file through our code, it should point out the same.

To run the program, execute

node index.js test.js

And you should see

Simple and easy right? This example is just the tip of iceberg. You can checkout other estools that you can use to play around with Javascript source code.

I would also recommend going through all the demos listed here to get a feel of Esprima and its capabilities.

Also do check out the blog posts written by Ariya on Esprima here.

Hope this post gave you an idea on how to work with Esprima.


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page