JS Visualizer – Visualize Context, Hoisting, Closures, and Scopes in JavaScript | Hacker News Reader

JS Visualizer – Visualize Context, Hoisting, Closures, and Scopes in JavaScript

javascriptvisualizer.com

160 points4953112 comments

I like 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.

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

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”.

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

http://worrydream.com/LearnableProgramming/

Inventing on principle: https://vimeo.com/36579366

Watch the future of computing from him as well.

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

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!

I made something like this many years back: http://int3.github.io/metajs/

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...

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

looks awesome. why only es5 support?

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.

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.

Probably because ES6 syntax adds a lot more possible complications to the syntax tree.

Reply on news.ycombinator.com