Subscribe

JavaScript Arrow Function

✍️

Turning regular functions into Arrow Functions

27 May, 2020 · 2 min 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 regular JavaScript.

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

That would be a fundamental 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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Removing all vowels with JavaScript

3 Dec, 2022 · 2 min read

Removing all vowels with JavaScript

10 games to learn JavaScript

2 Dec, 2022 · 3 min read

10 games to learn JavaScript

Join 2097 devs and subscribe to my newsletter