Charts for JavaScript Functions

Question

What tools can be used to convey concepts, such as scaling and closing JavaScript variables, in something similar to UML sequence diagrams? For example, how the code might look like this: ( unfading loop problem )

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

... clearly explained in a diagram like this:

Answer 1

The code is an arbitrary example. The code has nothing to do with the question, it simply demonstrates the often misleading code that may be useful for description.

You cannot describe closure and scope in UML. There is no support for this, not sequence diagrams. Closing in JavaScript is a bit like defining a class in Java or C #, you don't put it in your UML. Hmm, I can’t explain it very well.

Closing is something you should understand in essence as a JavaScript programmer.

You should focus on your UML - entities and their interactions. Not some quirk language (if you like), like the need for closure.

I'm all for describing misleading code, but the UML diagram is not the place for it. Put it in the comments in the source code. If someone wants to know how this function works, he will look at the source code. If he does not want to know, do not disturb him.

Answer 2

I like the diagrams that Dmitry Soshnikov used in JavaScript. Core to explain the execution context and chaining areas. In the comments, he says that they were made in Visio (and not that the tool is more important here, it's the concepts that the structures help).

I see how similar diagrams can be used to demonstrate how each function created in your code example accesses the variable i in the same scope and how in a fixed version of the code each function will wrap around another element in the header of its scope chain visibility with a variable holding the current value of i at the time the content area is closed.

Answer 3

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

https://howtonode.org/object-graphs

Graphs are built with text files (in DOT notation) and then automatically generated using GraphViz

Author, Tim Caswell, has included links to source files in his GitHub account

Answer 4

Here is this commercial product:

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

It generates action diagrams (which I saw) and UML activity diagrams (which I did not use - I used only the older version).

Answer 5

Closing JavaScript anonymous objects . Representing them in sequence diagrams is difficult, but I believe that this can be done as follows:

In this case, the main area creates closures in the loop and later calls them. Closing is anonymous and belongs to the general class "Closing".

In other cases, a closure can be created, named, transferred to another object, and then called from this object: