Learn Programming With JavaScript

What is a type?

Simply put, the type of a variable or constant is the kind of data you store in it.  In JavaScript, there are three main primitive types:

• number

• string

• boolean

Primitive types are the basic building blocks of every data structure in JavaScript.

While you do not need to declare a variable's type in JavaScript (more on this a little later), it is important to understand their existence and importance.

Numbers

All of the variables you have created so far in this course have been of type number.  As you have seen, they can be manipulated mathematically in many different ways. 

Variables of type number  can be either positive or negative. They can also be whole numbers (1, 2, 3, etc) or decimals (1.4, 67.34, etc).

Beware of floating-point arithmetic!

Floating-point arithmetic can throw up really weird errors in all programming languages:

let integerCalculation = 1 + 2;  // gives 3

let weirdCalculation = 0.1 + 0.2;  // 0.3 expected, actual answer 0.30000000000000004

Where possible, use integer calculations instead (when calculating prices, for example, think in cents, not euros or dollars).

Booleans

Booleans are the simplest of the primitive types: they hold the values  true or  false. They are used in all sorts of cases: whether or not a user is signed in, a checkbox is checked, or a specific set of conditions are met. 

Boolean variables hold one of two values:  true or false.

let userIsSignedIn = true;
let userIsAdmin = false;

Strings

Strings of characters (or just strings) are how you store text in JavaScript variables.  Anything from one letter to quite a large number of letters (over 134 million even in older browsers) can be stored in a variable of type string:

String variables are enclosed in single or double quotes —  '  or  ":

let firstName = "Will";
let lastName = 'Alexander';

Strings can also be concatenated (one added to the end of another) using the + operator:

let wholeName = firstName + ' ' + lastName;  // value: "Will Alexander"

Practice using data types!

Head to CodePen Exercise P1CH3a and follow the instructions below to practice using three primitive types: numbers, strings, and booleans.

Now that you've helped complete the show component, it's time to work on an individual episode component. This component will show the title of the episode, its duration (in minutes), and whether or not the user has already watched the episode.

1. Create a variable called episodeTitle containing a string, and give your episode an exciting title.

2. Create a number variable called episodeDuration, and decide how long your episode is in minutes.

3. Finally, create a boolean variable called hasBeenWatched which states whether or not the user has already watched the episode.

4. Check if the component works as you would expect it to. Don't hesitate to modify your values and see if the behavior is what you expect.

Solution:

Once you've given it a go, watch me code a solution and see how your approach compares. And here is a new CodePen with a solution to the exercice.

Types in JavaScript

JavaScript is what is called a dynamic, or loosely-typed language. This means that you can initialize a variable as a number, then reassign it as a string, or any other type of variable. This allows for a lot of flexibility, but it can also lead to unexpected behavior if you're not careful: 

The moral of the story: be aware of the types of your variables, and in general, use constants where possible.

Let's recap!

In this chapter, you learned the three main primitive data types in JavaScript.

• number

• boolean

• string

Other, more complex data types exist, and in the next chapter, we will start looking at a very useful one: objects.

Technically, there are three other primitive data types in JavaScript:  null,  undefined, and  Symbol. You will come across the first two in this course, while symbols are beyond the scope. For more information, check out the MDN docs for types.