JavaScript Arrow Function

— 3 minute read

We all know the basics of JavaScript functions, but since ES6 came out, we can use JavaScript Arrow Functions. These arrow functions make our jobs as developers easier and are super easy to switch to.

JavaScript functions

Before we look into the Arrow Functions, let's look at how we did functions in normal JavaScript.

myFunction = function(name) {
  return `Hi ${name}`;
};

That would be a very basic function, but let's see how this translates to an Arrow Function.

JavaScript Arrow Functions

So let's stick with the above example. We can convert it into an Arrow Function as such:

myFunction = (name) => {
  return `Hi ${name}`;
};

In essence we replace function() with just () and add the => arrow command.

To be blunt, we can make it even shorter since Arrow Functions will return by default.

hello = () => 'Hi there!';

Arrow Function Parameters

You're probably wondering how we can include parameters; we can pass them into the first brackets like such:

hello = (name) => `Hi ${name}`;

Even better, if we only have one parameter, we can forget about the brackets like such:

hello = name => 'Hi ' + name;

I hope you learned something about the basic usage of Arrow Functions; I challenge you to use these in your next project!

Feel free to view this on Codepen.

See the Pen JavaScript Arrow Function by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter