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.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var val1 = 100;
var val2 = "sourav";
alert("Type of val1:- " + typeof val1 + " Type of val2:- " + typeof val2);
</script>
</form>
</body>
</html>

Output

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.

<form id="form1" runat="server">
<script>
alert(abc);
var abc = 100;
</script>
</form>

Sample output

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.

<form id="form1" runat="server">
<script>
var val;
alert("Status of val is :- " + val);
</script>
</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.

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.

<body>
<form id="form1" runat="server">
<script>
function abc() {
return;
}
alert("Return from abc function is:- " + abc());
</script>
</form>
</body>

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.

<form id="form1" runat="server">
<script>
alert(null === undefined)
</script>
</form>

The output says that they are not the same by showing false.

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.

3 Comments

Join the conversation! Your thoughts help the community grow.

Sourav Kayal13y ago
yes sir, one dedicated article on "var" keyword will come soon..
Sam Hobbs13y ago
Perhaps you could write another article explaining why it is a good practice to always declare a variable using "var" but I think in the context of this article "var" has little use. In JavaScript, the important thing is to assign a value to a variable. I think that for this article it would help to put more emphasis on assigning a value.
Sam Hobbs13y ago
You say "No, undefined is not an object , it's a property of the object". Yet something that is not defined is not an object. Language specifications tend to be carefully written using the most relevant and precise words possible. The standard version of JavaScript is ECMAScript. The ECMAScript Language Specification calls "undefined" a type and it calls "undefined" a value but I do not see where it is called a property. The ECMAScript Language Specification is at: http://www.ecma-international.org/publications/standards/Ecma-262.htm