Welcome to the "Advanced JavaScript" article series. Here we are explaining somewhat conceptual and advanced topics of JavaScript. In our previous two articles we learned the history of JavaScript and also explained objects in JavaScript. You can read them here:
Let's understand the basics of function definitions. In JavaScript we can define functions two ways. The first approach is the traditional function definition, like other languages and the other one is JavaScript's own style. Let's understand them one by one.
Traditional approach to define function
In this section we will see the traditional approach to define function. Nothing special in this, 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">
<title></title>
<script>
function fun() {
alert("Function Call");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" name="Click Me" value="Click Me" onclick="fun();" />
</form>
</body>
</html>
Here is a sample example.
![define function]()
Define function on the fly
This is the JavaScript's way to define functions. In this way at first we will define one variable (object in terms of JavaScript) and then we will attach an anonymous function to it. Have a look at the following code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script>
//Anonymous function
var fun = function () {
alert("Anonymous function");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" name="Click Me" value="Click Me" onclick="fun();" />
</form>
</body>
</html>
Here is sample output.
![define function on fly]()
Ok, we saw two different approaches to define a function. Now, what are the differences between them? Let's explain here.
The first approach is a normal function definition and we can call it from anywhere. Have a look at the following code.
<body>
<form id="form1" runat="server">
<script>
//Normal function
fun();
function fun() {
alert("Normal Function");
}
</script>
</form>
</body>
Here is the output. We see that a function is being called.
![different approaches to define function]()
Now we will apply the same policy for anonymous functions.
<body>
<form id="form1" runat="server">
<script>
fun();
var fun = function () {
alert("Anonymous function");
}
</script>
</form>
</body>
Output ??
![anonymous function]()
Ha.. Ha.. No output. So, the function is not being called. The reason is we are attaching an anonymous function at parse time (the second style) whereas the normal definition (the first style) of function definition is done at runtime.
And as a side effect when we write a function like the following:
fun()
function fun(){
alert("Normal function");
}
The function is created and put into the window. The browser finds the function "fun", creates the function and stores it as "window.fun". For that reason fun can be called before its declaration. Because, when the function is called it is already declared. Let's try to understand with an example.
<body>
<form id="form1" runat="server">
<script>
alert(fun);
function fun() {
}
</script>
</form>
</body>
This is the simple code that will clarify our confusion. Just before function declaration we are checking whether the function is defined. And here is the output.
![window object]()
The output shows that the function is defined, Yes. Keep in mind that before declaration/definition we are calling. Ok , we need to prove one more concept. I previously said that it creates (function) in the window object. Let's prove it. Here is sample code to prove that:
<body>
<form id="form1" runat="server">
<script>
alert(window.fun);
function fun() {
}
</script>
</form>
</body>
In the code above we are trying to access fun from the window object. Because we said that the function is created and attached in the "window" object. Here is the output.
![window object]()
It's showing the function body. In other words, the function was created in the window object. The basic idea is clear.
Now, let's try the same test in the second fashion. Here is our sample code.
<body>
<form id="form1" runat="server">
<script>
alert(fun);
var fun = function () {
}
</script>
</form>
</body>
We are seeing that it's saying that the function "fun" is undefined. In JavaScript if the object is not yet created then it's undefined always.
![undefined Function]()
Let's try to retrieve the function from the window object. Here is the sample code.
<body>
<form id="form1" runat="server">
<script>
alert(window.fun);
var fun = function () {
} </script>
</form>
</body>
And, the output is here. It's undefined, in other words it is still not created in the window object.
![function in JavaScript]()
Conclusion
In this article we saw two different approaches to define functions in JavaScript. Hope you have understood the concept. In a future article we will dig more into JavaScript.
Previous article: Advance JavaScript: play with object in JavaScript