JavaScript for the Complete Beginner | Part 3 — Data Types

Now that we’ve talked about variables, let’s talk about what types of data those variables can hold. First, lets talk about typeof. typeof is an operator — like +, -, or =. 2 + 2 returns 4. typeof returns the type of the value we ask it about. What does that mean? It’s a lot less confusing than it looks:

typeof 2;
// -> 'number'

For those of you in doubt, 2 is indeed a number. Thanks, typeof.

Open your console and try it out. We’re going to be using typeof throughout this lesson so get familiar with it now.

🚩Q: Why is typeof a word and not a symbol? Aren’t most operators symbols?

A: Because all the cool keyboard symbols were already taken. Probably.

Number

typeof 99;
// -> "number"

A number is just that — a number. Some languages get picky about whether or not it’s a decimal or whatnot — JavaScript doesn’t care. JavaScript definitely isn’t your math teacher. As long as your not working with exceptionally large numbers, you should be fine. Just for fun try the following:

Number.MAX_SAFE_INTEGER;
// -> 9007199254740991

That’s the largest number the Number data type can hold. If it’s below 9,007,199,254,740,991, or 9 quadrillion, you should be fine. If you need to use larger numbers, use BigInt. I won’t go further into that though; for most of our purposes Number is fine.

String

Every programming language, including JavaScript, uses strings. Last lesson we used words as variables:

var bigNumber = 100;

But what happens if we want a variable to be equal to a word? Let’s try it out:

var favoriteAnimal = fish;
// -> fish is not defined

When we refer to favoriteAnimal, we’re telling JavaScript to look at what the variable, favoriteAnimal, is referring to. But we don’t want our fish to refer to anything else, we want it to refer to the word “fish”. That’s what is string is: a collection of characters(letters, numbers and symbols) meant to be kept together. So how do we refer to strings, which refer to “a collection of characters” and variables, which refer to whatever we want them to? We use quotation marks:

var favoriteAnimal = "fish"
// -> undefined
favoriteAnimal;
// -> "fish"

And what’s the typeof “fish”?

typeof "fish"
// -> "string"

It’s a string. And notice the word “string” is surrounded by quotation marks; typeof’s return value is also a string! A string can includes spaces and other characters:

var sentenceString = "This is a string. It can include numbers: 1, 2,3; and symbols: _ + ^ *. It can be as long as you want.";
// -> undefined
sentenceString;
// -> "This is a string. It can include numbers: 1, 2,3; and symbols: _ + ^ *. It can be as long as you want."

You can also use single quotation marks:

var singleQuotationMarks = 'This works too.';

What happens if you need to use quotation marks inside of a string? You have a few choices, but I recommend for now you use the opposite of what you want to use on the inside:

var thisIsFine = "You can use single 'quotation marks' inside of double quotation marks, and vice-versa";

🚩Note: numbers in strings are not numbers, but rather characters. Don’t use them like real numbers or weird things may happen:

"2" + 2;
//-> "22" (!?)

We’ll talk about why later.

Boolean

Sometimes you want to do something if something. Let’s say, for example, that you want to buy a fish, but only if the fish is red. For this reason programming languages have Boolean values; that is, true or false. These are the only two boolean values, but every value can be converted to a boolean value. Values that, when coerced, are true are truthy values. Values that are false when coerced into a boolean value are falsy. Values like 2 and “hello” are truthy. Values like 0 and “” (an empty string) are falsy. You can see a list of truthy values in JavaScript here, but it’s not necessary to memorize most of them at the moment.

typeof true;
// -> "boolean"

Null & Undefined

Null is the intentional absence of a value. Undefined is the value of a variable that has not been assigned another value. They are different, but I won’t go over the differences here. Just remember to assign your variables values and you’ll be good:

var undefinedVariable;
typeof undefinedVariable;
// -> "undefined"
undefinedVariable = "this value is now defined. Unfortunately, the variable's name is now confusing";
typeof undefinedVariable;
// -> "string"
var nullVariable = null;
typeof nullVariable;
//-> "object" (!?)

Most of the above code should make sense. But what about that last line? That’s for next time, where we’ll learn about objects and arrays.