Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check the type of a variable or object in JavaScript?
JavaScript is a loosely typed programming language, meaning there is no such rule to declare the variable type. A variable can store multiple data types in a program, so it is essential to understand the variable type before using it. In JavaScript, we can use the typeof operator to check the type of a variable or object. The typeof operator takes a variable and returns its type in a string format.
In addition to the typeof operator, JavaScript also provides the instanceof operator to check the type of a variable or object. The instanceof operator accepts two arguments: the object to check and the constructor function of the type you wish to check for. The operator will return true if the constructor function is of the object type.
Using typeof operator
The typeof operator is a unary operator that takes one argument and returns a string indicating the argument's type. For example, the typeof operator can be used to check the type of a variable or object.
Syntax
typeof variable_name
In the above syntax, variable_name is the name of a variable whose type you want to determine.
The typeof operator can return one of the following strings:
"number" for numbers
"string" for strings
"boolean" for booleans
"undefined" for undefined values
"object" for objects (including arrays and null)
"function" for functions
"symbol" for symbols (new in ECMAScript 2015)
"bigint" for BigInt values
Example
In this example, we use the typeof operator to check the type of different variables in JavaScript. We declare multiple variables of different types such as number, string, boolean, etc.
<html>
<body>
<h2>Checking the <i>type of a variable or object</i> in JavaScript</h2>
<h4>The variables are as follows:</h4>
<ul>
<li>let num = 10</li>
<li>let str = "Hello"</li>
<li>let bool = true</li>
<li>let un</li>
<li>let n = null</li>
<li>let arr = [1, 2, 3]</li>
<li>let func = function () {}</li>
</ul>
<button onclick="checkType()">Check Type</button>
<div id="root"></div>
<script>
let num = 10;
let str = 'Hello';
let bool = true;
let un;
let n = null;
let arr = [1, 2, 3];
let func = function () {};
let root = document.getElementById('root');
function checkType() {
root.innerHTML = '<h4>The types of variables are as follows:</h4>';
root.innerHTML += '<ul>' +
'<li>let num = 10 is a ' + typeof num + '</li>' +
'<li>let str = "Hello" is a ' + typeof str + '</li>' +
'<li>let bool = true is a ' + typeof bool + '</li>' +
'<li>let un is ' + typeof un + '</li>' +
'<li>let n = null is an ' + typeof n + '</li>' +
'<li>let arr = [1, 2, 3] is an ' + typeof arr + '</li>' +
'<li>let func = function () {} is a ' + typeof func + '</li>' +
'</ul>';
}
</script>
</body>
</html>
Using instanceof operator
In JavaScript, the instanceof operator is used to determine whether an object is an instance of a specific constructor function or class. It returns a boolean result indicating whether the object is an instance of the specified type.
Syntax
object_name instanceof constructor_function
In the above syntax, object_name is the name of an object whose type you want to determine, and constructor_function is the constructor you want to test against.
Example
In this example, we use the instanceof operator to check the type of objects in JavaScript. We create objects using different constructor functions and test them against various types.
<html>
<body>
<h2>Checking the <i>type of objects</i> using instanceof</h2>
<h4>The object variables are as follows:</h4>
<ul>
<li>let str = new String('Hello World!')</li>
<li>let arr = [1, 2, 3]</li>
<li>let myClassObject = new MyClass()</li>
</ul>
<button onclick="checkType()">Check Type</button>
<div id="root"></div>
<script>
let str = new String('Hello World!');
let arr = [1, 2, 3];
class MyClass {}
let myClassObject = new MyClass();
let root = document.getElementById('root');
function checkType() {
root.innerHTML = '<h4>The types of objects using instanceof operator:</h4>';
root.innerHTML += '<ul>' +
'<li>str instanceof String: ' + (str instanceof String) + '</li>' +
'<li>str instanceof Object: ' + (str instanceof Object) + '</li>' +
'<li>arr instanceof Array: ' + (arr instanceof Array) + '</li>' +
'<li>arr instanceof Object: ' + (arr instanceof Object) + '</li>' +
'<li>myClassObject instanceof MyClass: ' + (myClassObject instanceof MyClass) + '</li>' +
'<li>myClassObject instanceof Object: ' + (myClassObject instanceof Object) + '</li>' +
'</ul>';
}
</script>
</body>
</html>
Limitations and Special Cases
The typeof and instanceof operators may not always return the expected result when used with certain objects. Here are some important limitations to be aware of:
typeof nullreturns "object" (this is a known JavaScript quirk)typeof arrayreturns "object" even though arrays are a special type of objectinstanceofdoesn't work across different frames or windows
To properly check if a value is an array, you should use the Array.isArray() method instead of typeof or instanceof.
Example: Checking Arrays Properly
<html>
<body>
<h2>Proper Array Detection</h2>
<button onclick="checkArray()">Check Array</button>
<div id="output"></div>
<script>
function checkArray() {
let arr = [1, 2, 3];
let obj = {a: 1, b: 2};
let output = document.getElementById('output');
output.innerHTML = '<h4>Array Detection Results:</h4>' +
'<ul>' +
'<li>typeof arr: ' + typeof arr + '</li>' +
'<li>arr instanceof Array: ' + (arr instanceof Array) + '</li>' +
'<li>Array.isArray(arr): ' + Array.isArray(arr) + '</li>' +
'<li>Array.isArray(obj): ' + Array.isArray(obj) + '</li>' +
'</ul>';
}
</script>
</body>
</html>
Conclusion
Use typeof for checking primitive types and instanceof for checking object types. For arrays, always use Array.isArray() for reliable detection. Understanding these operators helps you write more robust JavaScript code that handles different data types correctly.
12K+ Views
