2. Arrow Function - florypaul/ReactJS GitHub Wiki
Arrow functions, introduced in ECMAScript 6 (ES6), provide a concise syntax for writing function expressions in JavaScript compared to traditional function expressions
Use Cases:
- Arrow functions are commonly used in modern JavaScript codebases for writing concise and readable code.
- They are especially useful for passing inline functions as arguments to higher-order functions like map, filter, and reduce.
- Arrow functions are often preferred in React components for defining event handlers and callback functions due to their lexical this behavior.
Limitations:
- Arrow functions are not suitable for defining methods on objects or constructors since they lack their own this context.
const shape = {
radius: 10,
diameter() {
return this.radius * 2;
},
perimeter: () => 2 * Math.PI * this.radius, // here only shape.radius will work because this is pointing to window
};
console.log(shape.diameter()); console.log(shape.perimeter());
- They cannot be used as constructors with the new keyword.
- They do not have a prototype property.
- Arrow functions do not have their own arguments object. You can use the rest parameters ...args instead.
// Traditional function using arguments object
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3, 4)); // Output: 10
console.log(arguments); // Output is
Arguments {
"0": 1,
"1": 2,
"2": 3,
"3": 4
}
// Arrow function using rest parameters
const sumArrow = (...args) => {
let total = 0;
for (let i = 0; i < args.length; i++) {
total += args[i];
}
return total;
};
console.log(sumArrow(1, 2, 3, 4)); // Output: 10
Arrow functions provide a more elegant way to define functions in JavaScript, especially for short and simple expressions. However, it's essential to understand their behavior and limitations to use them effectively in your code.
Traditional function
function add(num1, num2){ return num1 + num2; }
console.log(add(2,3)); https://medium.com/tfogo/advantages-and-pitfalls-of-arrow-functions-a16f0835799e#:~:text=So%20arrow%20functions%20are%20quite,functions%20can't%20be%20generators.
Arrow function
- Arrow functions allow us to write shorter function syntax
- => is called fat arrow
- "this" keyword -> Arrow functions do not bind their own this, instead, they inherit the one from the parent scope, which is called "lexical scoping" that is window.
myObject = {myMethod: function () {helperObject.doSomethingAsync('superCool', () => {console.log(this); // this === myObject});},}; - In tradition function this refers points to function calling it eg. button, window or document
var standAloneFunc = function(){
// alert(this);
}
standAloneFunc(); // [object Window]
// In here the console.log in setTimeout gives undefined because 'this' is not preserved
let obj = {
myVar: 'foo',
myFunc: function() {
console.log(this.myVar)
`setTimeout(function() {`
`console.log(this.myVar)`
`}, 1000)`
}
}
obj.myFunc() // foo ... then... undefined
so to preserve this we use a variable to save the this in the function scope
let obj = {
myVar: 'foo',
myFunc: function() {
let self = this
console.log(this.myVar)
`setTimeout(function() {`
`console.log(self.myVar)`
`}, 1000)`
}
}
obj.myFunc() // foo ... then... foo
- Multiple arguments- parenthesis is required (num1, num2)
const add = (num1, num2) => {
return num1 + num2
}
console.log(add(2,3));
-
Single argument - parenthesis is not required (num)
const multiply = num => {return num * 2}console.log(multiply(2)); //4 -
In arrow if we are only returning something then no need to give the keyword return nor curly braces is required
const multiply = num => num * 2
console.log(multiply(2)); //4