The JavaScript typeof operator is quite an exciting way to learn more about JavaScript syntax and how data is depicted in this programming language. If you're just starting in JavaScript, it is crucial to study data types and objects.

There are a few data types, which cannot contain values as a whole. In this sense, the typeof operator helps find the data type of a JavaScript variable. This tutorial will focus on the typeof operator and its applications, alongside reviewing all data types and objects to understand how this operator works.

Data types in JavaScript

This tutorial's structure might be a bit different from others. The main reason is that the typeof operator searches for the data type of a variable. In this sense, it's a must to know all data values and objects to know what can be found with this command. Let's move forward and review the most common data types containing values, which are:

  • number - used for numbers of any kind, ranging from float numbers to floating-points.

  • boolean - for true/false values.

  • bigint - for integer numbers of arbitrary length.

  • string - for strings.

  • null - for unknown values.

  • undefined - for unassigned values.

  • object - for complex data structures.

  • symbol - for unique identifiers.

As you can see, there are also two data types, which cannot contain values, called null and undefined. It's crucial to understand that type checking is fundamental to any programming language, and that's why you should know all data types by hard to know how to use the typeof operator on your own.

Introduction to the typeof operator

As we've introduced the concept before, the typeof operator performs an operand. It is done by evaluating the operand's type and returning the result as a string. Let us show you the most basic example of how this search and type checking is performed in JavaScript:

typeof 856;
console.log(typeof(856));

In this case, we use the typeof operator and indicate the data type we need, which is 856. As you know already, because 856 is a number, the output of this code would be "number". And what if we want to perform the type checking using a different data set? Let's review the following string example:

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

If you run the mentioned example through a compiler, the output you'd get would be a string. And what if we want to type check the data type that doesn't contain value? Consider running through the following example:

typeof blahblah;
console.log(typeof(blahblah));

Because the data set we've entered is not a string, number, boolean, object, or function, the output of this code would be undefined. Because such inquiries are basic, let's move forward and find out how the typeof operator can be used for more advanced and complex tasks.

How to use typeof

One of the typeof operator advantages is no strict syntax for specifying variables or data type which we are going to check. But sometimes inexperienced programmers make reference errors, which can cause unexpected results of data interpretation by typeof. Therefore, in this section, we have collected syntax examples for all 9 data types which are compatible with typeof, including undefined, null, and even function itself.

  • typeof syntax with BigInt

BigInt is a special object for storing very large numbers (greater than maximum in Number). Such numbers in the code as a rule are indicated by adding "n" after the number, or by using a direct indication of the type.

let bInt1 = 2710310735773012n;
console.log(typeof(bInt1));
let bInt2 = BigInt(0o2710310735773012);
console.log(typeof(bInt2));
let bInt3 = BigInt(0x9A10364A2FD54);
console.log(typeof(bInt3));

Result (same for all cases):

bigint

  • typeof syntax with boolean

One of the data primitives that can only store two values: true or false.

let bool1 = true;
console.log(typeof(bool1));
let bool2 = Boolean(false);
console.log(typeof(bool2));

Result (same for all cases):

boolean

  • typeof syntax with functions

A function is one of the main JavaScript objects which allows you to implement your own code blocks.

Callback function:

function testFunc1(){}
console.log(typeof(testFunc1));

Arrow function:

console.log(typeof(a => a + 10));

Inline callback function:

console.log(typeof(function(){return a = 10}));

Result (same for all cases):

function

  • typeof syntax with number

A primitive data type used to store numbers only.

let a = 1.5;
let b = 95343246;
let c = Infinity;
let d = Number('10');
console.log(typeof(a));
console.log(typeof(b));
console.log(typeof(c));
console.log(typeof(d));

Result (same for all cases):

number

  • typeof syntax with string

The String data type is used to store texts and their fragments with any length.

let a = 'text';
let b = '';
console.log(typeof(a));
console.log(typeof(b));

Result (same for all cases):

string

  • typeof syntax with symbol

It's a special data type for creating unique values which cannot be changed later.

let a = Symbol('text');
let b = Symbol();
console.log(typeof (a));
console.log(typeof(b));

Result (same for all cases):

symbol

  • typeof syntax with Object

A data type for storing multiple values at a time (collections). Has special methods for reading and modifying its content. By the way, if you specify incorrect data reference, most likely typeof will return an object.

let a = [1, 2, 3];
let b = new Number();
let c = {text1: 'a1', text2: 'a2', text3: 'a3'};
console.log(typeof(a));
console.log(typeof(b));
console.log(typeof(c));

Result (same for all cases):

object

  • typeof syntax with null

In JavaScript, you get null if you request a non-existent variable. It's worth noting that while null is highlighted separately, it's still considered as an object in JavaScript.

let a = typeof b;
let c = null;
console.log(a);
console.log(typeof(c));

Result (same for all cases):

object

  • typeof syntax with undefined

This can be obtained by requesting a declared variable whose value hasn't been assigned.

let a = undefined;
let b;
console.log(typeof(a));
console.log(typeof(b));

Result (same for all cases):

undefined

Test yourself

Before jumping to conclusions, we have a few tasks for you to practice the use of the typeof operator:

  • Task 1. Try logging the data type of an array, which has empty properties and looks like this to find out what the data set is:

const arr = [];

Solution:

const arr = [];
console.log(typeof arr); // expected output: object

  • Task 2. Once again, try working with a Boolean by indicating both false and true parameters for it, and use the typeof operator to determine the value for the following example:

let example = true;
let example2 = false;

Solution:

let example = true;
let example2 = false;
console.log(typeof example);
console.log(typeof example2);

  • Task 3. With the ECMAScript 2020, the BigInt data type was added. Thus, try finding out whether the BigInt primitive shows the correct data type.

Solution:

typeof 1n === 'bigint' // true

Conclusion

Working with data types and type checking is essential for any programming language. In JavaScript, learning the data types with values, without them, and all objects are inevitable. The good news is that the typeof operator can be used both to accept an operand and to return the type of the provided operand as a string.

Some examples of using the typeof operator are type checking of numbers, boolean, symbols, objects, arrays, functions, and data sets with no set values. Because learning all these data types is required, do that by frequent use of the typeof operator. After all, you'll have lots of work with data types in the future.