Javascript: How to Use Arrow Functions

Alongside the introduction of classes, default parameters, template literals, block scoped variables, and other features that Javascript developers have grown to love, one of the features that ES6 introduced was arrow functions.

Before ES6, when creating function expressions, we would need to write them like this:

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

After ES6, we can now write them like this:

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

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:

// 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, more specifically here, and if you'd rather watch a video — here), 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

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