Check out a free preview of the full JavaScript Performance course

The "ASTs and Initial Execution" Lesson is part of the full, JavaScript Performance course featured in this preview video. Here's what you'd learn in this lesson:

Once the code has been parsed, an abstract syntax tree is created. The AST is a representation of our code that can be turned into byte code by the baseline compiler.

Preview
Close

Transcript from the "ASTs and Initial Execution" Lesson

[00:00:00]
>> Steve Kinney: So our code is parsed, awesome, we've done it together, we've parsed the code. Then what? You just turn it into an abstract syntax tree, I'm gonna show you a quote from Wikipedia, even though I understand that that is like a trope of people making presentations just like quote Wikipedia, but this one is amazing and I thought we should all share it.

[00:00:22]
This is Wikipedia's definition of an abstract syntax tree. In computer science, an abstract syntax tree, AST, is a tree representation of the abstract syntactic structure of source code written in a programming language. Are we all clear on what AST is now? Affectively what it is, is like we took the string of text, we made a data structure that basically shows the structure of the actual code as it's gonna be executed.

[00:00:48]
So this is what an AST for an add function would be. In a simpler programming language, you'd actually only see the blue and green parts, right. Cuz you've got a function, it has a return statement, that's the first word that you saw there. Then it parses the rest of that line, it sees two identifiers, it sees the addition symbol.

[00:01:05]
So we know we're gonna add x and y, and then the interpreter can go ahead and start doing all of that. The other yellow orange part over here, is JavaScript is hard. And there's things like variable hoisting and a whole bunch of other stuff that the interpreter needs to be aware of.

[00:01:20]
So that it also keeps track of the params and the x and y in the function body, point to those params, and a whole bunch of stuff that if you ever read the JavaScript spec, and wake up afterwards, it's documented in there, don't worry about it. If you ever do choose to read the JavaScript spec, the first part is incredibly interesting and easy to read.

[00:01:40]
But then it's all browser implementation and all the rules and stuff along those lines. But I don't wanna dissuade you from reading it, cuz the first part is actually incredibly well-written.
>> Steve Kinney: So we have the AST, we have everything we need to make byte code. Great, right, let's pass it to ignition, let's do the thing.

[00:01:55]
Baseline compiler takes that AST, translates it, it's this part right here. Ideally, right, the story ends, and we can't optimize it. It goes to byte code, it runs

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now