4 ms·

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

160 points by 49531 8y ago

charrrzard 8y ago
looks awesome. why only es5 support?
- acemarke 8y ago
  Probably because ES6 syntax adds a lot more possible complications to the syntax tree.
- zawerf 8y ago
  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 8y ago
    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.
mgadams3 8y ago
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 8y ago
  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 8y ago
    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 8y ago
      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!
kowdermeister 8y ago
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__ 8y ago
  Maybe I'll reskin pythontutor with like a javascript snippit to make it look as good as this one :)
i88y6 8y ago
Putting lipstick on a pig
aenigmaclamo 8y ago
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%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 https://javascriptvisualizer.com/?code=function%20f%28n%29%2... Seems like someone's already reported the issue, though.
int3 8y ago
I made something like this many years back: http://int3.github.io/metajs/ http://int3.github.io/metajs/

160 points by 49531 8y ago

charrrzard 8y ago

looks awesome. why only es5 support?

acemarke 8y ago
Probably because ES6 syntax adds a lot more possible complications to the syntax tree.
zawerf 8y ago
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 8y ago
  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.

mgadams3 8y ago

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 8y ago
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 8y ago
  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 8y ago
    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!

kowdermeister 8y ago

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__ 8y ago
Maybe I'll reskin pythontutor with like a javascript snippit to make it look as good as this one :)

i88y6 8y ago

Putting lipstick on a pig

aenigmaclamo 8y ago

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%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 https://javascriptvisualizer.com/?code=function%20f%28n%29%2... Seems like someone's already reported the issue, though.

int3 8y ago

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