In this tutorial, you will learn JavaScript arrow function and how to use this function. This slightly differs from regular functions.
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
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]
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);
If the arrow function has no parameter, you must use the parentheses, like this:
() => { statements }
</pre>
See the following example.
```js
let logDoc = () => console.log(window.document);
logDoc();
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;
There are 3 main differences in regular functions and arrow functions in JavaScript.
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.
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.
☞ Learn Vue.js from scratch 2018
☞ Learn JavaScript - Become a Zero to Hero
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ JavaScript Programming Tutorial Full Course for Beginners