Joshua's Docs - JavaScript - Newer Stuff / Misc

Arrow functions

Great guide - sitepoint.

In short, a more concise way for declaring functions.

let doubler = function(input){
  return input * 2;


let doubler = (input)=>{
  return input * 2;

Or, if there is only one expression, like the above example, you can omit the braces:

let doubler = (input)=>input*2;

Warning about this

With arrow functions, this uses "lexical scoping", which, TLDR, means that it points to where the function originated, no matter how layers deep of the context it actually executes in. This is both a positive and a negative. On one hand, it reduces the need to bind functions when declaring things like click listener callbacks, but on the other hand, it makes them largely unsuitable for object methods if you need to use this to access another prop.

Markdown Source Last Updated:
Wed Nov 11 2020 14:58:25 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Sat Aug 31 2019 12:30:36 GMT+0000 (Coordinated Universal Time)
© 2021 Joshua Tzucker, Built with Gatsby