This content originally appeared on DEV Community and was authored by Aden Eilers
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
constructorswithin classes. - They likely will not behave as expected with the keywords
call,applyandbind.
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.
This content originally appeared on DEV Community and was authored by Aden Eilers
Aden Eilers | Sciencx (2022-04-24T23:53:44+00:00) JavaScript arrow functions. Retrieved from https://www.scien.cx/2022/04/24/javascript-arrow-functions/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.