How I Think About JavaScript Types (A Mental Model for Beginners)

Recently, I've had several friends who are aspiring to become professional JavaScript developers, resulting in a steady supply of questions. The whole experience has had me thinking about how I can break the curse of knowledge and explain software development (JavaScript in particular) concepts in a way that amuses and sticks with early learners. In an effort to record my experience, I will begin to capture my mental model for comprehending JavaScript types.

Variables

Logically, to understand types one must first understand variables.

In the realm of science, a variable is something that can change in an experiment that needs to be changed, controlled, or observed depending on the goal of the experiment. To put it in simpler terms, it is something that can change that plays a factor in the outcome of an experiment. For example, if you conducted an experiment to determine the optimal amount of water for a plant's growth, the water would be a changeable factor that would impact the outcome of the experiment.

In the realm of computer science, your code is effectively an experiment. Writing code is nothing else but experimenting with various instructions for a computer to reach the desired outcome. In a coding "experiment," there are also factors that can change that impact the outcome of the experiment. That is, there are variables in a coding experiment. As computer science is a narrower discipline of science, and a coding experiment is a narrower kind of experiment, the variables in a coding experiment are more narrow/specific. In code, a variable represents data that plays a factor in the outcome of your code, the outcome of your instructions.

In a word, variables represent/store data in a computer application.

Data

This begs a question. What is data?

In code, data is simply information that can be interpreted by a programming language.

Just as a human language is a method of communication accompanied by peculiar rules and styles, a programming language is a method of communicating with a computer to write instructions to achieve a desired outcome. And there are various human languages that are all means to the same end, communication, there are various programming languages which are all means to creating a computer application. Each language may have similarities and differences in the computer world as much as the human world.

Each programming language is effectively an intermediate layer between the coder and the computer. The programming language has certain rules for how you communicate with the computer to write instructions. The programming language, therefore, interprets your code and knows what to do with it. It's an attempt at making things easier than the nitty-gritty of having to talk directly to the computer yourself. Think of it as a translator that offers a language that you can speak to them in, interprets your words, and speaks to the computer in its unique, complicated language.

So, each programming language has different rules for how to "speak the language" with code. Now, I won't dive into the entirety of how to speak this language. We're just interested in the rules of JavaScript, a programming language, to interpret different types of information.

What are the different types of information, or data, that JavaScript knows to interpret?

Data Types

Basic Types

Well, there are 5 basic data (information) types that you will ordinarily come across:

String

Boolean

Number

Undefined

Null

Let's break down each one.

A string is for storing text information. A use of strings is displaying text to a user.

var string = "I am text information that is being represented."

A boolean is for storing whether something is true or false. It's like a coin. It's either heads, or it's tails. It's either true, or it's false. A use of booleans is for handling conditional logic in your instructions (i.e. if this is true —> do that).

var boolean = true;
var boolean = false;

A number is for storing numerical information. A number can be a whole number (integer) or a number with a decimal place (float or floating-point number). A use of numbers is doing math in your code.

var number = 15;
var number = 1.5;

Undefined is the default type when the programming language receives a variable that was never assigned a value.

var variableThatWasNeverAssignedAValue; // --> undefined

Null is also used to signify that a variable has no value (is not defined). However, this type is used when a coder, not the programming language, wants to mark a variable as having no value. In other words, it is used when a coder wants to intentionally mark a variable as having no value. Technically, a variable of type null is assigned as it has been assigned a value of null. This is useful because if a coder inspects a variable and sees that it is undefined, they will know there must be a mistake in their code. If the coder instead saw that it is null, then they will know that the variable having no value was intentional. This can help find mistakes in your coded instructions.

var variableThatIsIntentionallyAssignedNoValue = null;

Structural Types

In addition to the basic types, there are structural types that you will ordinarily come across:

Array

Object

Both arrays and objects are called structural types because they structure data, multiple types of data.

Arrays store data in a sequence. Think of it like a line, or array, of Roman soldiers lined up in a sequence.

Instead of soldiers, the data in the sequence of an array are called elements.

An element can be any type, including the basic types we just discussed and the structural types.

var array = [1, 2, 3];
var array = [1, 'some string', false];
var array = [[1, 2, 3], [4, 5, 6];

Arrays are helpful for grouping variables together, establishing an association. Arrays are also iterable. Meaning, you can write instructions to "loop" through an array, accessing each element, and then doing something with that element. Think of a commander going through the line of Roman soldiers one-by-one and doing something (like checking the soldier's helmet). Each programming language, including JavaScript, have built in ways that you can "iterate," or "loop" through an array, have access to an element, and do something with that element.

var array = [1, 2, 3];

array.forEach(...);

Objects are used to associate data, or a value, with a key.

var obj = {
  someKey: 123,
  anotherKey: 456,
};

Objects also group variables together establishing an association. This can be cleaner, more organized than writing out a bunch of variables. Unlike arrays, they are useful when you want to "lookup" a value by a key. For arrays, you have to "loop" through each element to access value. With objects, you can "lookup" a value by referencing the key.

var obj = {
  someKey: 123,
  anotherKey: 456,
};

obj.someKey // --> 123
obj['someKey'] // --> 123

// also

obj.anotherKey // --> 456
obj['anotherKey'] // --> 456

The key-value pairs on an object are called properties. The value of a property is accessed by a key, either by dot notation (obj.anotherKey) or bracket notation (obj['anotherKey']). These are just two different means to the same end according to the rules of JavaScript.

Objects have sometimes been called "dictionaries," as you can look up a definition (the value) by looking up a phrase (the key).

Action Types

Finally, there are functions which I like to call an action type.

A function is a chunk of code that only runs when it is triggered/called. This is important for not running all your code at once, but to have code run according to a timeline.

function putMeInCoachImReadyToPlay() {
  alert('Batter Up!');
}

In the example above, the function has some code ready to be executed. The code will execute when the function is "called." Functions are called by typing out the function name plus ().

putMeInCoachImReadyToPlay() // --> alerts "Batter Up!"

You can think of () as pressing the play button on a remote.

You can also "supply" data needed for a function to work as you expect.

function putMeInCoachImReadyToPlay(name) {
  alert(`${name}, Batter Up!`);
}

putMeInCoachImReadyToPlay('Nick') // --> alerts "Nick, Batter Up!"

In conclusion, it would be very hard to play a sport without knowing its rules. Similarly, it is very hard to learn a programming language without knowing its rules. In order to understand rules, we need mental models to make it stick.

Hopefully, this article helps paint a mental model for variables and data types in JavaScript. However, the best mental model is the one that makes most sense to you, and that can vary from person to person. The important thing is to be intentional to form mental models so that the load of learning new information is comprehendible and not overwhelming.

So, if you are new to JavaScript, write down the mental model you are forming as an aid to your learning. If you are familiar with JavaScript, write down the mental model you have accumulated. As writing this article as proven to me, even a veteran could benefit from thinking through JavaScript mental models.

If you want some more help on forming a JavaScript mental model, I recommend Dan Abramov's course Just JavaScript. His mental models are different than mine but the intent and usefulness is the same.

If you liked this article, you might want to check out my mental model series on React: https://dev.to/michaelmangial1/how-i-think-about-react-a-mental-model-for-beginners-part-1-1pji