Syntax and benefits of arrow functions
Arrow Functions in JavaScript Programming ES6 was a modern feature launched in ECMAScript in the year 2015. Arrow functions provide JavaScript programmers with a flexible way to create functions instead of the traditional function expression practice. While there is a slight difference in how you manage the this keyword with arrow function usage.
Syntax of JavaScript arrow function.
Create an arrow function using the => (thick arrow) syntax.
Basic syntax of JavaScript arrow function.
const functionName = (parameter1, parameter2, …) => {
/ program code to be executed in arrow function
};
Key points of JavaScript arrow function.
- Declaring arrow function parameters is indicated by parentheses around them.
- If the current function has only one parameter argument, then using parentheses may be optional.
- If the current arrow function has no parameters declared, or has more than one function argument parameter, then using parentheses becomes mandatory.
JavaScript Arrow Function (=>).
=> It displays the parameters of arrow function in the current JavaScript program by separating them from the function body.
Arrow Function Body.
If the function body in the current program is a single expression value, then JavaScript programmers cannot use curly braces {} and return statement. Where, the expression is returned indirectly in the current arrow function.
If the current arrow function body has multiple statements, then the programmer can use curly braces {} in the existing arrow function, and if the programmer wants to return some value in the existing function, then he has to create the return keyword in a clearly ordered program.
Arrow Function Examples.
Arrow function with one parameter in JavaScript.
const message = info => { // Use of arrow function
console.log(“Welcome to, ” + info + “|”);
};
message(“Vcanhelpsu Edtech platform”); // Result is – Welcome to,Vanhelpsu Edtech platform
Arrow function with one parameter Explanation.
Here there are no parentheses around the one info parameter, because this function has only one arrow parameter.
JavaScript arrow function with multiple parameters.
const total = (p, q) => {
return p + q;
};
console.log(total(7, 8)); // Result is – 15
JavaScript arrow function with multiple parameters Explanation.
In the above program parentheses are necessary, because this program has multiple arrow function parameters p and q values.
Single expression implicit return arrow function.
const product = (p, q) => p * q;
console.log(product(7, 2)); // Result is -14
Explanation of single expression implicit return arrow function.
Here only one parameter expression is used in this arrow function body, so curly braces {} and return keyword are not used. Where in this program expression the output of p * q is displayed.
Javascript arrow function without parameters.
const displaypmessage = () => {
console.log(“Welcome to, Vcanhelpsu Edtech Platfrom”);
};
displaypmessage(); // Result – Welcome to, Vcanhelpsu Edtech Platfrom
Javascript arrow function without parameters explanation.
When an arrow function in a JavaScript program has no parameters, you can use empty brackets ().
Javascript arrow function with multiple statements.
const totalvalue = (p, q) => {
let total = p + q;
console.log(“The total is – ” + total);
return total;
};
console.log(totalvalue(7, 9)); // Result is – 16
Explanation of a JavaScript arrow function with multiple statements
If the current program contains multiple arrow statements, then the use of curly braces in this program is necessary, and the value is returned using the return statement.
Advantages of arrow functions in JavaScript programs.
Concise syntax of arrow functions.
Arrow functions provide a short and clean syntax for writing functions, which is especially useful for small, single-row functions.
const square = p => p * p;
JavaScript implicit return keyword.
When the main function portion in a JavaScript program function is created from a single expression, the arrow function used allows the programmer to return the value without using the return keyword.
const double = p => p * 4; // Implicit return function
Arrow functions in JavaScript programs have no binding.
An important advantage of arrow functions in JavaScript is that arrow functions do not have their own this value. Rather, they inherit it from the surrounding program source code value references as lexical scope. Arrow functions make them useful for calling events in the middle of a program object or for program event handler methods such as callbacks.
JavaScript Arrow Functions (Fix this behavior).
function Tester() {
this.test = 0;
setInterval(() => {
this.test++; // here `this` keyword used to refers the tester object
console.log(this.test);
}, 400);
}
const tester = new Tester();
In this program, the arrow function determines that this refers to the tester object, so this.test++ can do the proper work.
Less code for callbacks from arrow functions.
Arrow functions in JavaScript programs simplify function programming with callback methods, as programmers do not need to bind or detail function declarations in a clear order.
/ Using JavaScript traditional functions.
setTimeout(function() {
console.log(“Display message after 4 seconds”);
}, 4000);
// here use arrow function
setTimeout(() => console.log(“Display message after 4 seconds”), 1000);
When not to use arrow functions in JavaScript programs.
As there are many advantages of using arrow functions in JavaScript programs, still in some conditions programmers should not use it.
arrow function Methods inside an object or class.
Arrow functions should not be used as methods in an object or class in JavaScript programs. Because they do not have their own this keyword. But you can use arrow functions as methods, where the lexical scope around the this keyword in the current function refers to the parameter value, not the object itself.
const company = {
name: “Vcanhelpsu”,
message: () => {
console.log(“Vcanhelpsu, ” + this.name); // here `this` is not referring to the company object
}
};
company.message(); // here `this.name` value is not define
When you need an argument object in an arrow function.
Remember, arrow function in JavaScript program does not have its own argument object value, which is used to access the variable argument parameter passed in a program. If the programmer needs parameter argument access, then the programmer can use a traditional JavaScript function.
const total = () => {
console.log(arguments); // here `arguments` will be undefined nature
};
total(2, 7, 9);
Whereas you, here the programmer has to use a traditional function.
function total() {
console.log(arguments); // now it works correctly
}
total(7, 9, 8);
Arrow Function Benefits and Summary
| Benefit of arrow function | Description of arrow function |
| Concise function syntax | Javascript program Arrow functions use to provide a shorter, cleaner way to write desire functions. |
| No need Implicit return | With arrow function used In single-expression program functions, you no need to use the return keyword statement. |
| Use Lexical this approach | In some program condition Arrow functions inherit this from their surrounding program source code context, and avoiding issues in callbacks and event handlers methods. |
| Easier callbacks function callbacks | Javascript program with Arrow functions make it easier to write and use callbacks without binding this methods. |
| No arguments object | Most of time Arrow functions do not have their own arguments object (use traditional functions when you need it) and manage its all attributes. |
Conclusion of Arrow Function in JavaScript.
Arrow functions are a modern programming feature in JavaScript programming that provides JavaScript programmers with a more detailed and functional syntax for creating functions. Arrow functions are particularly useful in particular situations where the programmer needs to manage function callbacks or functions in such a way. However, arrow functions should not be used in object methods in JavaScript programs or when you need to use the argument object.
