Understand “undefined” ,“NaN” and “null“ in JavaScript

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 3162 red flag
Rating: 5 out of 5  
 1 vote(s)

In this article we will understand the concept of "undefined", "NaN" and "null" in JavaScript

Understand “undefined” ,“NaN” and “null“ in JavaScript

In this article we will learn the concept of “undefined” ,“NaN” and “null” in JavaScript. Two concepts are very much important to debug any JavaScript application. Let’s try to understand them.

“Undefined” in JavaScript

Before understanding the concept of “undefined” we have to understand the concept of “window” object in JavaScript. “Window” object is called super object in JavaScript which represents the whole window or browser screen. When we create any variable or object, it automatically attach to window object. In other words, if the variable or function is defined then it will attach to window object. In one example we will see the concept.

        <script>
         
            var val = 100;
            console.log(window.val);
           
        </script>


Here we have declared val and then accessing with the help of “window” object. And we are getting value 100.  Now, if the variable is not present in “window” object and if we try to access it, then it will throw “undefined” error. Have a look on below example.

<form id="form1" runat="server">
        <script>
            console.log(window.val);
        </script>
    </form>


Here we did not define “val” variable and we are trying to print the value. As it is not defined in window object, it’s throwing “undefined’ exception. This is true not only in case of variable but also in case of class/object.

So, in conclusion, when we want to access any value which is not defined in window objects it’s throwing “undefined” exception.

“NaN” in JavaScript

The acronym “NaN” is for Not a number. Type conversion is very common operation in any programming language. In JavaScript Number() function is there to convert other data type to number type if compatible.  Now, if the current type is not compatible with number type then it throws “NaN” exception. In this example we are trying to convert string to number and obviously it will not possible in JavaScript. Have a look at the example below .

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <script>
           
            var number = 'not a number';
            console.log('Value is :- ' +  Number(number));
 
        </script>
    </form>
</body>
</html>


We are seeing that it’s throwing NaN exception.

“null” in JavaScript

The concept of “null” is that it is declared but the value is not defined. In this example we are checking the value of “val” with the help of “window” object. It’s showing that the value is “null” means not defined. Then we are checking whether “null” and empty are same or not.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <script>
            var val = null;
            console.log(window.val);
            if (val == "") {
                console.log('empty and null are same');
            }
            else
                console.log('empty and null are not same');
        </script>
    </form>
</body>
</html>


And output is saying that “null” and empty are not same.

Conclusion:- 

In this article we have learned the concept of “undefined”, “NaN’ and “null”. Hope you have understood the concept.

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Posted by: Sheonarayan on: 11/25/2013 | Points: 25
There is something to learn from every article of this JavaScript series Sourav, Thanks a ton for helping me learn.

Keep it up!

Login to post response

Comment using Facebook(Author doesn't get notification)