javaScript arrow function examples; In this tutorial, you will learn the JavaScript arrow function and how to use this function. This slightly differs from regular functions.
JavaScript Arrow Function es6 Example
In javascript, arrow functions provide you with a simple way to write a function in a more concise and more readable way.
The following example addition of two numbers using the js regular function ( define a function using function keyword ):
let addition = function(x,y) {
return x + y;
}
console.log(addition(40,20)); // 60
The following example uses an arrow function which is similar to the above addition() function:
let addition = (x,y) => x + y; console.log(addition(40,20)); // 60;
Here, the js arrow function has one add two numbers using arithmetic operators and returns the result.
More concise and more readable syntax of arrow function, see the following:
let func = (arg1, arg2, ...argN) => expression
Note that it’s important, If you use the block syntax in arrow function, you need to use the return keyword, see the following:
let addition = (x, y) => { return x + y; };
If you use typeof operator, it returns function. See the following
let addition = (x, y) => { return x + y; };
console.log(typeof addition); // function
javascript arrow function with multiple parameters
If js arrow function has two or more parameters, you use the following syntax:
(p1, p2, ..., pn) => expression;
The following expression:
=> expression
is similar to the following expression:
=> { return expression; }
If you have numeric array and want to sort this array, See the following example:
let numbers = [4,2,6];
numbers.sort(function(a,b){
return b - a;
});
console.log(numbers); // [6,4,2]
The following code is similar to above function and it’s more concise and more readable in arrow function, see the following:
let numbers = [4,2,6]; numbers.sort((a,b) => b - a); console.log(numbers); // [6,4,2]
javascript arrow function with one parameters
If an arrow function also takes a single parameter, you use the following syntax:
(p1) => { statements }
Note that you can omit the parentheses as follows:
p => { statements }
The following example uses an arrow function as a parameter of the map() method that converts an array of strings into an array of the string’s lengths.
let names = ['John', 'Mac', 'Peter']; let lengths = names.map(name => name.length); console.log(lengths);
javascript arrow function with No parameters
If the arrow function has no parameter, you must use the parentheses, like this:
() => { statements }
See the following example.
let logDoc = () => console.log(window.document); logDoc();
multiline arrow function javascript
If you want to write a multiline in arrow functions. You can do it, but it does not allow use a line break between the parameter and arrow ( =>).
For example, the following code produces a SyntaxError:
let multiply = (x,y) => x * y;
However, the following code works absolutely fine:
let multiply = (x,y) => x * y;
Want to break the code line from multiline arrow function, shown in the following example:
let multiply = ( x, y ) => x * y;
Arrow function vs. regular function
There are 3 main differences in regular functions and arrow functions in JavaScript.
- You don’t need to use curly brackets if there’s only one statement in the function. In the cases where you omit the curly brackets, you can also omit the return keyword, as the return is implicit.
- this is bound lexically, meaning that fat arrow functions don’t have their own this and that this refers to the parent scope.
- They can’t be used as constructors or generators.
- There’s no parameters variable available with arrow functions.
It is a great practice to use arrow functions for callbacks and closures because the syntax of arrow functions are more concise and more readable.
Conclusion
In this tutorial, you have learned about the JavaScript arrow function syntax and how to use arrow functions to make the code more concise and more readable.
