Functions Have Arrows in Their Backs

Regular functions were first, but arrow functions are here to stay.

function greetDeclaration() { return 'Hi' }
// is the same as
let greetExpression = function() { return 'Hi' }
// is the same as
let greetArrow = () => ‘Hi’ 

Let’s go over the different types of functions and see examples of all the various ways of writing them in Javascript.

Declared Function vs. Expressed Function

The three primary types of functions are function declarations, function expressions and arrow functions. The difference between function declarations and function expressions is subtle, but important to review before getting into arrow functions.

A function declaration looks like this:

function greetDeclaration() { return 'Hi' }

We literally declared the function with the word “function” before the function’s name. Calling/invoking the function with greetDeclaration() will return ‘Hi’. We could also write the same function anonymously with a function expression like this:

let greetExpression = function() { return 'Hi' }

Here, we’ve assigned/bound our anonymous function to the variable greetExpression. To call the function, we still need the “()” to the right of the variable name, however! Calling the function with greetExpression() will return ‘Hi’.

Neither a function declaration or a function expression is better than the other. They’re simply two different ways to accomplish the same thing.

Side Note - To call a function, the only time you don’t need “()” to the right of a declared function’s name or an expressed function’s variable is if the function is being passed as an argument in another higher-order function (e.g. as a callback). That’s a topic for another day.

Anonymity

Before getting into the latest, arguably the greatest and final type of function (the arrow function), it’s relevant to elaborate on the anonymity aspect among function declarations and function expressions.

Basically, a function is anonymous if it is not bound to a keyword or variable (to be called). Here’s how we would immediately call an anonymous function on itself, to return ‘Hi’.

( function() { return 'Hi' } ) ()

Anonymous functions are typically used when it’s not necessary to name the function. It’s commonplace to see anonymous functions inside of higher-order functions that operate on other functions (as arguments).

Arrow Functions

let greetArrow = () => ‘Hi’ 

Calling greetArrow() returns ‘Hi’. Whoa! We didn’t have to write “function”, “return” or “{}”. Unlike the default explicit return needed in Javascript, an arrow function’s implicit return is akin to Ruby. Arrow functions get even more convenient when arguments are incorporated.

Here’s how we’d write a declared function or an expressed function with an argument of name, the old-fashioned way:

function greetDeclarationArgument(name) { return ‘Hi ’ + name }

let greetExpressionArgument = function(name) { return ‘Hi ’ + name }

Calling greetDeclarationArgument(‘Ryan’) or calling greetExpressionArgument(‘Ryan’) would return “Hi Ryan”. That’s cool and all, but check out how much more concise it is with an arrow function:

let greetArrowArgument = name => 'Hi ' + name

Calling greetArrowArgument(‘Ryan’) will return “Hi Ryan’. Here’s a summary of the arrow function’s benefits that we’ve now seen:

• implicit “return”

• implicit “function”

• implicit “()”

• implicit “{}”

It’s important to note that if you are using more than one argument, you do need the “()” surrounding them. Also, if you are using more than one expression in your function (i.e. more than one line), you do need the “{}” surrounding it. Finally, keep in mind that arrow functions are inherently anonymous.

Side Note - Another benefit of the arrow function is that it upholds/binds execution context in class instances of object oriented programming. That’s also a topic for another day. 

Have fun with a new arrow in your quiver!