The typeof Operator
The typeof operator in JavaScript is a unary operator used to get the data type of a particular variable. It is placed before its single operand, which can be of any type. Its returns a string value indicating the data type of its operand. JavaScript contains primitive and non-primitive data types.
There are seven primitive or basic in JavaScript data types number, string, boolean, undefined, null, symbol, and bigint. There is also a composite data type called object. The object data type contains three sub data type Object, Array and Date.
Syntax
Following is the syntax of the typeof operator −
typeof(operand);
We can write the operand without parenthesis as follows −
typeof operand;
Parameter
- operand − It can be a value, variable or expression representing the object or primitive. In JavaScript, primitives are data that are not object and have no methods or properties.
Return Value
- It returns the string value representing the data type of the operand.
Datatypes Returned by typeof Operator
Here is a list of the return values for the typeof Operator.
| Type | String Returned by typeof |
|---|---|
| Number | “number” |
| String | “string” |
| Boolean | “boolean” |
| Object | “object” |
| Function | “function” |
| Undefined | “undefined” |
| Null | “object” |
| Symbol | “symbol” |
| Bigint | “bigint” |
There are seven primitive datatypes in JavaScript number, string, boolean, bigint, undefined, null, and symbol. The typeof operator is useful to identify these primitive or basic datatypes.
The typeof operator returns same datatype of the all primitive values except the null. It returns “object” for the null values.
For object, date and array it returns “object” as datatype.
For functions and classes, it returns “function” as datatype.
Let’s use the typeof operator to identify these datatypes one by one.
typeof10;// returns 'number'typeof'Hello World';// returns 'string'typeoftrue;// returns 'boolean'typeof{name:"Tutorialspoint"};// returns 'object'typeoffunctionfoo(){};// returns 'function'typeofundefined;// returns 'undefined'typeofnull;// returns 'object'typeofSymbol();// returns 'symbol'typeof10n;// returns 'bigint'
JavaScript typeof Operator to Check Number Type
In JavaScript, number type represents numeric values. JavaScript uses a floating-point representation for all numbers. The JavaScript typeof operator returns ‘number’ for all types of numbers such as integers, floating points, zero, Infinity, NaN etc.
typeof10;//returns "number";typeof-10;//returns "number";typeof0;//returns "number";typeof10.20;//returns "number";typeof Math.LN10;//returns "number";typeofInfinity;//returns "number";typeofNaN;//returns "number";typeofNumber('1');//returns "number";typeofNumber('hello');//returns "number";
Example
The example below demonstrates how to use the typeof operator to check number data types.
<html><body><p> Using typeof operator to check number data type </p><div id="output"></div><script>let num = 42; document.getElementById("output").innerHTML = typeof num; </script><p>Set the variable to different value and then try...</p></body></html></pre>Output
Using typeof operator to check number data type number Set the variable to different value and then try...JavaScript typeof Operator to Check String Type
Strings represent sequences of characters. The typeof operator helps identify string variables. The JavaScript typeof operator returns "string" for all type of strings, such as empty string, string of characters, string words, multiline string etc.
typeof"10";//returns "string";typeof"";//returns "string";typeof"Hello World";//returns "string";typeofString(10);//returns "string";typeoftypeof2;//returns "string";Example
In the example below we use typeof operator to check string datatype.
<html><body><div id="output"></div><script>let str = "Hello World"; document.getElementById("output").innerHTML = typeof str; </script><p>Set the variable to different value and then try...</p></body></html></pre>Output
string Set the variable to different value and then try...JavaScript typeof Operator to Check Boolean Type
The boolean values represent true or false. The tyepof operand returns boolean for boolean variables.
typeoftrue;//returns "boolean";typeoffalse;//returns "boolean";typeofBoolean(10);//returns "boolean";Example
In the example below, we use typeof operator to check boolean datatype.
<html><body><div id="output"></div><script>let bool = true; document.getElementById("output").innerHTML = typeof bool; </script><p>Set the variable to different value and then try...</p></body></html></pre>Output
boolean Set the variable to different value and then try...JavaScript typeof Operator to Check Symbol Type
Symbols were introduced in ES6 and provide a way to create unique identifiers. Using typeof operator with symbols returns "symbol".
typeofSymbol();//returns "symbol";typeofSymbol("unique values");//returns "symbol";Example
In the example below, we use typeof operator to check Symbol datatype.
<html><body><div id="output"></div><script>let sym = Symbol("Hello"); document.getElementById("output").innerHTML = typeof sym; </script><p>Set the variable to different value and then try...</p></body></html></pre>Output
symbol Set the variable to different value and then try...JavaScript typeof Operator to Check Undefined and Null
The "undefined" type represents a lack of a value. The "null" type represents the absence of any object value. When using typeof operator with an undefined variable, it returns 'undefined'. Surprisingly, using typeof operator with null also returns "object", which is a known quirk in JavaScript.
typeofundefined;//returns "undefined";typeofnull;//returns "object";Please note typeof operator will return "undefined" for both undeclared variable and declared but unassigned variables.
Example
In the example below, we use typeof operator to check undefined datatype.
<html><body><div id="output"></div><script>let x; document.getElementById("output").innerHTML = typeof x; </script><p>Set the variable to different value and then try...</p></body></html></pre>Output
undefined Set the variable to different value and then try...JavaScript typeof Operator to Check Object Type
The JavaScript typeof operator returns "object" for all types of object such as JavaScript objects, arrays, dates, regex, etc.
const obj ={age:23};typeof obj;//returns "object";const arr =[1,2,3,4];typeof arr;//returns "object";typeofnewDate();//returns "object";typeofnewString("Hello World");//returns "object";Example
In the example below, we use typeof operator to check object datatype.
<html><body><div id="output"></div><script>const person = {name: "John", age: 34}; document.getElementById("output").innerHTML = typeof person; </script><p>Set the variable to different value and then try...</p></body></html></pre>Output
object Set the variable to different value and then try...JavaScript typeof Operator to Check Function Type
Functions are first class citizens in JavaScript. The JavaScript typeof operator returns "function" for all types of functions. Interestingly it returns "function" for classes also.
constmyFunc=function(){return"Hello world"};typeof myFunc;//returns "function";const func =newFunction();typeof func;//returns "function";classmyClass{constructor(){}}typeof myClass;// returns "function";Example
In the example below, we use typeof operator to check function datatype.
<html><body><div id="output"></div><script>const myFunc = function(){return "Hello world"}; document.getElementById("output").innerHTML = typeof myFunc; </script><p>Set the variable to different value and then try...</p></body></html></pre>Output
function Set the variable to different value and then try...JavaScript typeof Operator to Check BigInt Type
The typeof operator returns "bigint" for BigInt numbers. BigInt values are the numeric values that are too big to be represented by the number primitive.
typeof100n;// returns "bigint"JavaScript typeof Operator in Real-Time Development
For example, the developer gets the data from API. If there is only a single string, API returns the string response, and for multiple strings, API returns the array of strings. In this scenario, developers require to check whether the type of the response is string or array, and if it is an array, they need to traverse each string of the array.
Example
In the example below, we check the type of the response variable and print its value accordingly.
<html><body><script>const response = ["Hello", "World!", "How", "are", "you?"];if (typeof response == "string") { document.write("The response is - ", response); } else { document.write("The response values are : ");// Traversing the array for (let val of response) { document.write(val, " "); } } </script></body></html></pre>Output
The response values are : Hello World! How are you?JavaScript Arrays and typeof Operator
Arrays, despite being a type of object in JavaScript, have a distinct behavior with the typeof operator.
let numbers =[1,2,3]; typeof numbers;// Output: 'object'Arrays return "object" when using typeof operator, so for precise array detection, it's often better to use Array.isArray().
Example
<html><body><div id="output"></div><script>let numbers = [1, 2, 3]; document.getElementById("output").innerHTML = Array.isArray(numbers); </script><p>Set the variable to different value and then try...</p></body></html></pre>Output
true Set the variable to different value and then try..