Advance JavaScript: Understand Undefined in JavaScript

In this article we will understand undefined keyword (Let's use the term keyword) of JavaScript. After reading this article you will understand the both keyword in and it's functionality.

Welcome to the "Advanced JavaScript" article series. In this series we are talking about JavaScript and we understood various interesting concept of JavaScript. Here is complete URL set.

In this article we will understand "undefined" keyword (Let's use the term keyword) of JavaScript. After reading this article you will understand the both keyword in and it's functionality.

Let's understand "undefined"

The dictionary meaning of undefined is "not defined".  In terms of JavaScript it remains the same, although in JavaScript something that is not yet defined can be defined later. Before continuing with the eplanation, one thing needs to be clarified. JavaScript is a loosely typed language. That means there is no pre-defined data type in JavaScript as in C, C++ or C#.  And everything is possible by the "var" keyword.  Yes, we can define an integer, string, boolean and many more types using the "var" keyword. The syntax is as in the following.

var a =100;
var b ="Sourav";
var c = false;

Very fine, the concept is clear. var is applicable for any data type. Now, the next concept is whether the "var" keyword can be transfered to an actual type? The answer is yes, it can be converted. Let's see that in an example. Have a look at the following code.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head id="Head1" runat="server">  
  5. </head>  
  6. <body>  
  7.     <form id="form1" runat="server">  
  8.         <script>  
  9.                 var val1 = 100;  
  10.             var val2 = "sourav";  
  11.             alert("Type of val1:- " + typeof val1 + " Type of val2:- " + typeof val2);  
  12.         </script>  
  13.     </form>  
  14. </body>  
  15. </html>
Here is the output.

Var Keyword
We are using the typeof keyword to determine the type of val1 and val2 that we have declare using the "var" keyword in the program. And in the output we are seeing that the actual data type of val1 and val2 has been converted to a number and a string.

Again, this is to clarify our understanding. At parse time var is converted into an actual type.  In our previous article we saw that when we define any object in JavaScript, it attaches to the window object with a practical implementation.  The same is true for this example.

Now, the question is, what is the relationship with "undefined" and this example.  Let's proceed with more examples.
  1. <form id="form1" runat="server">  
  2. <script>   
  3.     alert(abc);  
  4.     var abc = 100;   
  5. </script>  
  6. </form>
Here is the sample output.

Undefined in JavaScript
It's showing that abc is not defined though we have defined abc in the next line. This happens because JavaScript is not a compiled language. The alert is trying to find abc from the window object and when it's not finding it it's throwing that "abc" is not defined in the window object.

  1. <form id="form1" runat="server">  
  2.     <script>  
  3.         var val;  
  4.         alert("Status of val is :- " + val);  
  5.    </script>  
  6. </form>
Unlike the previous example , here we have declared the "val" variable first then attempted to print it's value.  It's undefined because the value id is still not defined as a variable.

Undefined with Var Value
If we do not specify any return value from a function in JavaScript then it always returns undefined. Let's see that in an example. Here is the sample code. 

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <script>  
  4.             function abc() {  
  5.             return;  
  6.         }  
  7.         alert("Return from abc function is:- " + abc());  
  8.     </script>  
  9.     </form>  
  10. </body>

Undefined with Function

The output says that when we are not returning anything from a function then it's always "undefined".

Are undefined and null the same?

Undefined and null are not the same; undefined is not equal to null. Let's try with an sample example to check that.

  1. <form id="form1" runat="server">  
  2. <script>  
  3.  alert(null === undefined)   
  4. </script>  
  5. </form>
The output says that they are not the same by showing false.

undefined and Equal

The last but not least question is, is undefined an object or something else? No, undefined is not an object , it's a property of the object (please refer to w3cschools.com for farther reference).

Conclusion

In this article we saw the used of "undefined" in JavaScript, I hope you have understood that fact.  Follow this article series to get more clarification of JavaScript.