Mental Model of JavaScript

I just finished the course Just JavaScript.

I learned several things and my mental model of JavaScript has been rebuilt.

I took notes and decided to write an article mixed with my notes, code and some diagrams.

Variables are wires that point to values in memory. Values are not wires and can not be used as variables.

let a = "Dog"

In the code example above, the variable a is a wire that points to the string Dog.

A diagram below to clarify:

The variable a points the value, the string Dog.

When assigning a variable to another one, you aren’t really assigning the variable itself. Rather, we first look up the value in memory and then assign it to that value. This is why variables who get assigned new values don’t affect variables who are assigned to them, because in the end, variables point to values. Variables never point to variables, they always point to values.

let a = "Dog"
let b = a

In the code example above, the variable (wire) a points to the string Dog in memory. The variable (wire) b looks up the value of the variable a, and then points to that value. Meaning, it is not bound to the value of variable a. If the variable a later points to a new value, it would not change where the variable b points to, which is the string Dog.

A diagram below to clarify:

Both the variables a and b points to the value, the string Dog

This is also the reason why we actually don’t pass variables into functions. We first look up the value the variable points to (is wired to), and that value gets passed into the function (gets used as the argument for the function).
The right side of an assignment is an expression.
Primitive values in JavaScript are immutable. A variable may be reassigned, but its existing value can not change (be mutated) like objects, arrays and functions. There are 7 primitive data types.
JavaScript is a garbage-collected language. We can create objects in memory, but not destroy them. The memory management of JavaScript is performed automatically and is something we don’t have control over as developers.
All primitive values already exist, when we assign a variable to a primitive value, we summon that value. Objects and functions, on the other hand, allow us to generate new values. This is an important point, because objects may look like other objects, functions may look like other functions, but in memory compared to primitive values, they are completely different values.

console.log(2 === 2) // true

console.log({} === {}) // false

In the code example above, 2 strict equals 2 is true, because they point to the same value in memory. Two objects aren't strictly equal to true, even if they look the same to 100%, because they don't point to the same value in memory. In memory, both objects are completely different values.

When we nest objects as properties of other objects, in reality, they don’t get nested. The object properties rather point to other objects in memory. This is why, when you mutate an object, the risk exists of other variables or properties pointing to it that could be mutated.

const adam = {
 family: {
  alice: {
   age: 2
  }
 }
}

In the code sample above, the nested object properties actually point to other objects, and objects are never really nested.

A diagram below to clarify:

Diagram with nested object properties.

As you can see, the properties and variables are in the end wires that point to values. You can't really nest objects nor point a variable to another variable, in the end, it is always a value.

Mental Model of JavaScript

Comments (2)

More from this blog

Become a cracked product engineer today

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

How to make your textures fast on the GPU

Command Palette

Comments (2)

More from this blog