JavaScript – typeof Operator


JavaScript – typeof Operator

”;


Previous

Next

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.

typeof 10; // returns ''number''
typeof ''Hello World''; // returns ''string''
typeof true; // returns ''boolean''
typeof {name:"Tutorialspoint"}; // returns ''object''
typeof function foo(){};// returns ''function''
typeof undefined; // returns ''undefined''
typeof null; // returns ''object''
typeof Symbol(); // returns ''symbol''
typeof 10n; // 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.

typeof 10; //returns "number";
typeof -10; //returns "number";
typeof 0; //returns "number";
typeof 10.20; //returns "number";
typeof Math.LN10; //returns "number";
typeof Infinity; //returns "number";
typeof NaN; //returns "number";
typeof Number(''1''); //returns "number";
typeof Number(''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>

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";
typeof String(10); //returns "string";
typeof typeof 2; //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>

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.

typeof true; //returns "boolean";
typeof false; //returns "boolean";
typeof Boolean(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>

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”.

typeof Symbol(); //returns "symbol";
typeof Symbol("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>

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.

typeof undefined; //returns "undefined";
typeof null; //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>

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";
typeof new Date(); //returns "object";
typeof new String("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>

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.

const myFunc = function(){return "Hello world"};
typeof myFunc; //returns "function";
const func = new Function();
typeof func; //returns "function";
class myClass {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>

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.

typeof 100n; // 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>

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>

Output

true
Set the variable to different value and then try..



Print Page




Previous



Next


Advertisements

”;

Leave a Reply

Your email address will not be published. Required fields are marked *