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:

A blank UML sequence diagram

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, Jun 02 '11 at 16:07
Your example will alert '10' on each iteration. See http://stackoverflow.com/questions/5555464/javascript-closure-of-loop — lawnsea, Jun 02 '11 at 16:08
@lawnsea @Matt Ball - I used it for exactly that reason; because it's the classic example. — Richard JP Le Guen, Jun 02 '11 at 16:11
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, Jun 02 '11 at 16:18
@lawnsea - 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. — Richard JP Le Guen, Jun 02 '11 at 16:21
Bad example or not, what IMO is bad about it is that it does not match your diagram. You asked for how to display code in a diagram, and then they don’t match up at all … — Kissaki, Jun 11 '11 at 22:48
@Kissaki - A fair point, but seeing as the question is about how to match the diagram to the code, I don't think I can do much better than removing the labels from the diagram... do you think this is better? — Richard JP Le Guen, Jun 11 '11 at 23:20
Mh, you’re right. Well, I’m not sure anymore if it should be there. Or just a note that you’re looking for representing the code in a sequence diagram. — Kissaki, Jun 11 '11 at 23:26
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 http://www.websequencediagrams.com/ helpful. — Tyler, Jun 13 '11 at 19:17
@MatrixFrog - websequencediagrams.com looks awesome! Thanks. — Richard JP Le Guen, Jun 13 '11 at 20:59

score 7 · Accepted Answer · answered Jun 11 '11 at 22:44

7

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.

answered Jun 11 '11 at 22:44

Halcyon

57,230
10
89
128

1

Especially since the question asks for "clearly explain" this is the correct answer. You can not. Extending your UML diagrams with custom non-UML notation you could represent them. But not like that. – Kissaki Jun 11 '11 at 22:51
+1 - "No" is a fair answer... but any thoughts on conveying the interaction of those entities? Even in a non-UML format? – Richard JP Le Guen Jun 11 '11 at 23:15
Uuuh … For real? Mh. Ok, I got something. I’m gonna put it in an IMG and post it as another answer. – Kissaki Jun 11 '11 at 23:29
I think you totally missed my point. Closures and scopes are language constructs, not entities. You can not and should not model them in any way other than in your source code. – Halcyon Jun 11 '11 at 23:35
2

Scratch that. My example became too complicated, even in text. All my text gone to waste, I won’t post it. :-/ – Kissaki Jun 11 '11 at 23:42
@Frits van Campen - Ohhhh; 'entities' in the context of 'business entities' or 'domain model objects'. That makes a lot of sense. Thanks! – Richard JP Le Guen Jun 13 '11 at 14:37
Yes, well 'entity' is the govern principle of things like 'Object', but objects are only relevant in an OO approach. Entities can exist without it. I'm sorry the terminology was unclear ^^ – Halcyon Jun 15 '11 at 23:10

score 7 · Answer 2 · answered Jun 14 '11 at 16:25

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.

This looks interesting. I was hoping for something more sequence-y but this looks very promising. +1 — Richard JP Le Guen, Jun 14 '11 at 16:58

score 3 · Answer 3 · answered Jan 05 '17 at 17:20

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

lambmj · Answer 4 · 2014-09-17T00:54:44.847

0

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

JavaScript Closure UML

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:

enter image description here

edited Sep 17 '14 at 00:54

answered Sep 16 '14 at 20:31

lambmj

1,843
2
21
27

Closures do not have to be anonymous. Any function that returns an inner function (or object with a reference to an inner function) will create a closure – Drenai Jan 05 '17 at 17:02

score 0 · Answer 5 · answered Jun 14 '11 at 14:20

0

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

answered Jun 14 '11 at 14:20

Adrian

2,244
18
20

Diagrams for JavaScript functions

5 Answers5