Red Ventures Micro Workshop
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.
// Function Declaration
foo(){
alert("Hello, World")
}
foo()
// Function Expression
const bar = function(word) {
alert(`Hello, ${word}`)
}
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.target
keywords. 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
- concise syntax
- implicit returns
- no rebinding of
this
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
arguments
keyword