Javascript Arrow Functions
Red Ventures Micro Workshop
Safe Harbor
While arrow functions have major support in most modern browsers, some older browsers do not support the feature. Therefore, it is up to you to make sure the browsers you support are addressed. You can consult can I use for a full list of supported browsers for this feature.
Life Without Arrow Functions
// Function Declaration
foo(){
alert("Hello, World")
}
foo()
// Function Expression
const bar = function(word) {
alert(`Hello, ${word}`)
}What is an Arrow Function
An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the
this,arguments,super, ornew.targetkeywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.-- MDN
- An arrow function is not just syntactic sugar for js functions
- Arrow functions are always anonymous functions
Benifits of Arrow Functions
- concise syntax
- implicit returns
- no rebinding of
this
When Not to Use Arrow Functions
There are a few cases where you do not want to use arrow functions without some significant rework.
- Click handlers
- Object methods
const game = {
score: 3,
increase: function() {
this.score++
}
}
// don't do
const game = {
score: 3,
increase: () => this.score++
}
// Better refactor
const game = {
score: 3,
increase() {
this.score++
}
}- When you need the
argumentskeyword