astoptech

ast optimization techniques

How can you optimize an abstract syntax tree?

Abstract syntax tree is a tree-like structure that represents your program. The program is interpreted at some point, e.g. in your browser. Everything takes time, and the same applies to the interpretation. Some of the operations, e.g. adding numbers can be done at compile time, so that the interpreter has less work to do. Having less work to do means that your program will run faster.

What optimization techniques are available?

binaryExpressionReduction

const number = 2 + 2

In the example above we have added two numbers. We could optimize the code by:

const number = 4

The tree would be translated from:

{
  "type": "BinaryExpression",
  "left": { "type": "Literal", "value": 2 },
  "right": { "type": "Literal", "value": 2 }
}

to

{ "type": "Literal", "value": 4 }

Usage:

const { binaryExpressionReduction } = require('astoptech')

ifStatementRemoval

if (true) {
  console.log('foo')
} else {
  console.log('bar')
}

It seems that we'll only enter the true path. We can simplify the code to:

console.log('foo')

The tree would be translated from:

{
      "type": "IfStatement",
      "test": {
        "type": "Literal",
        "value": true
      },
      "consequent": {
        "type": "BlockStatement",
        "body": [
          {
            "type": "ExpressionStatement",
            "expression": {
              "type": "CallExpression",
              "callee": {
                "type": "MemberExpression",
                "object": {
                  "type": "Identifier",
                  "name": "console"
                },
                "property": {
                  "type": "Identifier",
                  "name": "log"
                },
                "computed": false
              },
              "arguments": [
                {
                  "type": "Literal",
                  "value": "foo"
                }
              ]
            }
          }
        ]
      },
      "alternate": {
        "type": "BlockStatement",
        "body": [
          {
            "type": "ExpressionStatement",
            "expression": {
              "type": "CallExpression",
              "callee": {
                "type": "MemberExpression",
                "object": {
                  "type": "Identifier",
                  "name": "console"
                },
                "property": {
                  "type": "Identifier",
                  "name": "log"
                },
                "computed": false
              },
              "arguments": [
                {
                  "type": "Literal",
                  "value": "bar"
                }
              ]
            }
          }
        ]
      }
    }

to:

{
        "type": "CallExpression",
        "callee": {
          "type": "MemberExpression",
          "object": {
            "type": "Identifier",
            "name": "console"
          },
          "property": {
            "type": "Identifier",
            "name": "log"
          },
          "computed": false
        },
        "arguments": [
          {
            "type": "Literal",
            "value": "foo"
          }
        ]
      }

Usage:

const { ifStatementRemoval } = require('astoptech')

negationOperatorRemoval

if (!(foo === bar)) {
  console.log('foo')
}

It seems that our negation operator could be a part of the condition inside the brackets.

if (foo !== bar)  {
  console.log('foo')
}

The tree would be translated from:

{
  "type": "UnaryExpression",
  "operator": "!",
  "prefix": true,
  "argument": {
    "type": "BinaryExpression",
    "left": {
      "type": "Identifier",
      "name": "foo"
    },
    "operator": "===",
    "right": {
      "type": "Identifier",
      "name": "bar"
    }
  }
}

to

{
  "type": "BinaryExpression",
  "left": {
    "type": "Identifier",
    "name": "foo"
  },
  "operator": "!==",
  "right": {
    "type": "Identifier",
    "name": "bar"
  }
}

logicalExpressionReduction

const foo = "bar" || "baz"

The first value is truthy so it's safe to simplify the code.

const foo = "bar"

The tree would be translated from:

{
  "type": "LogicalExpression",
  "left": {
    "type": "Literal",
    "value": "bar"
  },
  "operator": "||",
  "right": {
    "type": "Literal",
    "value": "baz"
  }
}

To:

{
  "type": "Literal",
  "value": "bar"
}

ternaryOperatorReduction

const foo = true ? "bar": "baz"

Given a known value of the conditional expression it's possible to get the right value immediately.

const foo = "bar"

The tree would be translated from:

{
  "type": "ConditionalExpression",
  "test": {
    "type": "Literal",
    "value": true
  },
  "consequent": {
    "type": "Literal",
    "value": "bar"
  },
  "alternate": {
    "type": "Literal",
    "value": "baz"
  }
}

To:

{
  "type": "Literal",
  "value": "bar"
}

typeofOperatorReduction

const foo = typeof "bar"

It's possible to determine the type of some variables during analysis.

const foo = "string"

The tree would be translated from:

{
  "type": "UnaryExpression",
  "operator": "typeof",
  "prefix": true,
  "argument": {
    "type": "Literal",
    "value": "foo"
  }
}

To:

{
  "type": "Literal",
  "value": "string"
}

memberExpressionReduction

const foo = ({ bar: "baz" }).bar

Given an inlined object expression it's possible to retrieve the value immediately.

const foo = "baz"

The tree would be translated from:

{
  "type": "MemberExpression",
  "object": {
    "type": "ObjectExpression",
    "properties": [
      {
        "type": "Property",
        "method": false,
        "shorthand": false,
        "computed": false,
        "key": {
          "type": "Identifier",
          "name": "bar"
        },
        "value": {
          "type": "Literal",
          "value": "baz"
        },
        "kind": "init"
      }
    ]
  },
  "property": {
    "type": "Identifier",
    "name": "baz"
  },
  "computed": false
}

To:

{
  "type": "Literal",
  "value": "baz"
}