What is a Javascript Function Expression? If you get confused with the phrases Function Declarations and Function Expressions, then you came to the right place.
Today we are going to dig deeper into what Javascript Function Expressions are and what their true meaning is. This is a fundamental part of Javascript so this is low-level stuff, great for beginners and anyone learning more about functions. If I get good feedback on this article, I would love to make a full series on just Javascript Functions because there are lots to talk about!
Function Expressions
When working with functions, we probably already worked with Function Expression's without even thinking about it. But do you really know what is going on under the hood when working with functions? How it's evaluated, scope, local variables, etc.? If so then this article should be a refresher, if not then get ready to learn how to work with Function Expressions.
Here is an example of what a Function Expression looks like
const square = function(x) { return x * x };
It may look very familiar to common Javascript users already and might have not even known about it. When we look at our Function Expression it looks a lot like a regular function. But there is a difference between a Function Declaration and Function Expressions
How does it work?
Function expressions have a few side effects that we should keep in mind whenever trying to use them. For example, you may have already noticed with our first example, our function didn't have a name when we declared it, we assigned it to a variable like so e.g.
// here we assign our function expression to
// a const variable named square
const square = function(x) { return x * x }
This doesn't mean that you can't add a name to the function though, you still have that option. This usually helps us when we deal with recursion, which is another big topic.
You can even invoke your function immediately after you defined it.
let square = (function(x){return x * x});
So what's the difference again?
There are many ways to define a function but Function Declarations and Function Expressions look very alike and can sometimes throw confusing errors if we don't know what our code is actually doing. This is why it is very important to understand the fundamentals of javascript before jumping into Advanced Techniques.
A Function Expression does not declare a variable, that is up to the developer to assign the newly defined function object to a variable (const, let, var) if you think about using it in various locations. Try to make it a habit when creating function expressions to use the const variable to avoid duplicate names or overwrites.
Do I have to include a name?
Naming your function expressions is optional but comes with a helper. When you add a name to your function, the local scope for that function will bind the name along with the function object. But most of the time when functions are defined as Expressions they don't need any names to make their definition more compact.
Conclusion
When you decided to use the declaration form to define your functions, the function object is created before the code that contains them starts to run, this allows our functions to be hoised so that we can call these functions above the definition statement. THIS IS NOT TRUE for Function Expressions though, these functions don't exist until the expression that defines them is evaluated.
I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficiently.
These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe should be made to help me and others. Thank you for your time in sticking this far!
Feel free to give me a follow on Twitter and get connected on LinkedIn.
Top comments (0)