Is there any IDE that allows you to augment your code with the form of your data in real time?

form_of_data_construct.md

Here's a crazy idea. Take the following simple example (in javascript):

    var m = [[1], [2], [3]];
    // ... a lot of code in between, perhaps m was passed through
    // several functions without TypeScript type declarations, so you might mistakenly
    // think m is a simple array like [1, 2, 3] at this point...
    var m2 = [];
    m.forEach(x => {
      m2.push(x);           //# [[number], [number], ...] will be the form of m2 here
    });
    
    console.log(m2);

You might think that m2 will have the form [number, number, ...] after the forEach loop. But it won't, as the special //# comment above would have made you aware of. The above is a trivial example, but it is made to illustrate a larger point.

A cause of many bugs is that you don't actually see the data while coding. So you might think you're doing something, while you're in fact doing something else. Ideally, you'd like to see the data at every step in your code, in real time, while coding (something like Bret Victor has imagined: http://worrydream.com/LearnableProgramming/). However, the problem is that any such showing of the actual data, amounts to a full execution of the code. But maybe we don't need to see the actual data, but merely the form of it? Could that solve a part of the problem?

What if your IDE could provide you with hints of the form of your data, by showing what's exemplified in the comment in the above example, when you are writing code (not when debugging*)? It should be possible in theory, by static code analysis, without having to execute the entire code to do it (I think). If the type info isn't possible to infer - maybe because of receiving data from external API calls - then it could show this instead: //# [[something, [something] ...] will be the form of m2 here Which would also be valuable to see while coding, since it still reveals the form of the data construct you are operating on.

'* - I know you can always run debugging, but that's not what I'm talking about. This is about having the IDE augment the code automatically. Not necessarily by injecting comments like the //# above, although that would be one rudimentary way. Another way would be to float the information above the code.

So, one obvious answer would be to provide type declarations in e.g. TypeScript.

But what I truly want is to see a real example case, flowing through my code, while I am reading the code.
Not merely inspecting the type definition when I am writing new code. (Which also would force everyone to provide type declarations, which is an extra burden.)

Example data is something we all already add manually (in // comments), when explaining code to someone else in e.g. a presentation: https://youtu.be/Wo0qiGPSV-s?list=PL37ZVnwpeshFmAPr65sU2O5WMs7_CGjs_&t=1378
Example (notice how you can view the data in the comments, and how that helps to get a feel for the data):

var Imjs = require("immutable");
var a = Imjs.List.of(1,2);                  // [1, 2]
var a2 = a.push(3);                         // [1, 2, 3]
a.size;                                     // 2
a2.get(2);                                  // 3

Why not allow developers to see such examples, in real time, when coding?
Without having to litter the actual code with comments, it could be an overlay in the IDE. So that you could turn it off when you don't need to see into the data.

Another indicator is that a lot of people are inserting console.log at various points in the code just to view their data when debugging.
The feedback should be imminent, and not depending on actually changing the code itself. One should not have to go into debugging to view the data structures one is operating on. It doesn't have to be all data, it could just be an example case, which flows through your code, and is automatically and reactively updated whenever you change the code. (This could even pave a way for new forms of testing code, if such example flows could be recorded. You just go back to the top of the code, change the example input, and see how the data structure flows through your code.) You don't even need to show all the data, just some of it, and its structure. Enough to quickly and intuitively give the developer a feel for what the code is operating on.

YES! It exists!! https://quokkajs.com

O M G. This is from the same guys, but will show test results inline! https://wallabyjs.com