JavaScript and the AST

JavaScript and the AST
Jarrod Overson - Shape Security
@jsoverson

var jQuery = require('jquery')

(function(){
//browserify stuff
})({
1: [function(require, module, exports) {
var jQuery = require('jquery');
}, { "jquery": 2 }],
2: [function(require, module, exports) {
//*! jQuery v1.11.3 | (c) 2005, 2015 jQuery
!function(a,b){"object"==typeof module&&"object
}, {}]
}, {}, [1]);

// var jQuery = require('jquery')

/*
// */ var jQuery = require('jquery');

var jQuery = "require('jquery')"

var module = 'jquery';
var jQuery = require(module)

files.map(function (file) {
return file.ext;
})
files.map(file => file.ext))

files.map(file => this.parse(file));
var _this = this;
files.map(function (file) {
return _this.parse(file);
});

Let's say you wanted to tweak your code.
Just a little bit.

Remember life before RegExes?
Has anyone thought : "Meh, I got text search."

foo(a)
/foos*((:?[_$a-zA-Z][_$a-zA-
Z0-9]*|,)*?)/

foo(ಠ_ಠ)
/foo(([_$a-zA-ZxA0-uFFFF][_
$a-zA-Z0-9xA0-uFFFF]*)?)/

foo(4)
/foo((:?d*|[_$a-zA-ZxA0-
uFFFF][_$a-zA-Z0-9xA0-
uFFFF]*)?)/

foo(4,a)
/foo((:?d*|[_$a-zA-ZxA0-
uFFFF]*|,)*?)/

foo (4,a)
/foos*((:?d*|[_$a-zA-ZxA0-
uFFFF]*|,)*?)/

otherfoo()
bfoos*((:?d*|[_$a-zA-ZxA0-
uFFFF]*|,)*?)

