Function Expression vs Arrow Function Expression
Tags: javascript, webdev, codenewbie, beginners
Published: 2022-01-04 19:47:56

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asj0hn8hmjh7a20bbycu.jpg)
 
 

## 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#expressions) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j32tscwn1c5y5zx8g1f4.jpg)

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?" 
```
![expression syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovnr3p4whp3rclf80ujc.jpg)

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. 

![function expression details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8edn4srqhpxj1b2hy36.jpg)
 

## Arrow Function Expression 

![Arrow Function example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4acp8k0w7ozvc38pvdn.jpg)
 
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;
```

![arrow function details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c0p3zfu4tdm38zaj8wo.jpg)
 

### 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](https://twitter.com/CleverOscarDev)
- [Github](https://github.com/CleverOscar)
- [LinkedIn](https://www.linkedin.com/in/clever-oscar/)