Understanding the Mental Model for JS.

When I initially started with learning JS. Like most of us even I had a hard time understanding the concepts of JS, ya even the basic ones. Even though I watched a lot of videos, read a lot, and kept practicing.

But what I recently found out was understanding things using mental models. Well, it is not just limited to JS you can apply mental models anywhere. By the end of this blog, I believe you will be able to apply mental models to various things and see the change.

What is Mental Model?
If you google it you will get something like this "A mental model is an explanation of someone's thought process about how something works in the real world." Let's keep this fancy thing aside and will try to understand in our way.

Read this code

let x = 5;
let y = x;
x = 0;

What do you think will be the value of x and y ????????

Go through each line understand what is happening over there. And check what is happening in your mind when you are reading it line by line.

Take your time, write it down for better understanding I'm not going anywhere until you do it. If you don't have a pen & paper nearby go here Drawing app and sketch whatever comes to your find. Trust me you will come to know the reason why I'm telling you to do this at the very end of this blog.

..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
..
Spoiler Alert

Well if you are using JS every day. I know you will be like "C'mon man. I write more complex code than this." And yes I agree with it but the point over here is understanding the mental model in JS and not how we assign a variable in JS.

• let x = 5

  x is a variable that is assigned to 5

• let y = x

  y is a variable that is assigned to x.
  Wait a minute.! x was assigned 5, so now y has a value of 5.

• x = 0

  x is now assigned with 0

Maybe you have read it a different way, eg "x is declared and set to 5", "x is assigned with 5" etc

The catch over here is what was the thought process happening when you were reading it. Let's understand it by going back and thinking about how you actually learned how to declare a variable and assign it. For me, it was taught using "boxes" most of us may have learned in the same manner taking a box putting a variable inside it, and assigning it to some value. Even though you may not think about boxes anymore but in your subconscious mind whenever you will see a variable you will imagine it as it's inside a box. This imagination you do inside your head is known as Mental Models .

Now how can this have any importance in my life? Well, this imagination which you do in your mind will decide how you read the code in your entire life. Therefore having a good mental model will decide how fast you identify the bugs in code, how fast you fix it, how fast it takes you to understand other people's code, and how you feel when you read the code.

(Well x = 0 and y = 5 is the correct answer)

I came across two examples of such mental model creation techniques.

• In the book "Eloquent JavaScript" the author suggested imagining the variables like an octopus's tentacles, rather than boxes to assign the value.

• Dan Abramov(one of the creators of React & my god) in his series elaborated a similar concept where variables were assigned by using "wires" instead of tentacles

Here is the gif from his Just JavaScript series which gives an illustration of his mental model of imagining the variables assigned using wires.

You are can come up with your mental model for assigning variables, consider a water pipe the way the water flows from left to right the variable gets assigned. There are no boundaries for Imagination. You can also follow an ancient Egyptian technique to remember where you imagine a big palace and then inside the palace, you assign each room according to your needs as I told you there are no boundaries for the imagination.

If you ask me I like to go with Dan's approach when it comes to assigning a variable imagining it has a thread or wire, but being an astrophile I like to create my own universe of JS where I keep things like prototypes, Immutable values out of our solar system. So that whenever I see them my mind gets aware of it.

Recap

I know this would be a little hard to digest initially but one's you get going with creating mental models for various aspects it would be a piece of cake. And more importantly, you would enjoy the process of adding new mental models to your own universe.

We learned what is exactly the mental model is and how can we use it to better understand JS concepts and what outcome it can give us.

Don't worry if you were not able to predict the x and y values. You have learned a lot from this blog than any other person.

Cheers,
Vishak Amin