JavaScript typeof Operator Tutorial

In this tutorial, we will learn how to use the JavaScript typeof operator that returns a string representing the type of a value.

typeof is a JavaScript keyword that will return the type of a variable when you call it. You can use this to validate function parameters or check if variables are defined. Since JS is a dynamically types language, meaning you do not have to specify the type of variables when declaring them, the typeof operator comes in handy to check the data type before execution

javaScript typeOf Syntax

typeof(operand) or typeof operand

DIFFERENT TYPES OF OPERANDS WE CAN CHECK TYPEOF IN JS

We can use typeof in JS to check the data type of the following operands:

Number
String
Undefined
Boolean
Object
Symbol
Function

Check the number typeof In JavaScript

Here, we will pass numbers as operands and use the typeof operator and log the result to the console. We will use a positive integer, negative integer, zero, floating-point number, infinity, NaN, and Math equations as operands.

Example :

<script>
console.log(typeof 10);
console.log(typeof -22);
console.log(typeof 0);
console.log(typeof 1.722);
console.log(typeof Infinity);
</script>

Output :

number
number
number
number
number

Check String typeof in Javascript

In this example, we will pass string operands. The typeof in JavaScript will return “string” as the result of an empty string, a string of characters, a string of multiple words, numbers in quotes, use of this operator and conversions with the String function.

Example :

<script>
console.log(typeof '');
console.log(typeof 'Simplilearn');
console.log(typeof 'Welcome to JavaScript Tutorials');
console.log(typeof '10');
</script>

Output :

string
string
string
string

Check undefined typeof In JavaScript

This example will show the use of this operator in JavaScript to check undefined operand types. We will use the undefined keyword, a declared but undefined variable, and an undefined variable as operands and log the result to the console. One thing to note here is that we are using Null and not null as the former returns undefined while the latter returns object as the type of the operands.

Example :

<script>
console.log(typeof undefined);
// Declared but undefined variable
let a
console.log(typeof a);
// Undefined variable
console.log(typeof v);
</script>

Output :

undefined
undefined 
undefined

Check the boolean typeof in JavaScript

For this example, we will pass boolean values as operands. The typeof in JavaScript will return a boolean for true or false, values explicitly typecast as a boolean using the Boolean() function, and when two “!” (Logical NOT) operators are used.

Example :

<script>
console.log(typeof true);
console.log(typeof false);
console.log(typeof Boolean(1));
console.log(typeof !!(1));
</script>

Output :

boolean
boolean
boolean
boolean

Check Object typeof in JavaScript

The below example passes objects as operands with typeof in JavaScript. The following operands will return the object as a result.

Example :

<script>
console.log(typeof null);
console.log(typeof [1, 2, 'hello']);
console.log(typeof {a: 'hello', b: 'welcome'});
console.log(typeof [1, 2, 3, 4]);
</script>

Output :

object
object
object
object

Check Symbol typeof in JS

In this example, we will use the symbol data type operands. This operator will return “symbol” when we pass an empty Symbol() function, a single parameter Symbol() function, and Symbol. iterator.

Example :

<script>
console.log(typeof Symbol());
console.log(typeof Symbol('parameter'));
onsole.log(typeof Symbol.iterator);
</script>

Output :

Symbol
Symbol
symbol

Check function typeof in JS

We will get “function” as the output in this example when we pass the operands to this in JavaScript. The typeof operator will return this result when we give a user-defined function, a predefined function, or a class as an operand.

Example :

<script>
console.log(typeof function() {});
console.log(typeof Math.tan);
console.log(typeof class C {});
</script>

Output :

function
function
function

JS typeof Operator String Example

<html>
<head>
<title>Developer Helps | Javascript typeof Operator</title>
</head>
<body>
<h2>Javascript typeof</h2>
<p id="empty-string"></p>
<p id="single-word"></p>
<p id="multiple-word"></p>

<script>
var language1 = "";
var language2 = "PHP";
var language3 = "Java WordPress";

document.getElementById("empty-string").innerHTML = typeof(language1);
document.getElementById("single-word").innerHTML = typeof(language2);
document.getElementById("multiple-word").innerHTML = typeof(language3);
</script>

</body>
</html>

Output :

Javascript typeof

string
string
string

JavaScript Number Datatype Example

<html>
<head>
<title>Developer Helps | Javascript typeof Operator</title>
</head>
<body>
<h2>Javascript typeof</h2>
<p id="number-type"></p>

<script>
document.getElementById("number-type").innerHTML = typeof(9) + "<br>" + typeof(9.45) + "<br>" + typeof(0);
</script>

</body>
</html>

Output :

Javascript typeof
number
number
number

JavaScript Undefined Datatype Example

In JavaScript, a variable without a value, has the value undefined.

<html>
<head>
<title>Developer Helps | Javascript typeof Operator</title>
</head>
<body>
<h2>Javascript typeof</h2>
<p id="undefined-type"></p>

<script>
var lang;
document.getElementById("undefined-type").innerHTML = typeof(lang);
</script>

</body>
</html>

Output :

Javascript typeof

undefined

JavaScript Object Datatype Example

In JS this operator returns the “object” for the objects and arrays or null.

<html>
<head>
<title>Developer Helps | Javascript typeof Operator</title>
</head>
<body>
<h2>Javascript typeof</h2>
<p id="object-type"></p>

<script>
var arr = ["PHP", "Java"];
var obj = {language:"PHP", framework:"Laravel"};
var value = null;

document.getElementById("object-type").innerHTML = "Array is: " + typeof(arr) + "<br>Object is: " + typeof(obj) + "<br>null is: " + typeof(value);
</script>

</body>
</html>

Output :

Javascript typeof

Array is: object
Object is: object
null is: object

JavaScript Boolean Datatype Example

Boolean type value is true or false.

<html>
<head>
<title>Developer Helps | Javascript typeof Operator</title>
</head>
<body>
<h2>Javascript typeof</h2>
<p id="boolean-type"></p>

<script>
var bool = true ;
document.getElementById("boolean-type").innerHTML = typeof(bool);
</script>

</body>
</html>

Output :