
JS Visualizer – Visualize Context, Hoisting, Closures, and Scopes in JavaScript - 49531
https://javascriptvisualizer.com/
======
kowdermeister
I like [http://www.pythontutor.com](http://www.pythontutor.com) more, it
supports ES6, Java, Python, C, C++, Ruby.

It was a great complementary tool explaining some simple algo to students.

~~~
brian_herman__
Maybe I'll reskin pythontutor with like a javascript snippit to make it look
as good as this one :)

------
mgadams3
Reminds me a lot of Bret Victor’s “inventing on principle” talk and his
“learnable programming” essay. Great way to connect the creator with the
consequence of their action. I’m a visual learner myself (I know the science
of learning styles is bunk) and have found most to benefit from a similar way
to “seeing code”.

~~~
yesenadam
Thank you! I hadn't seen these before. Great stuff.

[http://worrydream.com/LearnableProgramming/](http://worrydream.com/LearnableProgramming/)

Inventing on principle:
[https://vimeo.com/36579366](https://vimeo.com/36579366)

~~~
pjmlp
Watch the future of computing from him as well.

It is set in the world of computing before UNIX was out of Bell Labs.

~~~
yesenadam
Thanks. I will be watching all his stuff. I hadn't watched _Inventing on
principle_ when I commented before...I came back to say - I think it's the
best tech-related talk I've ever seen. Well, so much wider than just computers
or programming--although mainly about that on one level--but it's about one's
life, purpose, meaning in life etc. The first computery talk I've seen that
seemed _wise_ , strikingly so, not just smart, clever, cool, brilliant,
innovative etc. Thank you HN!

------
int3
I made something like this many years back:
[http://int3.github.io/metajs/](http://int3.github.io/metajs/)

------
aenigmaclamo
I thought this would be really neat to display some simple recursion. But it
seems like it's completely broken for that:
[https://javascriptvisualizer.com/?code=function%20f%28n%29%2...](https://javascriptvisualizer.com/?code=function%20f%28n%29%20%7B%0A%20%20return%20n%20%3E%200%20%3F%20f%28n%20-%201%29%20%3A%200%3B%0A%7D%0A%0Af%281%29%3B%0A%20%20)

Seems like someone's already reported the issue, though.

------
charrrzard
looks awesome. why only es5 support?

~~~
zawerf
ES5 has a lot of interesting hoisting bugs.

For example this doesn't print what you expect:

    
    
      for (var i = 0; i < 3; i++) {
        var text = 'number ' + i;
        setTimeout(function() {
          console.log(text);
        }, i * 1000);
      }
    

But flipping var to let will fix it. The bug is that var is not block-scoped
so everything refers to the same `text` variable which gets mutated by the
next iteration.

I was hoping their demo would be good for explaining this bug but it seems to
be broken.

~~~
jazzyjackson
This is not a bug, this is spec.

variables in javascript are not block scoped, but functionally scoped.

the let keyword introduces block scope to javascript.

