How to check the type of a variable or object in JavaScript?
JavaScript is a loosely typed programming language, which means there are no such rules for declaring variable types. A variable can store multiple data types in a program, so it is important 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. typeof Operator accepts a variable and returns its type in string format.
In addition to the typeof operator, JavaScript also provides the instanceof operator to check the type of a variable or object. instanceof The operator accepts two parameters: the object to be checked and the constructor of the type to be checked. This operator returns true if the constructor is of type object.
Use typeof operator
Thetypeof operator is a unary operator that accepts a parameter and returns a string indicating the parameter type. For example, the typeof operator can be used to check the type of a variable or object.
grammar
typeof variable_name
In the above syntax, variable_name is the name of the variable whose type is to be determined.
The typeof operator can return one of the following strings -
"number" represents number
"string" means string
Boolean value "boolean"
"Undefined" means an undefined value
"object" means objects (including arrays and functions)
"symbol" for symbols (new in ECMAScript 2015)
Example
In this example, we use the typeof operator to check the type of a variable or object in JavaScript. We declared multiple variables of different types such as numbers, strings, booleans, etc. We display these variables on the web page. We used a click event handler on the button to check the type of the variable. As long as the user clicks the button, he can see all the variables and their types on the web page. The typeof operator helps determine the type of a variable or object before performing a specific operation. For example, you can use it to ensure that a variable is a number before performing arithmetic, or to ensure that a variable is a string before concatenating it with another string.
<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 a ' + typeof un + ' </li> <li> let n = null is a ' + typeof n + ' </li> <li> let arr = [1, 2, 3] is a ' + typeof arr + ' </li> <li> let func = function () {} is a ' + typeof func + ' </li> </ul> '
}
</script>
</body>
</html>
Use instanceof operator
In JavaScript, the instanceof operator is used to determine the type of an object at runtime. It returns a Boolean result indicating whether the object is an instance of a specific class.
grammar
object_name instanceof object_constructor
In the above syntax, object_name is the name of the object whose type you want to determine.
Example
In this example, we use the instanceof operator to check the type of a variable or object in JavaScript. We declare a string type variable using the String class constructor and a custom class object "myClassObject" which is an object of "myClass" and display them on the web page. We use a click event handler on the button to check the type of object and display it on the web page.
<html>
<body>
<h2>Checking the <i> type of a variable or object </i> in JavaScript</h2>
<h4>The object variables are as follows:</h4>
<ul>
<li>let str = new String('Hello World!')</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!')
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 is an instance of String: ' + (str instanceof String) + ' </li> <li> str is an instance of MyClass: ' + (str instanceof MyClass) + ' </li> </ul>'
root.innerHTML += ' <ul> <li> myClassObject is an instance of String: ' + (myClassObject instanceof String) + ' </li> <li> myClassObject is an instance of MyClass: ' + (myClassObject instanceof MyClass) + ' </li> </ul>'
}
</script>
</body>
</html>
typeof and instanceof operators only sometimes return the expected results when used with certain objects. For example, the typeof operator returns "object" for arrays, even if they are an object type in JavaScript. To properly check if a value is an array, you can use the Array.isArray() method.
The above is the detailed content of How to check the type of a variable or object in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
The difference in console.log output result: Why are the two calls different?
Apr 04, 2025 pm 05:12 PM
In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website?
Apr 04, 2025 pm 05:36 PM
Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...
TypeScript for Beginners, Part 2: Basic Data Types
Mar 19, 2025 am 09:10 AM
Once you have mastered the entry-level TypeScript tutorial, you should be able to write your own code in an IDE that supports TypeScript and compile it into JavaScript. This tutorial will dive into various data types in TypeScript. JavaScript has seven data types: Null, Undefined, Boolean, Number, String, Symbol (introduced by ES6) and Object. TypeScript defines more types on this basis, and this tutorial will cover all of them in detail. Null data type Like JavaScript, null in TypeScript
Can PowerPoint run JavaScript?
Apr 01, 2025 pm 05:17 PM
JavaScript can be run in PowerPoint, and can be implemented by calling external JavaScript files or embedding HTML files through VBA. 1. To use VBA to call JavaScript files, you need to enable macros and have VBA programming knowledge. 2. Embed HTML files containing JavaScript, which are simple and easy to use but are subject to security restrictions. Advantages include extended functions and flexibility, while disadvantages involve security, compatibility and complexity. In practice, attention should be paid to security, compatibility, performance and user experience.
