Arrow functions were introduced with ES6 as a new way of writing JavaScript functions. This post will cover basic syntax of Arrow functions, common use cases.
Note – I am putting my JavaScript Developer study notes here.
Note – Please read my previous post where I have explained the basics of functions in JavaScript.
Arrow functions, sometimes referred as Fat Arrow is a new concise way of writing functions. They utilize a new syntax, => which looks like Fat Arrow. Arrow functions are anonymous and change the way this binds in functions. By using arrow functions, we can avoid typing function and return keyword and also curly brackets.
Basic Syntax of Arrow Function with Multiple Parameters
constmultiplyFunction = (x,y) =>x *y;
console.log(multiplyFunction(5, 6));
Output: 30
Syntax of Arrow Function with Single Parameter
constsplitString = (text) =>text.split(” “);
console.log(splitString(“My name is Sudipta Deb”));
Output:
[ ‘My’, ‘name’, ‘is’, ‘Sudipta’, ‘Deb’ ]
Syntax of Arrow Function with No Parameter
constfunctionWithNoParam = () => {
console.log(“This function with no parameter”);
};
functionWithNoParam();
Output:
This function with no parameter
Syntax of Arrow Function with Object return
Arrow functions can be used to return an object literal expressions.
varfuncWithObject = (empName,empNumber) => ({
empName:empName,
empNumber:empNumber,
});
console.log(funcWithObject(“Sudipta Deb”, 101));
Output:
{ empName: ‘Sudipta Deb’, empNumber: 101 }
Use Cases for Arrow Functions
One very common use case for Arrow function is Array manipulation. In the below example, each array items will be converted to upper case.
Another little advanced example is when you want to return something from an array that meets the criteria. So in the below example, I would like to return only those tasks which are completed.
Promises make it easier to manage async code. This is the perfect situation to use Arrow function. Here is the syntax
this.doSomething().then((result) => {
this.handleResult(result);
});
Places not to use Arrow Function
Let’s consider the below object which is having one method describeMe() which is returning a String.
constCar = {
brand: “Honda”,
price: 132000,
describeMe: function () {
return `I am ${brand} car with price ${price}`;
},
};
console.log(Car.describeMe());
If you execute the above code, you will get the undefined error while accessing brand and price. To solve that, let’s use This now to bind brand and price with the Car object context. So now the code looks like –
constCar = {
brand: “Honda”,
price: 132000,
describeMe: function () {
return `I am ${this.brand} car with price ${this.price}`;
},
};
console.log(Car.describeMe());
Output:
I am Honda car with price 132000
Now if you think of replacing describeMe function with Arrow function, it will look like below –
constCar = {
brand: “Honda”,
price: 132000,
describeMe: () => `I am ${this.brand} car with price ${this.price}`,
};
console.log(Car.describeMe());
But this time you will get again the undefined error. Why???
This keyword is bound to different values based on the context in which it is called. With Arrow Function, it is little different. Here This is lexically bound i.e. it uses this from the code that contains the arrow function. So Arrow Function should not be used in Object methods.
The post was really very good.Thanks for sharing
prestige elysian
Information provided by you is very helpful and informative. Keep On updating such information.
prestige elysian
Information provided by you is very helpful and informative. Keep On updating such information.
prestige elysian