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

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
 
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 πŸ€”

Collapse
 
joewilson0 profile image
Joe Wilson •

Nice write up, Kara.

Collapse
 
karaluton profile image
Kara Luton •

Thank you!