Mental models for JS

Hi, everyone!

This is a collaboration request.

Like many of you here I am a total newbie trying to teach myself some JS. It’s been only 2 months now.
And like many of you here, I find it hard to grasp some concepts (even the most basic ones) just by crunching texts, videos or even practice (exercises).

What I’ve recently found useful for really understanding stuff is building “mental models”. By building mental models I mean building a comprehensible story around a dry coding concept, relying heavily on visual associations which appear in our brains while we try to make our way through JS concepts.

As two examples of such mental models:

  1. “Eloquent JavaScript” book suggests to imagine variables more like an octopus’s tentacles, rather than boxes where you put a value (by the way, the Box itself is a mental model too and a very well-known one).

  2. Dan Abramov in his “Just Javascript” series elaborated on a similar concept of variables by using “wires” instead of tentacles.
    This GIF is an example of variables mental model illustration from “Just Javascript” by Dan Abramov & Maggie Appleton (link below):

As for me, I accidentally had a primitive idea while trying to understand JS functional programming basics (especially the Promises part). I imagined code written in functional style as a water pipe system, where you put some values in the first pipe (first function) and then it flows consequently through all the pipes and side-branches of pipes. Inside this mental model, a Promise is some kind of a clever pipe tee - directing the flow differently, depending of what’s flowing.

I’ve failed to develop this pipe model any further, so if you could help me on that - that could be very helpful for me and other beginner campers here.

Putting variable concept and all this plumbing stuff aside - I am pretty sure, you guys have discovered a lot of unique and unobvious visual images of JS concepts for yourselves.

What I am trying to suggest here - I invite you to share and discuss our own private mental models here. I am absolutely convinced that as we all come from different cultures and backgrounds - there are some really sick and undiscovered ways to make learning JS more explicit and visual.

Maybe we can even collect the best (~most efficient) models and compose our common visualisation of basic JS as some super post on Medium for instance.
If you have already met any kind of such a super posts - please share links.

Thank you for your attention.

Here is the link to Dan Abramov’s “Just Javascript”, where I’ve taken this GIF from

2 Likes

Sometimes I tend to thing of functions exactly as mathematical functions, it helps me to determine exactly what arguments do I need and so on. And even composition of functions like g(f(x)) and things of the sort.

Sometimes I just remember very basic examples and use them to guide my reasoning. It could be a simple constructor, or how to iterate over ‘iterable’ data types.

Hi @_ing,
I think that python tutor is useful to get a more “visual” representation/aproximation of JS:

http://pythontutor.com/

Putting variable concept and all this plumbing stuff aside - I am pretty sure, you guys have discovered a lot of unique and unobvious visual images of JS concepts for yourselves.

I am currently using the model that a program is a directed graph (I remember reading this somewhere but I can find the reference). The good part is that make everything more explicit, and the bad part is that make everthing more explicit.

I am writing a tool that enable to write the graph like a table (because I find tables easier to read). something like this (syntax highlight for Emacs only):

And in parallel generate an image:

The best part is that the tool that I am writing is an “executable” graph: produce an xstate config object, the image is generated using “state machine cat”.

Fortunately there is plenty of info about state machine and graphs, so I am currently reading about it.

Cheers and happy coding :slight_smile:

1 Like