4 ms·

Step-by-step JavaScript interpreter, written in JavaScript

55 points by bcjordan 12y ago

hexasquid 12y ago
This is terrific. I'd love a description of what the interpreter is actually doing at each step, perhaps optionally sent to the console. This could be a wonderful tool for teaching how JavaScript works.
foogered 12y ago
Cool project, but the title initially lead me to believe this was a tutorial on building a JavaScript interpreter. :(
- rubyn00bie 12y ago
  There's on in the project on github that looks like it's originally from Google. You can probably find docs specifically on it (and it looks like the source is well documented).
rubyn00bie 12y ago
I think itd be cool to see the tokenization happen as you step through it. The highlighting is a great step in helping understand the process.
peetle 12y ago
Wait a minute, how does this interpreter allow multi-threaded execution without web workers?
- icebraining 12y ago
  Thread switching? Multi-threaded just means it allows concurrent threads; they're not necessarily parallel: https://talks.golang.org/2012/waza.slide https://talks.golang.org/2012/waza.slide
- jaz303 12y ago
  It uses a small-step interpreter [1]. Rather than capturing the interpreter's state on the native call stack, small-step interpreters explicitly model said state using stacks of objects - one per active AST node - and environments. Because they're no longer bound to the stack of the implementation language, execution may be cycled, paused and resumed at will. [1] http://matt.might.net/articles/writing-an-interpreter-substitution-denotational-big-step-small-step/ http://matt.might.net/articles/writing-an-interpreter-substi...
yonran 12y ago
We finally have a substitute for eval within Chrome extensions! Also could be useful for experiments e.g. simulating synchronous APIs.
amasad 12y ago
This is great. I also implemented a JS stepping interpreter in JS [1] but using a different approach. I let the host JS environment do parsing and evaluation. I just use generators to pause executions and then pass the code through a ES6 generator transpiler[2]. See the demo[3]. [1] http://amasad.me/2014/01/06/building-an-in-browser-javascript-vm-and-debugger-using-generators/ http://amasad.me/2014/01/06/building-an-in-browser-javascrip... [2] https://github.com/facebook/regenerator https://github.com/facebook/regenerator [3] http://debugjs.com/#example http://debugjs.com/#example
int3 12y ago
Nice! I did something similar a while back: http://int3.github.io/metajs/ http://int3.github.io/metajs/
omphalos 12y ago
There are a number of JS-in-JS stepping interpreters posted in this thread, one of which I've worked on :) For people who like this sort of thing, I think tailspin [1] is a particularly interesting example, since it supports reversible execution as well. [1] https://github.com/wthimbleby/tailspin https://github.com/wthimbleby/tailspin

55 points by bcjordan 12y ago

This is terrific. I'd love a description of what the interpreter is actually doing at each step, perhaps optionally sent to the console. This could be a wonderful tool for teaching how JavaScript works.

foogered 12y ago

Cool project, but the title initially lead me to believe this was a tutorial on building a JavaScript interpreter. :(

rubyn00bie 12y ago
There's on in the project on github that looks like it's originally from Google. You can probably find docs specifically on it (and it looks like the source is well documented).

rubyn00bie 12y ago

I think itd be cool to see the tokenization happen as you step through it. The highlighting is a great step in helping understand the process.

peetle 12y ago

Wait a minute, how does this interpreter allow multi-threaded execution without web workers?

icebraining 12y ago
Thread switching? Multi-threaded just means it allows concurrent threads; they're not necessarily parallel: https://talks.golang.org/2012/waza.slide https://talks.golang.org/2012/waza.slide
jaz303 12y ago
It uses a small-step interpreter [1]. Rather than capturing the interpreter's state on the native call stack, small-step interpreters explicitly model said state using stacks of objects - one per active AST node - and environments. Because they're no longer bound to the stack of the implementation language, execution may be cycled, paused and resumed at will. [1] http://matt.might.net/articles/writing-an-interpreter-substitution-denotational-big-step-small-step/ http://matt.might.net/articles/writing-an-interpreter-substi...

yonran 12y ago

We finally have a substitute for eval within Chrome extensions! Also could be useful for experiments e.g. simulating synchronous APIs.

amasad 12y ago

This is great. I also implemented a JS stepping interpreter in JS [1] but using a different approach. I let the host JS environment do parsing and evaluation. I just use generators to pause executions and then pass the code through a ES6 generator transpiler[2]. See the demo[3]. [1] http://amasad.me/2014/01/06/building-an-in-browser-javascript-vm-and-debugger-using-generators/ http://amasad.me/2014/01/06/building-an-in-browser-javascrip... [2] https://github.com/facebook/regenerator https://github.com/facebook/regenerator [3] http://debugjs.com/#example http://debugjs.com/#example

int3 12y ago

Nice! I did something similar a while back: http://int3.github.io/metajs/ http://int3.github.io/metajs/

omphalos 12y ago

There are a number of JS-in-JS stepping interpreters posted in this thread, one of which I've worked on :) For people who like this sort of thing, I think tailspin [1] is a particularly interesting example, since it supports reversible execution as well. [1] https://github.com/wthimbleby/tailspin https://github.com/wthimbleby/tailspin