Checking a Value's Kind with typeof

Welcome to Comparing and Converting JavaScript Values! In the previous course, we stored values under names, changed some with let, and used arithmetic to work out new values. As programs grow, we also need to know what kind of value a name holds, because JavaScript treats numbers and text differently.

In this lesson, we will learn what a type is, meet the typeof operator, and use it to inspect numbers, text, and boolean values. By the end, we will be able to tell the difference between 3 and "3" even though they may look alike when printed.

A value is one piece of information in a program, such as 7, "Alex", or true. A type describes what kind of information a value represents. We will work with three types here:

• A number represents a quantity, such as 7 or 4.5.
• A string is text surrounded by quotation marks, such as "Alex".
• A boolean represents one of two choices: true or false.

The code tells us which type a value has. A number is written without quotation marks, while a string is written between quotation marks. The two can look similar in the editor, but JavaScript keeps their types distinct.

We can ask JavaScript to report a value's type by placing the word typeof before the value. It produces a string containing the type name, which we can show with console.log:

console.log(typeof 7);
console.log(typeof "Alex");
console.log(typeof true);

When these lines run from top to bottom, each typeof result appears on its own line:

number
string
boolean

The output uses the words number, string, and boolean. These are the names JavaScript gives the types we have used. Notice that typeof itself does not change the value; it gives us information about the value.

We do not have to inspect only values written directly in the code. typeof also works with a variable name. JavaScript first looks up the value stored under that name, then reports its type:

const pricePerCup = 4.5;
console.log(typeof pricePerCup);

Here pricePerCup holds a number, so JavaScript prints:

number

This can help us understand a program when the original value is far away from where it is used. We can inspect the name at the point where we need to know what it contains.

Quotation marks mark text. The number 3 and the text "3" can look alike when printed, even though they are different kinds of values:

console.log(3);
console.log("3");
console.log(typeof 3);
console.log(typeof "3");

The first two lines look the same in the console. The type results reveal the difference:

3
3
number
string

This matters whenever a program needs to calculate with a value. A string that looks like a number is still text until we deliberately convert it. We will do that in the next lesson.

We can combine what we know about variables, template literals, and typeof to make a small type report. Each value is stored once, and each template literal includes the type JavaScript found:

const stockCount = 4;
const shopName = "Corner Cafe";
const isOpen = true;

console.log(`stockCount is a ${typeof stockCount}`);
console.log(`shopName is a ${typeof shopName}`);
console.log(`isOpen is a ${typeof isOpen}`);

The template literal fills in each type name between ${ and }. When the program runs, we get one labelled line for each stored value:

stockCount is a number
shopName is a string
isOpen is a boolean

The labels make the output easier to read when there are several values. They also remind us that the type belongs to the value, while stockCount, shopName, and isOpen are the names we chose.

The words printed by typeof are themselves strings. The result of typeof 7 is the text "number", not a special number value. We can store that result and check its type:

const stockCount = 4;
const typeName = typeof stockCount;
console.log(typeName);
console.log(typeof typeName);

The first line reports the type of the number. The second shows that the type name we stored is text:

number
string

We can also distinguish the value we inspect from the answer typeof gives us. In typeof stockCount, the variable name points to the number 4. In typeof "stockCount", JavaScript inspects the text inside quotation marks instead and reports string. Quotation marks signal a string even when the characters spell a variable name.

Printing both a value and its type gives us two clues when a later calculation or comparison behaves unexpectedly. For this course, the three type names we have learned cover the values we use.

We learned that values have types, and that typeof reports whether a value is a number, string, or boolean. Quotation marks make an important difference: 3 is a number, while "3" is text. We can inspect literal values or values stored in variables.

Next, we will see what happens when text and numbers meet, then use Number() and String() to convert values on purpose. Let's put these type clues to work!