(Arrow, Functions) => in Javascript

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.

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

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.

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.

//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.

//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.