How I Think About JavaScript Types (A Mental Model for Beginners)
Tags: javascript, computerscience
Published: 2021-07-27 16:16:20

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.

![https://images.unsplash.com/photo-1475906089153-644d9452ce87?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb](https://images.unsplash.com/photo-1475906089153-644d9452ce87?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb)

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.

![https://images.unsplash.com/photo-1610563166150-b34df4f3bcd6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb](https://images.unsplash.com/photo-1610563166150-b34df4f3bcd6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb)

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.

```jsx
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).

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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.

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/97f90576-46e7-4df1-b7af-ee08975a1874/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/97f90576-46e7-4df1-b7af-ee08975a1874/Untitled.png)

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.

```jsx
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.

```jsx
var array = [1, 2, 3];

array.forEach(...);
```

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

```jsx
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.

```jsx
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.

```jsx
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 `()`.

```jsx
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.

```jsx
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](https://justjavascript.com/)*. His mental models are different than mine but the intent and usefulness is the same.

<hr />

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