Lesson Weekend

We discussed basic data types right when we got started with JavaScript. However, it's so important to understand and know how to use these data types that we will review them in this lesson. Keep in mind that JavaScript data types are divided into two categories: primitives and objects. In this lesson, we'll review JavaScript primitives.

We'll also learn about data type conversion and detection!

Review of JavaScript Data Types: Primitives


You've already seen numbers, strings, booleans, and undefined. These are 4 of the 7 basic data types, or primitives, in JavaScript. The fifth is null, which represents nothingness. Don't worry about null for now - we'll learn more about it down the road. And as we mentioned before, we won't concern ourselves with symbols or bigint in this course.

Number

Unsurprisingly, the number type represents numbers.

  • 42
  • 3.14
  • -10
  • 0
  • NaN (stands for "not a number", but is considered a number)
  • Infinity
  • -Infinity
  • const favoriteNumber = 42;

You can use certain methods on numbers.

> 3.14159.toFixed(2);
"3.14"

String

As you've seen, the string type represents text.

  • "hello, world!"
  • const greeting = "hello, world!";

You can use certain methods on strings.

> "hello".toUpperCase();
"HELLO"
> "hello".charAt(2);
"l"
> "hello".toUpperCase().charAt(2);
"L"

Boolean

Booleans can only hold 2 possible values - true or false.

> 5 > 3;
true
> 5 > 10;
false
> "hello".charAt(2) === "e";
false
> const enrolledAtEpicodus = true;
> enrolledAtEpicodus;
true

You'll discover soon just how important booleans are to programming.

Undefined

The undefined data type has only one possible value - undefined.

When declaring a variable without giving it a value (let myNumber;), JavaScript creates the variable without a value, hence undefined. Even when declaring a variable and assigning it a value at the same time (let favoriteNumber = 42;), JavaScript actually creates the variable initially without a value, temporarily giving it a value of __undefined__, before then assigning it the value to the right of the equals sign. This is kind of a subtle point, so don't worry too much about it at the moment.

Additionally, there are some functions and methods that do not return any value, in which case the return value is actually undefined. You'll learn more about this when we learn how to write our own methods and functions.

Data Type Detection


It's important to understand the difference between the number 5 and the string "5". To the computer, they are two entirely different things, as illustrated by this example:

> const myNumber = 5;
> const myOtherNumber = 10;
> const myText = "5";
> const myOtherText = "10";
> myNumber + myOtherNumber;
15
> myText + myOtherText;
"510"

When we added 10 to 5 we got 15, but when we added "10" to "5" it concatenated the two strings together.

Likewise, the boolean true is not the same as the string "true".

In the example above, somewhat confusingly, the + operator works on both numbers and strings - just with different results. However, methods will only work on a specific data type. For example, 48432.78.toFixed(1); works just fine, but trying to do "48432.78".toFixed(1); results in an error because there is no toFixed() method that works on a string. In other words, Number.prototype.toFixed() is a method that exists in JavaScript, but String.prototype.toFixed() is not.

Likewise, "hello".charAt(2); works, but 314159.charAt(2) does not. This is because String.prototype.charAt() is a JavaScript method, and Number.prototype.charAt() is not.

We can check the data type of a variable or value with the typeof JavaScript operator as follows:

> typeof 5;
"number"
> typeof "5";
"string"
> typeof true;
"boolean"
> typeof "true";
"string"
> const greeting = "hello world";
> typeof greeting;
"string"

Documentation on typeof Operators

Visit this link to MDN to for reference pages on the typeof operator:

Data Type Conversion


Often we'll need to convert data types in order to manipulate them or use them in a way that works for our program. Let's look at a few different examples now.

Changing a String into a Number

input from a web browser will come in as a string and we will need to convert it to a number before working with it.

We can convert a string to a number by passing a string to JavaScript's built-in parseInt() function (we'll cover more on functions soon):

> const inputtedAge = "45";
> inputtedAge;
"45"
> typeof inputtedAge;
"string"
> const myAge = parseInt(inputtedAge);
> myAge;
45
> typeof myAge;
"number"

Note that if you try to use parseInt() to convert a string not actually containing a number, the result is the "number" NaN.

> const name = "Andrea";
> const nonsense = parseInt(name);
> nonsense;
NaN

Changing a Number into a String

If you need to go the other way around, you can convert a number to a string by calling the Number.prototype.toString() method on the number:

> const myNumber = 42;
> myNumber;
42
> typeof myNumber;
"number"
> const convertedNumber = myNumber.toString();
> convertedNumber;
"42"
> typeof convertedNumber;
"string"

We can also call the Number.prototype.toString() on a number directly instead of on a variable that has a number value:

> 42.toString();
"42"

Changing a Boolean into a String

You can also convert a boolean to a string by calling the Boolean.prototype.toString() method on the number:

> const enrolledInEpicodus = true;
> enrolledInEpicodus;
true
> typeof enrolledInEpicodus;
"boolean"
> const convertedBool = enrolledInEpicodus.toString();
> convertedBool;
"true"
> typeof convertedBool;
"true"

We can also call the Boolean.prototype.toString() on a boolean directly instead of on a variable that has a boolean value:

> false.toString();
"false"

Read more about parseInt(), Number.prototype.toString(), and Boolean.prototype.toString() by following these links:

JavaScript Data Types - Primitives


  • Boolean: true or false.

  • Number: Numerical value.

  • String: Content inside of quotes. Such as "This is a string!".

  • Undefined: An object (such as a variable) without a defined value.

  • Null: For now, know that this represents nothingness. We'll explore this more later.

Functions


  • parseInt(): Converts a string to a number.

  • Number.prototype.toString(): Converts a number to a string.

  • Boolean.prototype.toString(): Converts a number to a string.

Examples


Data Type Detection

To check the data type of a variable or value:

> typeof 5;
"number"

Data Type Conversion

To convert a string to a number:

> const myNumber = parseInt("42")
> myNumber;
42

To convert a number to a string:

> const convertedNumber = 42.toString();
> convertedNumber;
"42"

To convert a boolean to a string:

> const convertedBool = true.toString();
> convertedBool;
"true"

Lesson 19 of 65
Last updated May 23, 2022