Function is a block of code in JavaScript which allows its recurring execution. In other words it’s a code that you can use several times without actually writing it again. The use of functions requires a deep understanding of the return operator. That is a statement which stops the function and gives the result of its execution.

For example, you want to create a function for calculating the product of two numbers. After running the code below, the program will of course make the calculation but it will not give the result. That’s where the return operator is indispensable.

function product(a, b) {
a*b;
}
product(3, 6);

In the following code the return operator indicates the end of the function and allows you to assign its result to a variable. You can even call the function somewhere directly in expression and use the result without assigning to any variables.

function product(a, b) {
return a*b;
}
result = product(3, 6);
console.log(result); // logs 18

Notes on the return statement

There can be several return statements in a block. For example, you want to create a function to calculate the difference of two numbers if the first one is bigger.

In the code below you can see the use of two return operators in the same function. Note that for the case when a is bigger than b the function stops executing and does not perform the next command of writing to the console. That’s why it’s highly recommended to write return at the end of the block.

function calc(a, b) {
if (a > b) {
return a - b;
console.log ("The difference will be calculated"); // does not log anything
}
else return a+ b;
}
console.log(calc(6, 3)); // logs 3
console.log(calc(3, 6)); // logs 9

Using this statement you can return values of various data types: numbers, strings, booleans, arrays, objects and even functions. Moreover, you may or may not actually return any value. The return operator without anything on the right will just close the function. It’s the same as if it returned the undefined value.

There is another feature you need to pay attention to: you are not allowed to add any line feeds after return because the JS interpreter will automatically add a semicolon there and the function will stop working. In the following example, note how the multiplication is not going to be executed and the function will return undefined.

function product(a, b) {
return
a*b;
}
console.log(product(3, 6)); // logs "undefined"

If you need to return a result of a very long expression, you can use parentheses. The code below may look weird however it’s working.

function calc(number1, number2) {
return (
number1*number2 +
number1/number2
);
}
console.log(calc(3, 6)); // logs "18.5"
}

The word return is a reserved word in JS and it’s not allowed to use it for naming your own functions or variables.

Arrow functions

For a shorter syntax so called “arrow functions” were created where the return operator is replaced with =>. In order to create such a function you need to specify the arguments and surround them by parentheses, then write an equal sign and a greater-than sign and finally specify the action.

As a result your function for calculating the product may look like this: (a, b) => a*b. If there is only one argument to pass, you can omit the parentheses. This arrow function is anonymous but you can assign it to a variable and use it multiple times. You don’t use the reserved word return in this case however, the function does return you the result.

product = (a, b) => a*b;
console.log(product(3, 6));

These functions are very brief and easy to use. They are applied mostly in the situations when a short action is needed and it’s not efficient to write a long code for it.

Returning multiple values

When you call a function in JavaScript, you can get back one value only, using the return statement like in the example below.

function getName () {
return "Max";
}
function getColor (){
return "black";
}

There is a simple trick to get several values returned by one function - the use of arrays. It’s normal and is possible thanks to the array destructuring in JavaScript. In the following example you can see how easy it is. The function returns two strings at the same time in the form of an array. Then it is assigned to variables and now it’s possible to use the values separately.

function getInfo () {
return ["Max", "black"];
}
[nickname, color] = getInfo();
console.log(nickname); // logs "Max"

Note that the order of variables you specify inside the square brackets is very important. If you state “[color, nickname]” instead, the expression “console.log(nickname)” would print “black”.

You can as well return the object and use its destructuring again. The previous code is rewritten in this way below. Two string properties are returned by the same function. In this case the order of the variables in curly brackets does not matter because these are the named parameters and you can access them flexibly. The following example proves it.

function getInfo () {
return {
nickname : "Max",
color : "black"
};
}
const {color, nickname} = getInfo();
console.log(nickname); // logs "Max"

Summary

In conclusion, return is an important statement in any JavaScript function as it allows you to stop the function when you want and give you back the result of executing certain commands. With the help of this operator you can assign the result returned by your method to a variable or use it in further expressions.

A single function can return only one value in JavaScript. However, if you need more, you can always wrap your data into an array and pass it as a result. Then using destructuring you can unpack it and continue using it as separate variables. The same concept works for objects as well.