DEV Community

Cover image for Function Expression vs Arrow Function Expression
Oscar Ortiz
Oscar Ortiz

Posted on

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.

function examples

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.

function expression

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;
Enter fullscreen mode Exit fullscreen mode

Now that we have our expression name, we can assign a function to it.

const name = function() {};
Enter fullscreen mode Exit fullscreen mode

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){};
Enter fullscreen mode Exit fullscreen mode

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?" 
}
Enter fullscreen mode Exit fullscreen mode

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?" 
Enter fullscreen mode Exit fullscreen mode

expression syntax

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() {}
Enter fullscreen mode Exit fullscreen mode

If we wanted to provide a name for our function to create a named function.

function printName() {}
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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.

function expression details

Arrow Function Expression

Arrow Function example

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 
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

We will remove our function keyword and place an arrow between our argument and body.

(a) => { 
  return a + 100;
}
Enter fullscreen mode Exit fullscreen mode

We can now remove our body braces {}

(a) => return a + 100;
Enter fullscreen mode Exit fullscreen mode

Lastly we remove our parentheses ()

a => return a + 100;
Enter fullscreen mode Exit fullscreen mode

Here is another example with multiple parameters.

// traditional function

function (a,b) {
  return a + b;
}

// arrow function

(a,b) => return a + b;
Enter fullscreen mode Exit fullscreen mode

arrow function details

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)

Collapse
 
jonrandy profile image
Jon Randy šŸŽ–ļø • Edited

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'
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
jonrandy profile image
Jon Randy šŸŽ–ļø • Edited

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'
Enter fullscreen mode Exit fullscreen mode

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 ) // ''
Enter fullscreen mode Exit fullscreen mode
Collapse
 
cleveroscar profile image
Oscar Ortiz

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

Collapse
 
valzho profile image
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;

Collapse
 
therealmakariuz profile image
TheRealMakariuz

Iā€™m new to JavaScript but this helped clear out overall doubts regarding this :)