Arrow vs. Regular Functions

It’s easy to get thrown off when explaining the difference between regular functions and arrow functions (trust me I did). The below summary should hopefully provide a little bit of insight into how to tell the difference and when you might want to use one over the other.

Regular Functions

When crafting regular functions there are a few key things to know. We need to write the keyword function when initializing a function and give the function a name. By default, all regualr functions return undefined. In order to return any other value, the function must have a return statement that specifies the value that you want the function to return. In the greeting below, I initialize my greeting with a name argument. When I pass in “Matt”, the function returns the greeting “Hello Matt”. This is all very standard and straightforward.

function greeting(name) {
  return 'Hello ' + name;
}
greeting('Matt'); // Hello Matt

Arrow Functions

On the other hand, arrow functions no longer need the keyword function. You assign the arrow function to a variable (with let, var or const). In this situation, we set it to “greeting”.

const greeting = name => {
  return 'Hello ' + name;
};
greeting('Josh'); // Hello Josh

The above example is nearly identical to the function declaration, but the beauty of the arrow function is that the return can be removed and it can be shortened even more to:

const greeting = name => 'Hello' + name;
greeting('Josh'); // Hello Josh

If we were to add more than one argument to the function, we would need to add our parentheses back. e.g.

const greeting = (firstName, lastName) => 'Hello' + firstName + '' + lastName;
greeting('Josh', 'Allen'); // Hello Josh Allen

We also would need to add parentheses if we were not passing any arguments.

So what’s different?

There are a few key areas where arrow functions are similar and a few where they are different.

• Both can be anonymous
• Both have the ability to support 1:Unlimited parameters.
• Both can return things.
• Both are supported in Javascript.

Differences

• Arrow functions cannot be used as constructors because arrow functions do not have a prototype property.
• Arrow functions do not bind to keywords like this, arguments, super or new.target.

When to use arrow functions

• When you’re looking for easier to read and write functions. Oftentimes you can condense a function to single line.
• When you’re looking for safety of scope. Arrow functions support an original this from enclosing context.

When to use regular functions

• When you want to hoist a function, e.g. a function that can be used before it is declared.
• When you want to directly address the window object in global scope.

Conclusion

There’s no perfect functions, just functions perfect for the situation that you need them in. It’s up to you to decide what you would prefer to use and in what context that you need to use them.