JavaScript — Understand Arrow Function Syntax

Learn arrow function syntax by example.

Brandon Morelli
codeburst

--

Almost three years after arrow functions were added to JavaScript, they remain to be one of the most asked about features of the language.

Arrow Functions have two main benefits:

  • A shorter syntax than typical functions
  • No binding of this

In this article we’ll explore the shorter syntax of arrow functions and compare them to their equivalent function expressions. Ultimately, we’ll end up with two rules for understanding Arrow function syntax.

If you need a refresher on functions, I encourage you to first read my previous article: JavaScript Functions — Understanding The Basics.

Function Expression Syntax

A function expression is an anonymous function object that we set equal to a variable. It is anonymous because the function has no name. The syntax consists of the function keyword, followed by zero or more parameters, and concludes with the function statements.

The syntax looks like this:

const name = function(parameters){
statements
}

A real world example looks like this:

const double = function(num){
return num * 2;
}

In this example we have set our anonymous function object equal to the double variable. Our function takes one parameter, num, and has one statement which returns num * 2.

We can execute the function by invoking double:

double(3);
// 6

Arrow Function Syntax

An arrow function looks similar to a function expression — it’s just shorter. Again we assign an anonymous function to a named variable. The syntax of the arrow function consists of zero or more parameters, an arrow => and then concludes with the function statements.

const name = (parameters) => {
statements
}

Using the same real world example as above, our double function would look like this in arrow function syntax:

const double = (num) => {
return num * 2;
}

When we compare this arrow function to the function expression from earlier, you can see there is not much difference yet:

// Function Expressionconst doubleEXP = function(num){
return num * 2;
}
// Arrow Functionconst doubleARR = (num) => {
return num * 2;
}

All we’ve done is removed the function keyword and replaced it with an arrow =>.

As you can also see, both functions return the same result when invoked:

doubleEXP(3);
// 6
doubleARR(3);
// 6

We’re making progress, but our arrow function can actually be simplified much more. So much more in fact, that the double function written above can also be written like this:

const double = num => num * 2;

And yes, they are the exact same function.

I know this looks confusing. But continue reading and we’ll explore why these two functions are equal:

const double = (num) => {
return num * 2;
}
// Is the same asconst double = num => num * 2;

Arrow Function Parameters

With arrow function parameters, it’s important to remember that: The number of parameters in an arrow function affects the syntax of that function.

  • If there are 0 Parameters, arrow functions use empty parenthesis:
() => { statements }
  • If there is 1 Parameter, arrow functions can omit the parenthesis around the parameter:
parameter => { statements }
  • If there are 2+ Parameters, parameters go inside parenthesis:
(param1, param2, ...) => { statements }

Lets return to our double example from earlier. Using the rules listed above, we can see that with one parameter arrow functions can omit the parenthesis. I’ve bolded this difference below:

const double = (num) => {
return num * 2;
}
// Is the same asconst double = num => num * 2;

Arrow Function Return

Arrow functions also have a built in way to shorten a return syntax: If an arrow function is simply returning a single line of code, you can omit the statement brackets and the return keyword. This tells the arrow function to return the statement.

Consider this function expression:

let name = function(parameters){
return expression
}

Is shortened to:

let name = (parameters) => expression

With this in mind, if we return to our original double example, we can look at how this rule affects our code samples:

const double = (num) => {
return num * 2;
}
// Is the same asconst double = num => num * 2;

Key Takeaways

  • The number of parameters an arrow function accepts is key to determining the syntax of the function
  • If returning a single line of code from an arrow function, omitting the brackets and return keyword will return the remaining statement.

Challenges

A fun way to learn these rules and better understand arrow function syntax is to attempt to convert a function expression into an arrow function. Below are three challenges — See if you can convert them into arrow functions!

#1

const add3 = function(num1, num2, num3){
return num1 + num2 + num3;
}

#2

const square = function(num){
return num ** 2;
}

#3

const sayHi = function(){
console.log('Hi');
}

Answers

#1 — Three parameters so parameters go inside parenthesis. We’re returning a single statement so we can remove brackets and the return statement:

const add3 = (num1, num2, num3) => num1 + num2 + num3;

#2 — Very similar to our double example from earlier. One parameter so we omit parenthesis. Returning a statement so we omit brackets and return statement:

const square = num => num ** 2;

#3 — A bit of a trick question. Did I get you? No parameters, so we use empty parenthesis. We’re not returning anything, just logging. So there is no shortcut for the statement:

const sayHi = () => {
console.log('Hi');
}

Important

This article only covered syntax and did not cover the non-binding of this in arrow functions.

Closing Notes:

Thanks for reading! If you’re ready to finally learn Web Development, check out: The 2018 Web Developer Roadmap.

If you’re working towards becoming a better JavaScript Developer, check out: Ace Your Javascript Interview — Learn Algorithms + Data Structures.

I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.

If this post was helpful, please click the clap 👏 button below a few times to show your support! ⬇⬇

--

--

Creator of @codeburstio — Frequently posting web development tutorials & articles. Follow me on Twitter too: @BrandonMorelli