Kara Luton

Posted on Jun 21, 2019 • Edited on Jan 21, 2020

JavaScript 101: Arrow Functions

#javascript #beginners #explainlikeimfive

Arrow functions - they're the more concise version of regular functions and they've been gaining popularity since they were first introduced in ES6. Not only is the syntax much cleaner but they also provide implicit returns which we'll dive into.

Hold up! If you haven't read the first part in this series, JavaScript 101: Breaking Down Functions, then make sure to check that out.

Let's start with how the arrow function's syntax is different from regular functions.

Here we have a regular function:

function helloWorld(name) {
 console.log('Hello ' + name);
}

If we wanted to use an arrow function, it would look like this:

const helloWorld = name => {
  console.log('Hello ' + name);
}

There are some key differences with arrow functions. We've dropped having to declare the function using the function keyword. Our parameters are a bit different than before as well. They now come after an equal sign and before the fat arrow (=>).

You may have also noticed that we're now declaring our arrow function as a variable. That's because arrow functions are anonymous functions or functions that are declared without a name. You don't have to assign them to a variable but doing so allows you trace them more easily when you have an error.

🌟 Quick tip: If you only have one parameter the parentheses are optional. If you don't have any parameters then you'll need to use empty parentheses.

Here's our example with multiple parameters:

const helloWorld = (name, emoji) => {
  console.log(emoji + ' Hello ' + name);
}

And our example with no parameters:

const helloWorld = () => {
  console.log('Hello');
}

Now that we've covered the syntax of arrow functions let's talk about another big benefit - implicit returns! This will make your code even shorter than before. Let's take the example we've been using and switch to a return instead of a console.log.

const helloWorld = name => {
  return 'Hello ' + name;
}

Because we're only returning a single line of code we can use the arrow function's ability to do an implicit return and rewrite our function like so:

const helloWorld = name => 'Hello ' + name;

When utilizing implicit returns, you're able to drop the return keyword as well as the curly brackets. This makes for really nice one-line functions.

Implicit returns aren't the only big difference between arrow functions and regular functions. Another big one is how they handle the this keyword.

In regular functions, the this keyword is bound depending on the context in which it was called. However, inside of arrow functions, this is lexically bound meaning that it's static and determined by the scope that it's in.

This is still something that I'm trying to grasp myself but JavaScript Kit has a great explanation if you're wanting to dive in more.

Be sure to follow me on Twitter for lots of posts about tech, and if I'm being honest, lots of posts about dogs too.

Top comments (26)

zeddotes • Jun 21 '19

The lexically bound this context is probably the most important quality of thicc arrow functions.

Andrew Brooks 👨‍💻 • Jun 21 '19

Agreed. It helps with some of the strange and unexpected behavior of this.

Sameer Chandra Nimushakavi • Jun 21 '19

Being a react developer, I mostly use arrow functions to bind this context

David Gómez • Jun 24 '19

You are not binding the context by using an arrow function, it doesn't work that way.

More info here: github.com/getify/You-Dont-Know-JS...

Saurabh Sharma • Jun 22 '19

I tend to use hooks in new code and avoid this altogether.

daveclarke • Jun 24 '19

Can you please provide an example of this (using hooks not this).

Saurabh Sharma • Jun 25 '19

why would you need this when you don't use classes.

daveclarke • Jun 25 '19

Sorry I'm just confused what you mean by hooks. Hoping you might paste in an example?

Saurabh Sharma • Jun 25 '19

Classical React example of Counter

class App extends React.Component {
    constructor(props) {
        this.state = {
            count: 0
        }
    }

    onClick(e) {
        this.setState({
            count: this.state.count + 1
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                {/* this is needed here  */} 
                <button onClick={this.onClick.bind(this)}>Count Up!!</button>
            </div>
        )
    }
}

and after using React Hooks

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

know more about react hooks.

Drozerah • Jun 22 '19 • Edited

Implicit return:

When returning an Object, remember to wrap the curly brackets in parentheses to avoid it being considered the default wrapping function body brackets:

const myFunction = () => ({value:'test'})

console.log(myFunction()) // { value: 'test' }

Chris Watson • Jun 24 '19

And remember to write tests so you catch these mistakes :)

Drozerah • Jun 25 '19 • Edited

We wish to read you about tests - from scratch - if you have time to start a serie about that topic... ;)

Abdur Rehman Khalid • Jun 22 '19

When I first saw the Title and I thought it is going to be something strange but it came out as the Lambda Functions that is being used in the Higher Versions of Java, by the way as I am a JavaScript Developer as well so it is very nice post according to that as well :)

David Gómez • Jun 24 '19

The arrow function is by definition a lambda function, is not just syntax.

Samba Diallo • Jun 21 '19

Concise and easy to understand, love learning little new bits and pieces about JS!
The this keyword has shortened my coding time by a lot in my recent projects.