Function Expression vs Arrow Function Expression

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

1. Introduction
2. Function Expression
3. Arrow Function Expression
4. 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!

• Twitter
• Github
• LinkedIn

Comments

[Jon Randy 🎖️]

If we declare our function with a name, we can not change that function name elsewhere

This isn't really explained clearly. You have missed that you can also assign named functions to a variable:

const myFunction = function sayHello() { console.log( }
console.log(myFunction.name) // 'sayHello'

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.

[Jon Randy 🎖️]

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:

const myFunction = function (i) { return i+1 }
console.log(myFunction.name) // 'myFunction'

const anotherFunction = myFunction
console.log(anotherFunction.name) // 'myFunction'

So, it would seem that true anonymous functions are ones that are created outside of an assignment:

console.log( (function() {}).name ) // ''
console.log( (i=>i).name ) // ''

[Oscar Ortiz]

Thanks for the feedback! I'll make sure to make some changes.

[Darren Doyle]

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 be a => a + 100;

[TheRealMakariuz]

I’m new to JavaScript but this helped clear out overall doubts regarding this :)