If a function does not return a value, by default, it returns

Return values are just what they sound like — the values that a function returns when it completes. You've already met return values several times, although you may not have thought about them explicitly.

Let's return to a familiar example (from a in this series):

const myText = "The weather is cold";
const newString = myText.replace("cold", "warm");
console.log(newString); // Should print "The weather is warm"
// the replace() string function takes a string,
// replaces one substring with another, and returns
// a new string with the replacement made

The replace() function is invoked on the myText string, and is passed two parameters:

1. the substring to find ('cold').
2. the string to replace it with ('warm').

When the function completes (finishes running), it returns a value, which is a new string with the replacement made. In the code above, the result of this return value is saved in the variable

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

If you look at the replace() function MDN reference page, you'll see a section called . It is very useful to know and understand what values are returned by functions, so we try to include this information wherever possible.

Some functions don't return any value. (In these cases, our reference pages list the return value as

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

Generally, a return value is used where the function is an intermediate step in a calculation of some kind. You want to get to a final result, which involves some values that need to be calculated by a function. After the function calculates the value, it can return the result so it can be stored in a variable; and you can use this variable in the next stage of the calculation.

To return a value from a custom function, you need to use the return keyword. We saw this in action recently in our random-canvas-circles.html example. Our

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

Inside each loop iteration, three calls are made to the

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

function random(number) {
  return Math.floor(Math.random() * number);
}

This could be written as follows:

function random(number) {
  const result = Math.floor(Math.random() * number);
  return result;
}

But the first version is quicker to write, and more compact.

We are returning the result of the calculation

function random(number) {
  return Math.floor(Math.random() * number);
}

So when you execute the following:

ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);

If the three

function draw() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

function random(number) {
  return Math.floor(Math.random() * number);
}

function random(number) {
  return Math.floor(Math.random() * number);
}

function random(number) {
  return Math.floor(Math.random() * number);
}

ctx.arc(500, 200, 35, 0, 2 * Math.PI);

The function calls on the line are run first, and their return values are substituted for the function calls, before the line itself is then executed.

Let's have a go at writing our own functions featuring return values.

1. First of all, make a local copy of the function-library.html file from GitHub. This is a simple HTML page containing a text

   function random(number) {
     return Math.floor(Math.random() * number);
   }
   

   5 field and a paragraph. There's also a

   function random(number) {
     return Math.floor(Math.random() * number);
   }
   

   6 element, in which we have stored a reference to both HTML elements in two variables. This little page will allow you to enter a number into the text box, and display different numbers related to it in the paragraph below.
2. Let's add some useful functions to this

   function random(number) {
     return Math.floor(Math.random() * number);
   }
   

   6 element. Below the two existing lines of JavaScript, add the following function definitions:

   function squared(num) {
     return num * num;
   }
   
   function cubed(num) {
     return num * num * num;
   }
   
   function factorial(num) {
     if (num < 0) return undefined;
     if (num === 0) return 1;
     let x = num - 1;
     while (x > 1) {
       num *= x;
       x--;
     }
     return num;
   }
   

   The

   function random(number) {
     return Math.floor(Math.random() * number);
   }
   

   8 and

   function random(number) {
     return Math.floor(Math.random() * number);
   }
   

   9 functions are fairly obvious — they return the square or cube of the number that was given as a parameter. The

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   0 function returns the factorial of the given number.
3. Next, we're going to include a way to print out information about the number entered into the text input. Enter the following event handler below the existing functions:

   input.addEventListener("change", () => {
     const num = parseFloat(input.value);
     if (isNaN(num)) {
       para.textContent = "You need to enter a number!";
     } else {
       para.textContent = `${num} squared is ${squared(num)}. `;
       para.textContent += `${num} cubed is ${cubed(num)}. `;
       para.textContent += `${num} factorial is ${factorial(num)}. `;
     }
   });
   

   Here we are adding a listener to the

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   1 event. It runs whenever the

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   1 event fires on the text input — that is, when a new value is entered into the text

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   3, and submitted (e.g., enter a value, then un-focus the input by pressing Tab or Return). When this anonymous function runs, the value in the

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   3 is stored in the

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   5 constant. Next, we do a conditional test. If the entered value is not a number, an error message is printed to the paragraph. The test looks at whether the expression

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   6 returns

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   7. The

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   8 function tests whether the

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   5 value is not a number — if so, it returns

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   7, and if not, it returns

   ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
   

   1. If the test returns

   ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
   

   1, the

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   5 value is a number. Therefore, a sentence is printed out inside the paragraph element that states the square, cube, and factorial values of the number. The sentence calls the

   function random(number) {
     return Math.floor(Math.random() * number);
   }
   

   8,

   function random(number) {
     return Math.floor(Math.random() * number);
   }
   

   9, and

   function random(number) {
     const result = Math.floor(Math.random() * number);
     return result;
   }
   

   0 functions to calculate the required values.
4. Save your code, load it in a browser, and try it out.

Note: If you have trouble getting the example to work, feel free to check your code against the finished version on GitHub (see it running live also), or ask us for help.

At this point, we'd like you to have a go at writing out a couple of functions of your own and adding them to the library. How about the square or cube root of the number? Or the circumference of a circle with a given radius?

Some extra function-related tips:

• Look at another example of writing error handling into functions. It is generally a good idea to check that any necessary parameters are validated, and that any optional parameters have some kind of default value provided. This way, your program will be less likely to throw errors.
• Think about the idea of creating a function library. As you go further into your programming career, you'll start doing the same kinds of things over and over again. It is a good idea to create your own library of utility functions to do these sorts of things. You can copy them over to new code, or even just apply them to HTML pages wherever you need them.

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Functions.

So there we have it — functions are fun, very useful, and although there's a lot to talk about in regards to their syntax and functionality, they are fairly understandable.

If there is anything you didn't understand, feel free to read through the article again, or to ask for help.

What will be the default return value if a function does not return anything?

What function does not return a value?

When a function does not return any value what is the by default return value for that function in Python?

What happens if a function does not return anything?