Demystifying ASTs
Check Reference
ASTs are ubiquitous part of the JavaScript land. ASTs are used to represent the hierarchical structure of code. Representing code in a form that is a data structure gives us a way to hack around the code programatically. This in turns allows us to powerful things like performing static analysis on the source code, applying transformation to code for example removing development environment artefacts like console.log
expressions.
The AST structure of JavaScript is standardised by a number of specifications, ESTree is the most popular specification of them all used by modern toolings like Babel and SWC, we will explore the ESTree spec and how it defines the AST structure of JavaScript.
ASTs are crucial for features like real-time error detection in code editors along with other Language Server Protocol (LSP) capabilities like intelligent code auto-completion etc.
JavaScript tools like Babel and SWC utilize ASTs to transform code from one form into another. This includes transforming modern ECMAScript syntax into old ECMAScript syntax to maintain compatibility, transforming JSX into valid JavaScript code that can be executed by a JavaScript engine in the browser or server.
ASTs are an often neglected but very important part of the JavaScript ecosystem.