A quick introduction to the JavaScript parser - Esprima

1. Esprima – What is that ?
https://github.com/ariya/esprima
http://esprima.org

2. What is Esprima
Esprima is an ECMAScript parser written in ECMAScript
(Javascript)
Esprima produces a source tree of your JavaScript code (in json
format), which in turn can be traversed to analyze the code for
various aspects. Also static code analysis can be applied to give an
insight to the code.
It can help to determine meta information about the Javascript
code.
Full support for ECMAScript 5.1 - Any Javascript code written in
EcmaScript 5.1 or below can be parsed throgh current version of
Esprima(v1.0.4).

3. Availabilty
Esprima is available:
✔
on Browser
✔
as a node package
✔
through module loader(RequireJS)
✔
as Bower component
✔
with Yeoman

4. Usage
esprima.parse(code, options);
This produces a sytax tree format that is compatible with
Parser API of SpiderMonkey (Mozilla).
Options parameter can be provided to generate the detailed
syntax tree.
esprima.tokenize(code, options);
This produces an array of tokens used in JavaScript Program

5. Usage (parameters)
code is the actual JavaScript code as string.
options parameter can have following:
loc - when true, nodes have line and column-based location info
range - when true, nodes have an index-based location range (array)
raw – when true, literals have extra property to store the verbatim source
tokens – when true, an extra array is provided containing all found tokens
comment – when true, an extra array is provided containing all line and
block comments
tolerant - when true, an extra array containing all errors found, attempts
to continue parsing when an error is encountered
All are set to false by default.

6. Example
esprima.parse('var answer = 42;');
Outputs:
{
}
"type": "Program",
"body": [{
"type": "VariableDeclaration",
"kind": "var",
"declarations": [{
"type": "VariableDeclarator",
"id": {
"type": "Identifier",
"name": "answer"
},
"init": {
"type": "Literal",
"value": 42,
"raw": "42"
}
}]
}]

7. How can it help
●
Check for general bad practices
–
–
–
●
Identify Double Negatives - component.setHidden(false);
Identify declared, but not called functions;
Identify code/comment ratio
Tool to create utilities as:
–
–
–
Syntax validator
Code Autocomplete
Function Instrumentation

8. Applications
●
http://nornagon.github.io/scrubby/
●
https://github.com/jedhunsaker/codepainter
●
https://github.com/coveraje/coveraje
●
https://github.com/ariya/esmorph

9. escodegen
https://github.com/Constellation/escodegen
escodegen generates the ecmascript code from Abstract
Source Tree (the source tree generated from Esprima)
escodegen.generate({
type: 'BinaryExpression',
operator: '+',
left: { type: 'Literal', value: 40 },
right: { type: 'Literal', value: 2 }
});
produces the string '40 + 2'

10. Similar things
●
acorn.js http://marijnhaverbeke.nl/acorn/
●
Traceur-compiler https://github.com/google/traceur-compiler
Traceur is a JavaScript.next-to-JavaScript-of-today compiler
●
ZeParser https://github.com/qfox/ZeParser
●
Narcissus https://github.com/mozilla/narcissus
●
UglifyJS 2 https://github.com/mishoo/UglifyJS2

11. References
●
Esprima - http://esprima.org
●
Presentation by Ariya Hidayat http://www.youtube.com/watch?v=ACYZFkvq0Sk
●
Parser API by Mozilla https://developer.mozilla.org/en-US/docs/SpiderMonkey/Parser_API