Post
Ask Question

Function Declaration And Function Expression in jQuery

Sometimes developer’s get confused between these two topics (I am saying about the starters like me). Basically both function declaration and function expression are same. Only difference 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 project I am using both function declarations and function expressions. So I thought to highlight some basic difference between them, so it may help someone.

The 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.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Function Declaration VS Expression - Sibeesh Passion</title>  
  6. </head>  
  7.   
  8. <body> Function Declaration VS Expression - Sibeesh Passion </body>  
  9.   
  10. </html>   

Then you need to include the script needed.

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

Now we will create a function declaration as follows.

  1. <script>  
  2.     $(document).ready(function()  
  3.     {  
  4.         alert(myFunctionDeclaration());  
  5.   
  6.         function myFunctionDeclaration()  
  7.         {  
  8.             return 'myFunctionDeclaration is called';  
  9.         }  
  10.     });  
  11. </script>   

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.

  1. <script>  
  2.     $(document).ready(function()  
  3.     {  
  4.         function myFunctionDeclaration()  
  5.         {  
  6.             return 'myFunctionDeclaration is called';  
  7.         }  
  8.         alert(myFunctionDeclaration());  
  9.     });  
  10. </script>   

This will also return the same output.

Function Declaration And Function Expression
Now we will create a function expression as follows.

  1. <script>  
  2.     $(document).ready(function()  
  3.     {  
  4.         alert(myFunctionExpression());  
  5.         var myFunctionExpression = function()  
  6.         {  
  7.             return 'myFunctionExpression is called';  
  8.         }  
  9.     });  
  10. </script>   

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.
  1. <script>  
  2.     $(document).ready(function()  
  3.     {  
  4.         var myFunctionExpression = function()  
  5.         {  
  6.             return 'myFunctionExpression is called';  
  7.         }  
  8.         alert(myFunctionExpression());  
  9.     });  
  10. </script>   

Now you will get an alert as follows.

Function Declaration And Function Expression

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

Complete Code

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Function Declaration VS Expression - Sibeesh Passion</title>  
  6.     <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>  
  7.     <script>  
  8.         $(document).ready(function()  
  9.         {  
  10.             var myFunctionExpression = function()  
  11.             {  
  12.                 return 'myFunctionExpression is called';  
  13.             }  
  14.             alert(myFunctionExpression());  
  15.             alert(myFunctionDeclaration());  
  16.   
  17.             function myFunctionDeclaration()  
  18.             {  
  19.                 return 'myFunctionDeclaration is called';  
  20.             }  
  21.         });  
  22.     </script>  
  23. </head>  
  24.   
  25. <body> Function Declaration VS Expression - Sibeesh Passion  
  26.     <div class="first"></div>  
  27. </body>  
  28.   
  29. </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?

If you have any questions, then please mention in the comments section.

Read this article in my blog here.


Similar Articles