Understanding JavaScript Typeof

JavaScript is a dynamic language, which means the data type of a variable can change dynamically based on the value assigned to it. The typeof operator in JavaScript is used to determine the type of a value or an expression. It returns a string that specifies the type of the operand. The typeof operator is a powerful tool that allows you to write robust and error-free code. In this article, we will take a deep dive into the typeof operator and learn how it works.

The typeof Operator

The typeof operator is a built-in operator in JavaScript that returns a string that specifies the type of the operand. The syntax of the typeof operator is as follows:

typeof operand

Where operand can be a variable, a function, an expression, or a literal.

The typeof operator returns one of the following string values:

• "undefined" if the value of operand is undefined.
• "boolean" if the value of operand is a boolean.
• "number" if the value of operand is a number.
• "bigint" if the value of operand is a BigInt.
• "string" if the value of operand is a string.
• "symbol" if the value of operand is a symbol.
• "function" if the value of operand is a function.
• "object" if the value of operand is an object or null.

Let’s take a look at some examples to understand how the typeof operator works.

typeof undefined; // "undefined"
typeof true; // "boolean"
typeof 42; // "number"
typeof 9007199254740991n; // "bigint"
typeof "JavaScript"; // "string"
typeof Symbol("foo"); // "symbol"
typeof function() {}; // "function"
typeof {}; // "object"
typeof null; // "object"

Working with typeof Operator

The typeof operator can be used to perform various tasks in JavaScript. In this section, we will look at some use cases where the typeof operator is useful.

Checking for undefined

You can use the typeof operator to check if a variable is undefined. The typeof operator returns the string "undefined" if the variable is undefined.

let foo;

if (typeof foo === "undefined") {
  console.log("foo is undefined");
} else {
  console.log("foo is defined");
}


Checking for null

The typeof operator is not very useful in checking for null values because it returns the string "object" for null values. To check for null, you should use the strict equality operator (===) instead.

let foo = null;

if (foo === null) {
  console.log("foo is null");
} else {
  console.log("foo is not null");
}


Checking for Functions

You can use the typeof operator to check if a variable is a function. The typeof operator returns the string "function" if the variable is a function.

let foo = function() {};

if (typeof foo === "function") {
  console.log("foo is a function");
} else {
  console.log("foo is not a function");
}


Checking for Objects

The typeof operator returns the string "object" for objects, arrays, and null values. To differentiate between these values, you can use the Array.isArray() method or the strict equality operator (===).

let foo = {};

if (Array.isArray(foo)) {
  console.log("foo is an array");
} else if (foo === null) {
  console.log("foo is null");
} else if (typeof foo === "object") {
  console.log("foo is an object");
}

Pitfalls of typeof Operator

While the typeof operator is a powerful tool, it has some pitfalls that you should be aware of. In this section, we will look at some of the common pitfalls of the typeof operator.

typeof null Returns “object”

As we saw earlier, the typeof operator returns the string "object" for null values. This behavior is a bug in the language that cannot be fixed due to backwards compatibility. To check for null values, you should use the strict equality operator (===) instead.

let foo = null;

if (foo === null) {
  console.log("foo is null");
} else {
  console.log("foo is not null");
}


typeof NaN Returns “number”

The typeof operator returns the string "number" for NaN values, which is not very useful. To check for NaN values, you should use the isNaN() method instead.

let foo = NaN;

if (isNaN(foo)) {
  console.log("foo is NaN");
} else {
  console.log("foo is not NaN");
}


typeof Operator Does Not Differentiate Between Objects and Arrays

As we saw earlier, the typeof operator returns the string "object" for objects, arrays, and null values. To differentiate between these values, you should use the Array.isArray() method or the strict equality operator (===).

let foo = [];

if (Array.isArray(foo)) {
  console.log("foo is an array");
} else if (foo === null) {
  console.log("foo is null");
} else if (typeof foo === "object") {
  console.log("foo is an object");
}

Conclusion

In this article, we learned about the typeof operator in JavaScript. We saw that the typeof operator returns a string that specifies the type of the operand. We also saw some examples of how the typeof operator can be used to perform various tasks in JavaScript. Finally, we looked at some of the common pitfalls of the typeof operator and how to avoid them.

Understanding the typeof operator is an important aspect of writing error-free and robust code in JavaScript. By knowing the type of a value or an expression, you can avoid many common programming errors and write more efficient code.

📕 Related articles about Javascript

• JavaScript Iterables: Understanding the Concept and its Benefits
• Understanding JavaScript Function Closures
• Understanding JavaScript Booleans
• JavaScript Loop For
• JavaScript String Templates
• JavaScript Math: A Comprehensive Guide