Function Declaration And Function Expression

Sibeesh Passion

Rate me:

3.14/5 (3 votes)

21 Oct 2015CPOL2 min read

13.4K

Function Declaration And Function Expression

In this post, we will see the basic difference between function declaration and function expression in jQuery and JavaScript. Sometimes the developers get confused between these two topics (Shhhh, I am talking about beginners like me). Basically both are the same. Only difference is it 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 of highlighting some basic differences between them so that it may help someone.

Basic Differences Between Function Declaration And Function Definition

Function declarations are loaded first, that is before any code
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.

JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Function Declaration VS Expression - Sibeesh Passion</title>
</head>
<body>
   Function Declaration VS Expression - Sibeesh Passion
</body>
</html>

Then, you need to include the script needed.

JavaScript

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

Now, we will create a function declaration as follows:

JavaScript

<script>
        $(document).ready(function () {
		   alert(myFunctionDeclaration());
           function myFunctionDeclaration()
		   {
				return 'myFunctionDeclaration is called';
		   }		   
        });
    </script>

What will be the output of this?

Function Declaration And Function Expression

Now we will change our script as follows:

JavaScript

<script>
        $(document).ready(function () {
           function myFunctionDeclaration()
		   {
				return 'myFunctionDeclaration is called';
		   }
		   alert(myFunctionDeclaration());		   
        });
    </script>

This will also return the same output.

Function Declaration And Function Expression

Now, we will create a function expression as follows:

JavaScript

<script>
        $(document).ready(function () {
		  alert(myFunctionExpression());
		   var myFunctionExpression = function()
		   {
				return 'myFunctionExpression is called';
		   }		   
        });
    </script>

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

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 can we do to make it work? Simple, just change the script as follows:

JavaScript

<script>
        $(document).ready(function () {
                   var myFunctionExpression = function()
		   {
				return 'myFunctionExpression is called';
		   }
		   alert(myFunctionExpression());	   
        });
    </script>

Now, you will get an alert as follows.

Function Declaration And Function Expression

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

Complete Code

JavaScript

<!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>

Conclusion

Did I miss anything that you may think is needed? Could you find this post as useful? I hope you liked this article. Please share 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.

This article was originally posted at http://sibeeshpassion.com/function-declaration-and-function-expression

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Sibeesh Passion

Software Developer

Germany

I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP 3 times, C# Corner MVP 5 times, DZone MVB. I always love to learn new technologies, and I strongly believe that the one who stops learning is old.

My Blog: Sibeesh Passion
My Website: Sibeesh Venu

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Function Declaration And Function Expression

Background

Basic Differences Between Function Declaration And Function Definition

Using the Code

Complete Code

Conclusion

License

Comments and Discussions