(Arrow, Functions) => in Javascript
Tags: javascript
Published: 2021-10-17 05:36:46

Thanks to ES6 we have an alternative way to declare functions in our JavaScript code. The syntax is quite a bit different than the traditional way but once you get the hang of it you'll fall in love. This article will be a short and sweet overview of arrow functions. Let me know in the comments if you like this short and example based article or if you like more detailed explanations.

##What is an Arrow Function
An Arrow function is nothing but a short hand way for declaring a function. The easiest way to get a grasp of this syntax is to convert the traditional function declaration into an arrow function.

```javascript
function sayName(name){
console.log(name)
}
```
**First:** We do not need the `function` keyword so lets remove it and assign the function to a variable

```javascript
function sayName(name){
console.log(name)
}

//arrow conversion
let sayName = (name){
console.log(name)
}
```
**Second:** We are getting close. Instead of using the `(){}` we use `=>`. I wonder where it gets its name from?? Lets changes those out and move everything on one line.

```javascript
function sayName(name){
console.log(name)
}

//arrow conversion completed
let sayName = name => console.log(name)
```

Tada!!! It is that easy. Now there are some niche rules to keep in mind. Depending on the complexity of your function will determine the exact syntax you will use. 

####Parameters
Depending on the number of parameters you have will determine if you need to use the `()` or not. Easy rule to remember => If you have 1 parameter no need for `()`. If you have no parameters or more than one you will need to use the `()` around your parameters.
```javascript
//one parameter so no ()
let sayName = name => console.log(name)

//no parameter so must have ()
let greetings = () => console.log("Hi there!")

//more than one parameter so must use ()
let sayFullName = (first, last) => console.log(`Hi my name is ${first} ${last}`)
```

#### {} curly braces
Depending on the body of you function will determine if you will need to use curly braces or not. If it there is only one return expression and everything is on one line you can omit the `{}`. If there is additional logic that spans over multiple lines you must include the `{}` and also use the `return` keyword.

```javascript
//simple on liner = no need for {}
let sayName = name => console.log(name)

//body has multiple lines so will need to use {} and return
let findAvg = (num1, num2) => {
   let sum = num1 + num2
   let avg = sum/2
   return avg
}
```

There is a lot of syntactic sugar at work here. Arrow functions do not use the `function` keyword. This is why we assign it to a variable. We can still use parameters in our function. This is the first thing we place before the `=>`. The `=>` is what we use instead of `(parameter){logic}`. Anything to the left of the `=>` will be the parameters and anything to the right will be the body of our function. One interesting thing about arrow functions is that the return is implied. If there is only one returning expression we can omit the `return` keyword.

##This
`This` is the main difference between the two different function types. `This` can be confusing. If you are not aware of what `this` is I encourage you to go look at some documentation to better understand. As far as arrow functions go, you can not bind `this`. Normally `this` would refer to the object it is being called on. This is not the case for an arrow function. In an arrow function `this` is inherited from the parent scope and is normally the `window/global object`. Keep this in mind when deciding which type of function to use.

That is a short a simple overview of arrow functions. I hope you find this helpful and can use this as a quick refresher on how to compose your arrow functions. These are great for your simple functions and even better as callbacks. Let me know if you like this short code example heavy article or if you would rather have more detail and text describing the differences.