Immediately invoke function in JavaScript

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 2260 red flag
Rating: 5 out of 5  
 2 vote(s)

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.

 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Posted by: Sheonarayan on: 11/24/2013 | Points: 25
Good one Sourav.

The short form of jQuery (document).ready is below

 $(function() {
// your code goes here
});

Looks clean and handy :)

Thanks
Posted by: Sourav.Kayal on: 11/24/2013 | Points: 25
Thanks sir, for your addition.

Login to post response

Comment using Facebook(Author doesn't get notification)