DEV Community

JavaScript 101: Arrow Functions

Kara Luton on June 21, 2019

Arrow functions - they're the more concise version of regular functions and they've been gaining popularity since they were first introduced in ES6...

Read full post

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.