DEV Community

Cover image for JavaScript 101: Arrow Functions

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...
Collapse
 
zeddotes profile image
zeddotes

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

Collapse
 
andrewbrooks profile image
Andrew Brooks 👨‍💻

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

Collapse
 
sameerchandra profile image
Sameer Chandra Nimushakavi

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

Collapse
 
davegomez profile image
David Gómez

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...

Collapse
 
itsjzt profile image
Saurabh Sharma

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

Thread Thread
 
daveclarke profile image
daveclarke

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

Thread Thread
 
itsjzt profile image
Saurabh Sharma

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

Thread Thread
 
daveclarke profile image
daveclarke

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

Thread Thread
 
itsjzt profile image
Saurabh Sharma

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.

Collapse
 
drozerah profile image
Drozerah • 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' }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
c24w profile image
Chris Watson

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

Collapse
 
drozerah profile image
Drozerah • Edited

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

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid

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 :)

Collapse
 
davegomez profile image
David Gómez

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

Collapse
 
sambajahlo profile image
Samba Diallo

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.

Collapse
 
karaluton profile image
Kara Luton

Thank you!

Collapse
 
valentinogagliardi profile image
Valentino Gagliardi

Hi Kara I think there's a missing const in the very first snippet :-)

Collapse
 
karaluton profile image
Kara Luton

Ah thank you! I meant to get rid of setting that variable at all actually.

Collapse
 
philsinsight profile image
Mr. Boateng

Great post! Also really appreciate the link to a deeper insight of how the keyword works with arrow functions.👌

Collapse
 
namstel profile image
Namstel

A nice quick read with usefull information. I didn't know it does an implicit return. I'm still not sure how this works, but I'll look that up.

Thanks!

Collapse
 
karaluton profile image
Kara Luton

Thank you!

Collapse
 
mgranados profile image
Martín Granados García

Nice post! Truly helpful as I never took the time to truly master the arrow function

Collapse
 
joewilson0 profile image
Joe Wilson

Nice write up, Kara.

Collapse
 
karaluton profile image
Kara Luton

Thank you!

Collapse
 
ashikpaul42 profile image
AshikPaul42

How do we write a return type in an arrow function?

Collapse
 
scrabill profile image
Shannon Crabill

Arrow functions make more sense to me know that I know about hashes in Ruby 🤔