Diagrams for JavaScript functions

Question

What tools can be used to convey concepts like JavaScript variable scoping and closures clearly in something similar to UML sequence diagrams? For example, how can code like the following: (the Infamous Loop Problem)

var arr = [];
for(var i=0; i<10; i++) {
    arr.push(function() { alert(i); });
}
for(var j=arr.length;j--;) {
    arr[j]();
}

... be clearly explained in a diagram similar to this one:

Answer 1

The code is an arbitrary example. The code has nothing to do with the question, merely demonstrates often misleading code which could benefit from being described.

You can not describe closures and scoping in UML. There is simply no support for it, not in sequence diagrams anyway. Closures in JavaScript is a bit like defining a class in Java or C#, you don't put that in your UML. Hmm, I can't explain this very well ..

Closures is something you have to inherently understand as a JavaScript programmer.

What your UML should be focusing on are the entities and their interaction. Not some language 'quirk' (if you will) like the need for closures.

I am all for describing misleading code, but a UML diagram is not the place for it. Put it in the comments in the source code. If anyone wants to know how this function works he'll look at the source code. If he doesn't want to know, don't bother him with it.

Answer 2

I like the diagrams Dmitry Soshnikov used in JavaScript. The Core to explain execution context and scope chains. In the comments, he says they were done in Visio (not that the tool is the important thing here, it's the concepts the structures help get across).

I can see how similar diagrams could be used to demonstrate how every function created in your example code ends up accessing an i variable in the same scope, and how in a fixed version of the code, each function would be carrying around another item at the head of its scope chain, with a variable holding the current value of i at the time the containing scope was closed over.

Answer 3

I know this is already answered, but here is a good example of using object diagrams to explain functions, closures, objects in JavaScript

https://howtonode.org/object-graphs

The graphs are built with text files (in DOT notation) and are then auto-generated using GraphViz

The author, Tim Caswell, has included links to the source files on his GitHub account