In this article we will learn the concept of immediately invoked function in JavaScript.
Immediately invoked function in JavaScript
In this article we will learn one beautiful concept of
JavaScript is called immediately invoked function. The beauty of immediately invoked
function is that, when page will load the function will execute, no need to
call the function explicitly. In this article we will try to understand the
implementation of immediately invoked function.
<%@ 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>
(function () {
console.log('Immediately invoked function');
})();
</script>
</form>
</body>
</html>
Immediately invoked function is anonymous in type, we can
see that there is no function name and the reason is , there is no need to call
this function explicitly.
More than one immediately invoked function
We can define more than one immediately invoked function in
single page. Here is sample example.
<%@ 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>
(function () {
console.log('first function');
})();
(function () {
console.log('second function');
})();
</script>
</form>
</body>
</html>
we are seeing that both functions are executing at the time of
page load.
Pass value to immediately invoked function
At the time of function execution we can pass value to
immediately invoked function. In this example we are passing string argument to
the function.
<%@ 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>
(function (name) {
console.log('name is:- ' + name);
})('Sourav Kayal');
</script>
</form>
</body>
</html>
Immediately invoke function in JQuery
In our previous example we have seen the example of immediately
invoke function in JavaScript. In this example we will implement same functionality
with the help of JQuery library.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="Jquery.js"></script></head>
<body>
<form id="form1" runat="server">
<script>
$(document).ready(function () {
console.log('Function executed');
});
</script>
</form>
</body>
</html>
In JQuery the function definition is little bit differing
than normal JavaScript immediately invoke function.
Conclusion:-
In this article we have learned the concept of immediately
invoked function in JavaScript. Hope you have understood the concept. In coming
articles, we will learn few more concepts of JavaScript.