JavaScript Arrow Functions | More Concise JS Function

JavaScript Arrow Functions | More Concise JS Function

  • 112

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.

In this tutorial, you will learn JavaScript arrow function and how to use this function. This slightly differs from regular functions.

JavaScript arrow 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

Arrow functions 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]

Arrow functions with a single parameter

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);

Arrow functions with no parameter

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();

Multiline arrow Function

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.