Joshua's Docs - JavaScript - Newer Stuff / Misc

Arrow functions

Great guide - _Understanding Arrow Functions in JavaScript and also this one by sitepoint.

In short, a more concise way for declaring functions.

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

Becomes:

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:
Sun Feb 20 2022 04:56:00 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Sat Aug 31 2019 12:30:36 GMT+0000 (Coordinated Universal Time)
© 2024 Joshua Tzucker, Built with Gatsby
Feedback