JavaScript Arrow functions

Arrow functions allow you to shorten the definition of regular functions. Arrow functions are formed with an arrow sign (=>) preceded by the function’s parameters in parentheses and followed by the actual body of the function.

(parameters) => action_functions

For example, let’s first take an ordinary primitive function that prints a message to the console:

 
function hello(){
    console log("Hello");
}
hello(); // call the function

Now let’s convert it to an arrow function:

let hello = ()=> console.log("Hello");
hello();

In this case, the arrow function is assigned to the variable hello, through which you can then call this function.

Here we do not use parameters, so empty brackets are specified()=> console.log(“Hello”);

Further, through the name of the variable, we can call this function.

Passing parameters

Now let’s define an arrow function that takes one parameter:

let print = (mes)=> console.log(mes);

print("Hello Metanit.com");
print("Welcome to JavaScript");

Here, the arrow function takes one parameter mes, the value of which is printed to the browser console.

If an arrow function has only one parameter, then the parentheses around the parameter list can be omitted:

let print = mes=> console.log(mes);

print("Hello Metanit.com");
print("Welcome to JavaScript");

Another example – let’s pass two parameters:

let sum = (x, y)=> console.log("Sum =", x + y);

sum(1, 2); // Sum = 3
sum(4, 3); // Sum = 7
sum(103, 2); // Sum = 105

Returning a result

To return a value from an arrow function, we only need to specify it after the arrow. For example, let’s define a function that returns the sum of two numbers:

let sum = (x, y)=> x + y;

console.log(sum(1, 2));     // 3
console.log(sum(4, 3));     // 7
console.log(sum(102, 5));   // 105

Another example is to return a formatted string:

const hello = name => `Hello, ${name}`;

console.log(hello("Tom"));              // Hello, Tom
console.log(hello("Bob"));              // Hello, Bob
console.log(hello("Frodo Baggins"));    // Hello, Frodo Baggins

In this case, the function hellotakes one parameter name – a conditional name and creates a greeting message based on it.

Returning an object

Of particular note is the case when an arrow function returns an object:

let user = (userName, userAge) => ({name: userName, age: userAge});

let tom = user("Tom", 34);
let bob = user("Bob", 25);

console.log(tom.name, tom.age); // "Tom", 34
console.log(bob.name, bob.age); // "Bob", 25

An object is also defined with curly braces, but it is enclosed in parentheses.

A multi-instruction function

In the examples above, all arrow functions had only one instruction. If the function must perform more actions, then, as in a normal function, they are enclosed in curly braces:

const square = n => {
    let result = n * n;
    console log(result);
}
 
square(5); // 25
square(6); // 36

And if you need to return a result, the operator is used to return, as in a regular function:

const square = n => {
    let result = n * n;
    return result;
}
 
console.log(square(5)); // 25