Checking a Value's Kind with typeof

Introduction

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 Has a Type

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.

Asking JavaScript with typeof

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 : JavaScript 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: text 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.

Checking a Stored 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: JavaScript const pricePerCup = 4.5; console.log(typeof pricePerCup); Here pricePerCup holds a number, so JavaScript prints: text 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.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

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

JavaScript

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

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:

text

3
3
number
string

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:

JavaScript

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}`);

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:

text

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

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:

JavaScript

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

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:

text

number
string

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!

Introduction

A Value Has a Type

Asking JavaScript with typeof

Checking a Stored Value

Join the 1M+ learners on CodeSignal

Quotation Marks Change the Type

Labelling the Types We Store

Reading Type Results Carefully

Conclusion and Next Steps