Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is NaN in JavaScript?
In this tutorial, we will learn about NaN in JavaScript. NaN is nothing more than a property of the global object which stands for Not a Number. It is mainly used to check whether the entered value is a number or not. The NaN and Number. NaN both are same, so do not confuse next time if Number. NaN is written in any program as it is similar to NaN. The NaN is a property that is rarely used in any program because it is not a good practice to use NaN to identify anything in the program.
There is a global isNaN() method to accomplish this task, which returns true if the argument passed to it is not a number. Otherwise, it will return false.
Syntax
The following syntax will show you how you can assign a variable with a value equal to NaN and the syntax of using the isNaN() method in JavaScript −
Number.isNaN
OR
isNaN(Number);
In the above syntax, we have assigned the variable with the NaN value and then check if it is NaN or not with help of the isNaN() method.
Let us understand the use of the isNaN() method and NaN property in detail with help of code examples by implementing them practically.
Algorithm
Step 1 − In the first step of the algorithm, we will define an input tag in the HTML document to get the value entered by the user, so that it can check for any kind of input.
Step 2 − In this step, we will define a button with onclick event which will call a callback function later when the button is clicked by the user.
Step 3 − In the next step, we define a JavaScript function that will be passed as the call-back function to the onclick event of the button defined in the previous step.
Step 4 − In the last step, we will grab the value entered by the user and check it for a number using the isNaN() method and write the logic to output the suitable text on the screen for the condition provided.
Example 1
To find out whether a value is NaN, use the Number.isNaN() or isNan() method. Here’s an example to check −
<!DOCTYPE html> <html> <body> <button onclick="display()">Check</button> <p id="test"></p> <script> function display() { var a = ""; a += "isNaN(6234) : " + isNaN(6234); a += "<br>isNaN(-52.1) : " + isNaN(-52.1); a += "<br>isNaN('Hello') : " + isNaN('Hello'); a += "<br>isNaN(NaN) : " + isNaN(NaN); a += "<br>isNaN('') : " + isNaN(''); a += "<br>isNaN(0) : " + isNaN(0); a += "<br>isNaN(false) : " + isNaN(false); document.getElementById("test").innerHTML = a; } </script> </body> </html>
Example 2
The below example will explain the use of the isNaN() method to check whether the entered value is a number or not a number −
<!DOCTYPE html> <html> <body> <h4> Enter any value: </h4> <input type="text" id="inp1"> <br> <br> <p> Click the below button to check the entered value is a number or not a number (NaN). </p> <p id="result"> </p> <button onclick="display()"> Check here </button> <script> var result = document.getElementById("result"); function display() { var inp1 = document.getElementById("inp1"); var val1 = Number(inp1.value); var check = Number.isNaN(val1); if (check) { result.innerHTML += " The value you entered <b> " + val1 + " </b> is not a number (NaN). <br> "; } else { result.innerHTML += " The value you entered <b> " + val1 + " </b> is a number. <br> "; } } </script> </body> </html>
In the above example, we grabbed the value entered by the user and then convert it to the number using the Number method, which will convert the input value to the number data type if the entered value is an integer. Otherwise, it will convert it into NaN and then check for it inside the isNaN() method and outputs the respective statement.
Let us see one more example where we will assign the NaN value to a variable and work with it.
Algorithm
Step 1 − In the first step, we will add an input tag to the HTML document to get input from the user to check any kind of value.
Step 2 − In the second step, you must define a button tag with an onclick event to call a function once the user clicks the button.
Step 3 − In the last step, we will write our logic to change the value of an already existing variable with NaN under certain conditions and then display the result to the user.
Example 3
The below example will illustrate how you can assign a NaN value to any variable whenever needed −
<!DOCTYPE html> <html> <body> <h2>NaN in JavaScript </h2> <h4> Enter a number: </h4> <input type="number" id="inp1"> <br> <br> <p> Click the below button to check the entered value is a number or not a number (NaN). </p> <p id="result"> </p> <button onclick="display()"> Check here </button> <script> var result = document.getElementById("result"); function display() { var inp = document.getElementById("inp1"); var val = Number(inp.value); if (val < 0 || val > 10) { val = Number.NaN; result.innerHTML += " The value you entered " + inp.value + " is now become <b> " + inp.value + " </b> Not a Number (NaN), because the value is either less than zero or greater than 10. <br> "; } else { result.innerHTML += " The value you entered <b>" + val + " </b> is a valid value. Hence, it is not changed to NaN. <br> "; } } </script> </body> </html>
In this example, we have changed the value of an existing variable to NaN under certain conditions.
In this tutorial, we understand what is the NaN property in JavaScript with help of code examples, whereas in the former one we have checked for the entered input whether it is a number or not a number (NaN). While, in the latter one, we assigned NaN value to an already existing variable in the code.
451 Views
