Difference between function declaration and function expression – Sibeesh Passion https://www.sibeeshpassion.com My passion towards life Wed, 21 Oct 2015 08:53:58 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png Difference between function declaration and function expression – Sibeesh Passion https://www.sibeeshpassion.com 32 32 Function Declaration And Function Expression https://www.sibeeshpassion.com/function-declaration-and-function-expression/ https://www.sibeeshpassion.com/function-declaration-and-function-expression/#disqus_thread Wed, 21 Oct 2015 00:59:00 +0000 http://sibeecst_passion.com/?p=10821 In this post we will see the basic difference between function declaration and function expression in jQuery and JavaScript. Sometimes the developer’s getting confused between these two topics(Shhhh I ma saying about the starters like me). Basically both are same. Only difference is depends on how you handle or treat these two. We will see a basic demo here to ensure the difference between function declaration and expression. I hope you will like this.

Here I am using jQuery 2.0.2 version, you can use whichever version you like.

Background

In my projects I am using both function declarations and function expressions. So I thought to highlight some basic difference between them, so that it may help someone.

Basic Difference Between Function Declaration And Function Definition

  • Function declarations are loaded first, that is before any codes
  • Function expressions are loaded when the interpreter reaches that particular line of code.
  • Basically we can call any code only after the declarations are loaded

    • We will try to find out this difference with a demo.

    Using the code

    First thing you need to do is create a page.

    [html]
    <!DOCTYPE html>
    <html>
    <head>
    <title>Function Declaration VS Expression – Sibeesh Passion</title>
    </head>
    <body>
    Function Declaration VS Expression – Sibeesh Passion
    </body>
    </html>
    [/html]

    Then you need to include the script needed.

    [js]
    <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
    [/js]

    Now we will create a function declaration as follows.

    [js]
    <script>
    $(document).ready(function () {
    alert(myFunctionDeclaration());
    function myFunctionDeclaration()
    {
    return ‘myFunctionDeclaration is called’;
    }
    });
    </script>
    [/js]

    What will be the output of this?

    Function Declaration And Function Expression

    Function Declaration And Function Expression

    Now we will change our script as follows.

    [js]
    <script>
    $(document).ready(function () {
    function myFunctionDeclaration()
    {
    return ‘myFunctionDeclaration is called’;
    }
    alert(myFunctionDeclaration());
    });
    </script>
    [/js]

    This will also returns the same output.

    Function Declaration And Function Expression

    Function Declaration And Function Expression

    Now we will create a function expression as follows.

    [js]
    <script>
    $(document).ready(function () {
    alert(myFunctionExpression());
    var myFunctionExpression = function()
    {
    return ‘myFunctionExpression is called’;
    }
    });
    </script>
    [/js]

    What may be the output of this? We will check it now.

    Function Declaration And Function Expression

    Function Declaration And Function Expression

    As you can see, instead of giving an alert it is throwing an error Uncaught TypeError: myFunctionExpression is not a function in the console. It is just because the function expression is not yet loaded. You are trying to call that expression before it loads.

    So what we can do to make it work? Simple, just change the script as follows.

    [js]
    <script>
    $(document).ready(function () {
    var myFunctionExpression = function()
    {
    return ‘myFunctionExpression is called’;
    }
    alert(myFunctionExpression());
    });
    </script>
    [/js]

    Now you will get an alert as follows.

    Function Declaration And Function Expression

    Function Declaration And Function Expression

    That is all. I hope you know the difference between function declaration and function expression now.

    Complete Code

    [html]
    <!DOCTYPE html>
    <html>
    <head>
    <title>Function Declaration VS Expression – Sibeesh Passion</title>
    <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
    <script>
    $(document).ready(function () {

    var myFunctionExpression = function()
    {
    return ‘myFunctionExpression is called’;
    }
    alert(myFunctionExpression());
    alert(myFunctionDeclaration());
    function myFunctionDeclaration()
    {
    return ‘myFunctionDeclaration is called’;
    }
    });
    </script>
    </head>
    <body>
    Function Declaration VS Expression – Sibeesh Passion
    <div class="first"></div>
    </body>
    </html>

    [/html]

    Conclusion

    Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

    Your turn. What do you think?

    A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

    Kindest Regards
    Sibeesh Venu

    ]]>     https://www.sibeeshpassion.com/function-declaration-and-function-expression/feed/ 6