ES6 Arrow functions provides us with a more precise approach to writing Javascript Functions. The arrow functions are introduced in the ES6 version. Arrow functions enable us to write functions with simpler and shorter syntax and make our code more readable and organized.
Arrow functions are anonymous functions i.e. they are functions without a name and are not bound by an identifier. Arrow functions do not return any value and can be declared without the function keyword. They are also called Lambda Functions.
- Arrow functions do not have the prototype property like this, arguments, or super.
- Arrow functions cannot be used with the new keyword.
- Arrow functions cannot be used as constructors.
Syntax:
For Single Argument:
let function_name = argument1 => expression
For Multiple Arguments:
let function_name = (argument1, argument2 , ...) => expression
Note: In case of multiple arguments you need to enclose the arguments within brackets.
Example 1: In this example, we will multiply two numbers using traditional function syntax (or expression) as well as with arrow function syntax. In the below code we create a function called multiply where we return the product of two numbers.
JavaScript
// Normal function for multiplication// of two numbersfunction multiply(a, b) { return a * b;}console.log(multiply(3, 5)); |
Output:
15
Uses of arrow function: The arrow function is a single liner we needn’t use the return keyword.
JavaScript
// Arrow function for multiplying two numbersvalue = (a, b) => a * b;console.log(value(3, 5)); |
Output:
15
Example 2: When there are more than two lines to process
From the previous example, we can see that when there’s a single line of code to be executed we didn’t use the return keyword but if there are more than two lines to be processed, we need to use a return keyword. let’s demonstrate that with an example:
JavaScript
number = (a, b) => { c = 5; return (a + b) * c;};console.log(number(2, 3)); |
Output:
25
Example 3: Arrow function with no parameters. In the below code, we use an arrow function without any parameters and return the word “neveropen” as it is a single statement we don’t need to use the return keyword.
Syntax:
()=>{ expressions}
JavaScript
// Arrow function with no parametersconst string = () => "neveropen";console.log(string); |
Output:
neveropen
Example 4: Using the arrow function inside another function. In this example let’s find the length of strings in an array. we use the arrow function inside the map() function to accomplish this task. arrow function returns the length of each string.
JavaScript
// Initializing an array of stringslet array = ["sam", "sarah", "john"];// Map function used to find the length of stringslet lengths = array.map((string) => string.length);console.log(lengths); // [3,5,4] |
Output:
[3, 5, 4]
Differences and Constrictions of arrow functions from normal functions:
- It should not be used as a method because it lacks its own bindings to this or super.
- Within its body, it is unable to use yield.
- It doesn’t be used while return statements are present.
- keyword to be targeted (that is let, var, const)
- Not suited for methods like call, apply, and bind, which all require setting a scope.
- We can’t use a new keyword to create a new object.
- They are unable to be utilized as constructors.
- it doesn’t have arguments object and prototype property.
