Introduction
Let us learn the differences between a traditional function and an arrow function expression in JavaScript? If not, then prepare to learn the differences in this article. We will discuss the differences between both and share the pros and cons to help us better understand when is the right time to use one over the other.
Table Of Contents
- Introduction
- Function Expression
- Arrow Function Expression
- Conclusion
Function Expressions
In JavaScript, there are a few ways we can declare a function. One widespread and traditional way is function expressions. We can name our expression whatever we want to, but it's recommended to name functions precisely what it is intended to do for best practice. To help prevent confusion later on.
So how exactly do we accomplish this? Well, let us look at how a function expression is structured.
Above, we have a brief description of what a function expression is. We will now create a few function expressions to understand its features and purpose.
First we need to come up with a name for our expression. For this example we will use name
as our expression name.
const name;
Now that we have our expression name, we can assign a function to it.
const name = function() {};
We also can declare our function with or without default parameters. For this example, we will add a single parameter that will name our output. We can name our parameter whatever we would like. It is helpful to name the parameter what we are asking for. For this example, we will use string
as our parameter
const name = function(string){};
Now that we have passed in a parameter we can write in our function body to return an output with our parameter.
const name = function(string) {
return "Hello " + string + ", how are ya?"
}
We have just created our function expression. We can now invoke our function and pass in our name and get an output.
name('oscar'); // output "Hello oscar, how are ya?"
We have options when it comes to naming our functions. We can create anonymous function expressions by not including a name to our function. Just like our previous example
Here we simply assign a anonymous function to our expression.
const name = function() {}
If we wanted to provide a name for our function to create a named function.
function printName() {}
We have two ways to create our functions. We can assign it to a variable, or we can give our function a name and use it as so.
// assign to variable
let sum = function (a,b) { return a + b};
// giving our function a name
function sum(a,b) { return a + b };
When we assign our function to a variable, we are able to reassign that function to another variable. If we declare our function with a name, we can not change that function name else where. Here are a few more things we can benefit from using function expressions.
Arrow Function Expression
Working with arrow functions at first might seem scary. However, when we get the hang of it, we will realize that it is not so scary after all. The mathematical signs might make it look confusing at first =>
or arrow,
but it is not so different from using a traditional function.
Arrow functions allow us to create functions in a simpler form but has restrictions compared to our traditional function. Let's take a look at the Arrow Function Syntax
to have a better understanding.
Here is a basic arrow function
syntax
param => expression
Notice how we don't need parentheses around our parameter if it's a single parameter, followed by our arrow
sign, and then our function body expression. If we wanted to add more parameters then we would need to wrap them inside parentheses.
(param1, param2) => expression
A few things to note when working with arrow functions
, it doesn't have its own this
keyword binding. Should not be used for methods, and can't use it as constructors.
So you may ask, whats the purpose of using the arrow function
then? Here are a few examples of us converting traditional functions to arrow functions.
Traditional Function to Arrow Function
function (a) {
return a + 100;
}
We will remove our function
keyword and place an arrow
between our argument and body.
(a) => {
return a + 100;
}
We can now remove our body braces {}
(a) => return a + 100;
Lastly we remove our parentheses ()
a => return a + 100;
Here is another example with multiple parameters.
// traditional function
function (a,b) {
return a + b;
}
// arrow function
(a,b) => return a + b;
Conclusion
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 efficient.
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 that should be made to help me and others. Thank you for your time for sticking this far!
Top comments (5)
This isn't really explained clearly. You have missed that you can also assign named functions to a variable:
This can actually be a good idea sometimes as (depending on the environment), stack traces can be easier to read if you give functions names. You are correct in stating that a function's name cannot be changed after the function is defined though.
While writing this post I discovered that (at least in Chrome and Firefox) - if you create an 'anonymous' function in an assignment, it is not actually anonymous - it has the variable's name automatically given to it at the time of assignment:
So, it would seem that true anonymous functions are ones that are created outside of an assignment:
Thanks for the feedback! I'll make sure to make some changes.
You have an error in your arrow function examples. When omitting the curly braces
{}
from an arrow function body, i.e., single-line arrow functions, the results are automatically returned. (This, by the way, is a great feature of arrow functions as it reduces code.)a => return a + 100;
should bea => a + 100;
Iām new to JavaScript but this helped clear out overall doubts regarding this :)