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.
<!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.
<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
Now, we will create a function declaration as follows:
<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:
<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:
<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:
<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
<!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.
