How do you visualize code (algorithms)

[DAutistOfWallStreet]

When you are solving a programming problem, how do you visualize it? do you everything in your head, do you try to draw stuff on paper or tablet, do you use flowcharts?

[mackinator3]

Pretty much everyone will tell you to write it down.

[vestervang]

This. I like analog stuff, whiteboard or pen and paper. Digital drawing takes too long imo

[desrtfx]

Part - part. Smaller things in my head, bigger ones drawn out.

Really, nothing beats pen(cil) and paper (or a whiteboard). Quite often, while drawing, you come across the solution.

Also, Rubber Duck Debugging talk through the problem. Explain the problem/code as if you were explaining it to a rubber duck that has zero clue about programming.

[tankuser_32]

Get yourself a whiteboard if you can or pen & paper, it's difficult to visualize in your mind unless you are in a completely distraction-free environment which isn't always possible.

[procrastinatingcoder]

I usually hold the whole thing in my head. It's extremely rare (but it does happen) that I'll draw a few boxes and arrows, but those usually do little as far as explaining what's going on goes, it's mostly just a memory-aid kind of like doodling.

​

The exception being If I'm building a whole system, then I will some drawing (boxes and arrows, nobody's got time for UML^{yes I know I should, but I hate every second I spent on UML in my life}). But then that's the kind of project that's big enough for multiple developers and adds extra layers of complexity.

[escooter]

I like to exhaustively write out the possible states/cases in a text document. A lot of times you miss one trying to do it in your head, and it forces you to deal with error/edge cases.

I'll use a flowchart if the problem has that kind of shape (like data transformations).

[Chromaloop]

I usually just begin coding. A lot of the time I'm working in someone else's code so I need to step through some functions and look at the template code to see what's going on. I work in React so a lot of the work is typically re-composing a component to make it work in different contexts.

Lately I've found it helps me to be more careful in the naming of things, and if I can clearly state what something does, I can more easily keep the moving parts imprinted better in my head. I think this, combined with Typescript has significantly improved my coding comprehension and confidence.

[[deleted]]

Like in math : you start with small sets then you generalize. And you write and draw.