Post
Ask Question

Advance JavaScript: Understand Undefined in JavaScript

Introduction

 
Welcome to the "Advanced JavaScript" article series. In this series, we are talking about JavaScript and we understood the various interesting concepts of JavaScript. Here is the complete URL set.
In this article we will understand the "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 explanation, 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 c = false;
var b ="Sourav";
 
Very fine, the concept is clear. var is applicable for any data type. Now, the next concept is whether the "var" keyword can be transferred 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> 
    Output
     
    Var Keyword
     
    We are using the typeof keyword to determine the type of val1 and val2 that we have declared 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 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> 
      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 a 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 on JavaScript.


      Similar Articles