When you write code, the computer doesn’t understand it the same way humans do. Instead, compilers or code analysis tools convert the source code into a tree-like data structure called an AST – Abstract Syntax Tree, which is then used for tasks like error checking, optimization, or compilation.

Note: AST exists in many programming languages, but I’ll use JavaScript as a specific example.

🌳 What is an Abstract Syntax Tree?

• An AST (Abstract Syntax Tree) is an abstract representation of source code in the form of a hierarchical tree structure. Each node in the tree represents a syntactic element of the program, such as:

  • Variables – Representing values or references.
  • Operators – Like +, -, *, /.
  • Functions – Logical units of computation.
  • Conditional statements – Like if.
  • Loops – Such as for, while.

• An AST omits syntactic details that are not logically important, such as:

  • Semicolons (;).
  • Parentheses or braces ((), {}).
  • Line breaks, indentation, formatting.

• The goal is to focus solely on the actual logic and structure of the code.

This is how a compiler “understands” your code.

Original source code (JavaScript):

const sum = a + b;

Corresponding AST:

{
  "type": "VariableDeclaration",
  "kind": "const",
  "declarations": [
    {
      "type": "VariableDeclarator",
      "id": { "type": "Identifier", "name": "sum" },
      "init": {
        "type": "BinaryExpression",
        "operator": "+",
        "left": { "type": "Identifier", "name": "a" },
        "right": { "type": "Identifier", "name": "b" }
      }
    }
  ]
}

Explanation:

• VariableDeclaration: Declares a variable.

• BinaryExpression: A mathematical expression (a + b).

• Identifier: The variables a, b, and sum.

🔧 What is AST used for?

• Syntax Parsing

  • Checks whether the code is syntactically correct.
  • Detects issues like missing parentheses, improperly nested functions, or invalid structures.

• Code Optimization

  • Removes unused variables (dead code).
  • Simplifies mathematical or logical expressions (e.g., a * 1 → a).

• Transpilation (Syntax Transformation)

  • Converts newer syntax into older syntax.
  • Example: Babel transforms ES6 into ES5 to support older browsers.

• Linting and Auto-fixing

  • Tools like ESLint and TSLint use AST to detect code style or logic violations.
  • Can automatically fix issues like converting var to let or removing unnecessary parentheses.

• Code Formatting

  • Tools like Prettier use AST to restructure code for consistent and readable formatting — without changing logic.

• Refactoring (Automated Code Restructuring)

  • Rename variables or functions without breaking references.
  • Add function parameters, move code across modules safely and correctly.

🚀 Real-world Tools That Use AST

🎯 Conclusion

• Understanding AST is simply about knowing how a computer "reads" and interprets your code.

• Once you grasp how AST works, it becomes much easier to visualize how compilers or linters process each line of code. From there, you can:

  • Build custom tools tailored to your project
  • Refactor code with confidence, without breaking logic
  • Optimize performance for large applications in a clear and controlled way

• Whether you're working on frontend, backend, or developer tooling, understanding how AST works will broaden your perspective and strengthen your foundational knowledge of how code is processed behind the scenes.

🔗 References:

• Abstract syntax tree - wiki

• Abstract syntax tree - medium

• What is an Abstract Syntax Tree? - nearform.com

😘 Thanks for reading!