A Visualisation of a Javascript Program

Human beings love a good story. We were born for them! Since the dawn of time, great storytellers would capture our imagination and help us suspend reality. Every good story begins with one thing: the setting! 🗺️

Learning Javascript is no different. What’s the point of studying all the steps to building a sophisticated application, when you don’t understand the environment it needs to survive?

That environment can live in our imagination, as a representation of the mechanics that drive our javascript programs.

Since we’re world-building just like those great storytellers, we first need to iron out the smallest and yet most fundamental parts of our universe. Can you guess what that is?

Values.

Without them, there is no React JS, no ES6, no programs at all. Our javascript world would be an endless ocean, with no life or direction - utterly pointless.

And yet, they’re so misunderstood. Take this example:

let myString = 'hello World';
myString[0].toUpperCase();
console.log(myString === 'Hello World')

Can you guess the answer? In 3 lines we can reveal so much about the nature of a simple string value.

If you google it, you get a very boring definition along the lines of:

“Values are data which take up memory”.

So let’s use that to populate our world. If the program is the ocean, values can be represented as islands. “Hello World” is a single, grassy island where it’s always raining “ “ 🌧️. Miserable place to visit.

Every single string value you can think of is its own rainy island in our model.

Without a location, values are lost at sea

The thing about islands, is you can find them on a map:

We use coordinates to locate them
They take up space

Simply put, without a location - a set of coordinates 📍- we would not be able to use values at all. Notice how simply picturing values as islands conveys so much meaning already.

Primitives & Primates

Now, there are different kinds of value islands. There isn't just a single type of island that appears in the GS. We are going to start with the NATURAL ones - the islands that follow the laws of Nature - just like in our own world.

These 'Natural' islands are called 'primitive values'.

Have you seen David Attenborough's latest nature documentary?? It's called 'Primitives'!

Or maybe it was 'Primates'...🐒 No matter, we're going to add another abstract layer to our model by imagining the primitive values as the naturally occurring islands - here are a few:

Here are a few of them represented:

UNDEFINED - The landscape of these islands have no definition. It's a messy, lavary, volcanic surface.

NUMBER - You get a Numb Bum if you sit there.

NULL - Nothing but sand over there. It's empty!

BOOLEAN - this island is either on fire (true) or not on fire (false).

The key thing about Primitive Values is: there can only be one of them in The Great Sync.

Just like in our world we can't *naturally have two human clones, or 2 identical plants, we also can't have 2 primitive value types that are the same.

It also goes against the laws of nature to try change nature to be something else.

Why is this important? If you have watched X-Men, Mutant Ninja Turtles, or youtube videos about glow in the dark dogs, you will know all about genetic mutation.

When it comes to primitives, you cannot mutate them. You cannot try magically transform one island into another. DON’T MESS WITH NATURE.

Back to our example:

The answer is nothing changes. The value ‘hello World’ stays the same.

The line myString[0].toUpperCase() makes you think you are mutating it. It makes you think you are changing the string so the first character is capitalised.

But actually, all you are doing is creating a brand new string value “H" - a new rainy island is put into your program.

The Unnatural Ones

So far we have discussed primate values, Sorry! Primitive. Primitive values found in nature, just like primates :)

But what about those other ones… Objects, Arrays and Functions? I call these the ‘unnatural ones’ - or the ones that have to be constructed with hammers and nails.

These values are treated very differently by the Javascript engine. And for that reason we simply cannot imagine them as islands.

Instead we’re going to picture an object as a flying ship. Let me explain why.

Objects are constructed

Yep, unlike primitive values - we make objects! Yes, we don’t make all the objects ourselves - things like the Global Object are made for us. But still, we are able to build objects - we construct our own ships!

// Creating objects
const ob1 = {} // object literal syntax
const ob2 = new Object() // using a constructor function

Objects store pointers

The rough definition of an object is a collection of key-value pairs. This leads to one of the BIGGEST misconceptions about objects : we put values inside objects. This is simply not true. Let’s use our mental model to prove it.

Take this object:

const book = { 
  wordCount: 3000,
  title: 'Visual Learning'
}

The number 3000 is an ice island. If objects stored values, you’re telling me you going to fit that entire island into your ship’s storage? And the string island for 'Visual Learning'? Get outta here. Impossible!

Instead, objects store ‘pointers’. We call them ‘keys’. In our model, these are the crew members in the ship, who POINT their light down on specific value islands. You’re going to see that ‘Pointing’ will be a common mnemonic device we’re going to use throughout The Great Sync.

Objects Live In a Different Universe

Okay before you start thinking I’ve been watching too much Dr Strange, objects are, in fact, kept completely separate to primitives in the program’s memory. Two separate data structures are used.

Primitives are all kept in what is called a stack.

Objects, on the other hand, are kept in a heap structure. Here, the rules are different. For one thing, unlike primitives where there can only ever be one ‘Hello World’ string in the entire program, in the heap you can multiple versions of the identical object structure.

I call this realm where objects, functions and arrays live The Heap Multiverse. It’s completely separate and invisible to primitive values, and yet it exists in parallel. More on this when we discuss locating values and object references.

The two memory storage places visualised: the heap and the stack.

Putting it all together - our visualisation of a javascript program

Now we know what all the different values are in our javascript program. We can visualise them in our code - a great moving ocean - which has a flow! Code flows. We can direct it, we can get it to carry different values - but it always runs.

Where does it run into ? Ultimately, it all disappears into a giant sink hole. Javascript runs sinkchronously…I mean synchronous. If there is no other environment and no functions are being executed, it will always run downwards into the giant sink hole, until the flow ends and our program terminates.

Welcome to The Great Sync 🔥🔥🔥