Javascript: How to Use Arrow Functions
Tags: javascript
Published: 2020-10-29 16:08:07

Alongside the introduction of classes, default parameters, template literals, [block scoped variables](https://dev.to/antdp425/var-let-and-const-feat-hoisting-3o28), and other features that Javascript developers have grown to love, one of the features that [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015) introduced was **arrow functions.** 

Before [ES6](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_%E2%80%93_ECMAScript_2015), when creating function expressions, we would need to write them like this:

```jsx
// with no arguments
let myFunction = function(){
	return "This is my function"
}

// with one argument

let sayName = function(name){
	return `My name is ${name}`
}

// with two or more arguments
let addNumbers = function(num1, num2){
	return num1 + num2
}

myFunction() // "This is my function"
sayName("Tony") // "My name is Tony"
addNumbers(2,5) // 7
```

![https://media2.giphy.com/media/xT9IgAakXAITtXIWje/giphy.gif?cid=ecf05e47mt88kbo9510gf3skcfa2n8co9n5fhdpl0sn4s2vy&rid=giphy.gif](https://media2.giphy.com/media/xT9IgAakXAITtXIWje/giphy.gif?cid=ecf05e47mt88kbo9510gf3skcfa2n8co9n5fhdpl0sn4s2vy&rid=giphy.gif)

After ES6, we can now write them like this:

```jsx
// our original function expressions from above become..

// with no arguments
let myFunction = () => "This is my function"

// with one argument
// parentheses are optional with only one parameter
let sayName = name => `My name is ${name}`

// as a function expression w/ arguments
// parentheses are required when using more than one parameter
let addNumbers = (num1, num2) => num1 + num2

myFunction() // "This is my function"
sayName("Tony") // "My name is Tony"
addNumbers(2,5) // 7
```

In the examples above, we are only using one simple expression/statement after our fat arrow "⇒", which allows **our return to be implicit / not required**. 

However, if we use **multiple expressions / statements in our arrow function we must use curly brackets and the return keyword**. We can use curly braces when using one simple expression/statement as well, but the same rules apply, we must use the return keyword within it.

Examples with multiple expressions / statements:

```jsx
let multiplyBySix = num => {
	let six = 6
	return num * six
}

let addTenToSum = (num1, num2) => {
	let ten = 10
	let sum = num1 + num2
	return sum + ten
}

multiplyBySix(2) // 12
addTenToSum(2,8) // 20
```

Our original examples with curly braces + explicit return:

```jsx
// remember, this is optional here because these are single statement/expressions
let myFunction = () => {return "This is my function"}

let sayName = name => {return `My name is ${name}`}

let addNumbers = (num1, num2) => {return num1 + num2}

myFunction() // "This is my function"
sayName("Tony") // "My name is Tony"
addNumbers(2,5) // 7
```

Simply put, **arrow functions are a shorthand version of Javascript function expressions.** 

An additional benefit of arrow functions is that **it maintains/binds the current context or *this*** (more info about what ***this*** is [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this), more specifically [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), and if you'd rather watch a video — [here](https://www.youtube.com/watch?v=YOlr79NaAtQ)), which is very convenient in certain situations.

As always, refer to MDN for more info:
Arrow Functions: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

Feel free to reach out on any of my socials for questions, feedback, or just to connect / say hello 👋.