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:

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:

• javascript
• uml
• closures
• sequence-diagram
• diagrams

• 5 That code does not do what you think it does. Every alert will alert the last value of i. It's the classic function-in-a-loop problem. – Matt Ball Commented Jun 2, 2011 at 16:07
• Your example will alert '10' on each iteration. See stackoverflow.com/questions/5555464/javascript-closure-of-loop – lawnsea Commented Jun 2, 2011 at 16:08
• 3 @lawnsea @Matt Ball - I used it for exactly that reason; because it's the classic example. – Richard JP Le Guen Commented Jun 2, 2011 at 16:11
• 2 I'm not sure I understand. You're asking how to use UML to describe incorrect code? It's not a classic example, it's a classic blunder -like starting a land war in Asia. – lawnsea Commented Jun 2, 2011 at 16:18
• 2 Others have said that there is no UML system for representing closures / variable scope / etc. Assuming that they're right, you may want to rephrase your question to ask for "some kind of graphic depiction" or something. That said, you may find websequencediagrams.com helpful. – Tyler Commented Jun 13, 2011 at 19:17

5 Answers 5

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.

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.

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

There's this commercial product :

http://www.aivosto.com/visustin.html

It generates flow charts (which I've seen) and UML activity diagrams (which I've not - I've only used a much older version).

JavaScript closures are anonymous objects. Representing them in sequence diagrams is tricky but I believe it can be done like this:

In this case the main scope creates closures in a loop and later invokes them. The closure is anonymous and is of the general class 'Closure'.

In other cases, the closure could be created, named, passed to another object and then invoked from that object: