What is an arrow function in JavaScript?
Arrow functions are an alternative way of writing functions in JavaScript. There are a few limitations compared to the traditional function that will be discussed in this article.
// Traditional function declaration
function myFunc(myParam) {
return myParam + 1;
}
// Arrow function declaration
const myFunc = (myParam) => {
return myParam + 1;
}
Arrow functions can often be shortened substantially.
// If there is one parameter, then you do not need to include
// the parenthesis.
const myFunc = myParam => { return myParam + 1; }
// If the functions contents can fit on one line, then you can
// remove the 'return' keyword and '{}'.
// In this case, the 'return' is implied.
const myFunc = myParam => myParam + 1;
It is common to use arrow functions with the built in array methods.
const arr = [1, 2, 3, 4, 5];
const arrMap = arr.map(v => v + 1);
const arrFiltered = arr.filter(v => v > 3);
arr.forEach(v => console.log(v));
The limitations of Arrow functions.
Arrow functions do not have their own binding of this
. As a result, you generally will not want to use them as methods
in your objects. A few more things to know:
- They don't have their own binding to
arguments
, orsuper
- They cannot be used as
constructors
within classes. - They likely will not behave as expected with the keywords
call
,apply
andbind
.
Since the arrow function does not have its own binding of this
, it cannot reference other attributes or methods in objects. this
in an arrow function will always reference the global scope.
const obj = {
value: 1,
myFunc1: function () {
console.log(this.value, this);
},
myFunc2: () => {
console.log(this.value, this);
},
};
obj.myFunc1(); // 1, obj{...}
obj.myFunc2(); // undefined, Window{...} or the Global object
For more info, reference the MDN documentation: MDN Docs
Leave a comment if you have any questions or feedback.
Top comments (0)