JavaScript ES6 Arrow Functions Tutorial

Let’s take a look at ES6 arrow functions. If you’ve spent any amount of time programming JavaScript, you know that after awhile, it feels like you’re typing out that function keyword over and over and over. You write a function here, you write a function there. Here a function, there a function, every where a function function. That’s because anytime you want something to actually happen in your script, you need to write another function! Have you ever thought, “it might be nice if I didn’t have to write out the function keyword so darn often”. If so, you’re in luck with ES6, because there is a new shorthand for writing functions and they are referred to as ES6 Arrow Functions. Let’s investigate them a little bit now.

Arrow Functions use Fat Arrow Syntax
You may have heard of these new arrow functions as using the fat arrow syntax. This is because this new symbol for defining functions in ES6 is the combination of an equals sign = and a greater than symbol. Put them together and now you have your fat arrow . The equals sign is what makes the arrow fat. So let’s start off by creating a function in ES5, and then see what we have to do in order to turn it into an ES6 Arrow Function.

Arrow functions with no input must make use of parenthesis
In this example below, we create a super simple arrow function and assign it to the points variable. In contrast to the example above where we square a number via a function and it requires a number as a parameter, this function here has no parameter. If there are no parameters at all to an arrow function, you must make use of the empty parenthesis syntax.

Single argument arrow function example
The only time you can use no parenthesis is when there is one argument to an arrow function. This might be a little confusing. If you’d rather follow a convention of just using the parenthesis in all use cases of an ES6 arrow function, you can do that. This example here of a one argument ES6 arrow function works just fine when we include the parenthesis.