foo("2")
/bfoos*((:?(['"])[^2]*2|
d*|[_$a-zA-ZxA0-uFFFF][_$a-
zA-Z0-9xA0-uFFFF]*|,)*?)/

foo(''.prototype.toUpperCase.call([a
,""",b,"""].join('')))
/(╯°□°）╯︵ ┻━┻/

Using esquery:
[callee.name="foo"]

Abstract Syntax Tree
A tree representation of the syntactic structure of source code.

• How do you get a JavaScript AST?
• How do you use it?
• How do you transform it?
• Building a transpiler.

Parsing JavaScript
• Esprima - Fast, conservative. Parses to ESTree format.
• Acorn - Error tolerant. Parses to ESTree format.
• Shift - Most spec-compliant. Parses to Shift format.

ESTree Shift
• Community effort
• Wide tool support
• Somewhat backwards  
compatible with  
SpiderMonkey AST
• Shape Security product
• Limited tool support
• Not compatible with ESTree
• Cross platform
• First spec-based AST
vs
Standardized AST formats

Why ever use Shift?
• Shift was developed by Ariya Hidayat (Esprima), Michael Ficarra
(CoffeeScript, loads of ES tools), and several others.
• Shift was designed speciﬁcally for simpler and more efﬁcient
transformation and analysis code.
• Shift creators still contribute to ESTree.
• When in doubt, use ESTree for the community.
• If ESTree causes problems, consider Shift.

Just a Plain Old
JavaScript Object
{
"type": "Script",
"directives": [],
"statements": [
{
"type": "VariableDeclarationStatement",
"declaration": {
"type": "VariableDeclaration",
"kind": "var",
"declarators": [
{
"type": "VariableDeclarator",
"binding": {
"type": "BindingIdentifier",
"name": "a"
},
"init": {
"type": "CallExpression",
"callee": {
"type": "FunctionExpression",
"isGenerator": false,
"name": null,
"params": {
"type": "FormalParameters",
"items": [
{
"type": "BindingIdentifier",
"name": "a"
}
],

AST Explorer
http://felix-kling.de/esprima_ast_explorer/

Ready made traversal tools/helpers
• estraverse (estree)
• esprima-walk (estree)
• ast-traverse (estree)
• shift-traverse (shift)
• shift-reducer (shift)

How do you transform an AST?
let a = 2;
let b = 2;

{ type: 'Script',
directives: [],
statements:
[ { type: 'VariableDeclarationStatement',
declaration:
{ type: 'VariableDeclaration',
kind: 'let',
declarators:
[ { type: 'VariableDeclarator',
binding: { type: 'BindingIdentifier', name: 'a' },
init: { type: 'LiteralNumericExpression', value: 2 }

import {parseScript} from 'shift-parser';
import codegen from 'shift-codegen';
let ast = parse('let a = 2;');
ast.
statements[0].
declaration.
declarators[0].
binding.name = 'b';
let newSource = codegen(ast);

OK, Let's build a transpiler.
I really really like Arrow Expressions, how 'bout you?

Test ﬁrst: what are we expecting?
(() => { return 2 })()
If we run* the following in an ES5 environment
it will return
2
* transpile and eval()

shift-reducer
Like [].reduce() but for ASTs

import reduce from 'shift-reducer';
var result = reduce(reducer, ast);

import spec from 'shift-spec';
let reducer = {};
for (var nodeName in spec) {
reducer["reduce" + nodeName] = function (node, state) {
return state;
};
}

Hypothesis:
(function(){ return 2 })()
Transforming the ArrowExpression into a FunctionExpression, eg
should pass the test.

reducer.reduceArrowExpression = function(node, state) {
state.type = 'FunctionExpression';
return state;
}

(function(){return 2}())
(()=>{return 2})()

Next step, omit the return.
(() => 2)()

reduceArrowExpression(node, state) {
if (state.body.type !== 'FunctionBody') {
var oldBody = state.body;
state.body = {
type : 'FunctionBody',
directives : [],
statements : [{
type: 'ReturnStatement',
expression: oldBody
}]
}
}
return state;
}

(function(){return 2}())
(() => 2)()

And now for this
() => this.foo

The good way…
// assign "this" to a temporary variable
var _this = this;
// before we access it here
function(){ return _this.foo }

The easy way…
function(){ return this.foo }.bind(this)
(The good way is left as an exercise to you, mostly due to time)

ArrowExpressions && bind()
this.val = 2;
arrow = () => this.val;
arrow()
arrow.bind({val:6})()
obj = { val : 12, arrow : arrow }
obj.arrow();
// 2
// 2
// 2

FunctionExpressions && bind()
this.val = 2;
fn = function() { return this.val };
fn()
fn.bind({val:6})()
obj = { val : 12, fn : fn }
obj.fn();
// 2
// 6
// 12

FunctionExpression

CallExpression
FunctionExpression

let callExpression = {
type: 'CallExpression',
callee: {
type: 'StaticMemberExpression',
object: state,
property: 'bind'
},
arguments: [{ type: 'ThisExpression' }]
};
state.body = {
directives : [],()

callee: {
object: state,
property: 'bind'
},
};
state.body = {
directives : [],<state>.bind()

{
type: "CallExpression",
callee: {
type: "StaticMemberExpression",
object: {
type: "IdentifierExpression",
name: "foo"
},
property: "bind"
},
arguments: []
}
foo.bind()
AST BREAK!

{
callee: {
type: "ComputedMemberExpression",
object: {
type:"IdentifierExpression",
name:"foo"
},
expression: {
type: "LiteralStringExpression",
value: "bind"
}
},
arguments: []
}
foo["bind"]()
AST BREAK!

{
callee: {
type: "IdentifierExpression",
name: "foo"
},
arguments: []
}
foo()
AST BREAK!

callee: {
object: state,
property: 'bind'
},
};
state.body = {
directives : [],<state>.bind(this)

},
};
state.body = {
directives : [],
statements : [{
expression: oldBody
]
}
}
return callExpression;
}

"use strict";
import spec from 'shift-spec';
let reducer = {};
for (var nodeName in spec) {
reducer['reduce' + nodeName] = (node, state) => state;
}
reducer.reduceArrowExpression = function (node, state) {
callee: {
object: state,
property: 'bind'
},
arguments: [{type: 'ThisExpression'}]
};
let oldBody = state.body;
state.body = {
type: 'FunctionBody',
directives: [],
statements: [
{
expression: oldBody
}
]
}
}
return callExpression;
};
export default reducer;

import {parseScript} from 'shift-parser';
import reduce from 'shift-reducer';
import codegen from 'shift-codegen';
import transpiler from './transpiler';
let ast = parseScript(source);
var result = reduce(transpiler, ast);
var newSource = codegen(result);
console.log(newSource);

Analyze Transform
• Linting
• Complexity
• Auto Documentation
• Type Checking
• API Conformance
• Transpiling
• Code generation
• Preprocessing
• Refactoring
• Reformatting
What can you do with an AST?

"The worst mistake man ever
committed was treating
source code as text."
- John Stamos
Season 3, episode 20 of "Full House"

When have you ever typed this
function greet(target) {
}
without this?

Have you ever been concerned about this string?
function greet(target) {
}

JavaScript and the AST

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to JavaScript and the AST (20)

More from Jarrod Overson (19)

Recently uploaded (20)

JavaScript and the AST