Another example of writing error handling

I have just read through the Function return values chapter (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Return_values) and I have a question about the very last part.

It says

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.

Is this another example meant to use the throw, try, catch statements or something else?

I don’t think so.
I think another example is related to this sentence:

How about the square or cube root of the number? Or the circumference of a circle with a given radius?

It could make use of these, yes. I deliberately left this one open ended and vague to see what you’d come up with. By this sentence, I basically mean that you should look at handle cases where parameters are omitted, or provided in the wrong format. For example, you could do something like this with a function to draw a square, where sideLength is really needed, but color will just fall back to a default if omitted:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>try-catch test</title>
  </head>
  <body>
    <canvas></canvas>
    <script>
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');

    function drawSquare(sideLength, color) {
      try {
        if(color === undefined || typeof color !== 'string') {
          color = 'black';
          console.log('No color provided; falling back to black');
        }

        if(sideLength === undefined) {
          throw 'No side length provided.';
        } else if (typeof sideLength !== 'number') {
          throw 'Side length is the wrong data type.';
        } else {
          // code to draw the square
          ctx.fillStyle = color;
          ctx.fillRect(0,0,sideLength,sideLength);
        }
      } catch(e) {
        console.log('Error: ' + e);
      }
    }
    </script>
  </body>
</html>

I understand. Thank you for answering.

by the way @chrisdavidmills if I’m not wrong I think I didn’t see try...catch explained in the whole learning pathway

@Rafael_Green I think you’re right. I think I initially decided not to include it because I felt that it was kinda advanced … but then of course I moved on to covering OOJS, APIs, and async JS :wink:

Where do you think it would be best to include it? It would be nice to have a proper guide to error handling in JS, but I don’t have the time to write it at the moment.

edit: on second thought you can also (and usually do) throw objects so maybe we should put it under Introducing JavaScript objects

so, it’s kind of tricky question where to put it…

maybe we can explain it under JavaScript building blocks (without throwing objects) and mention it again (with objects) under Introducing JavaScript objects


Hi @chrisdavidmills,
I think the appropriate place to put error handling in JS is here:

try…catch in my option is part of control flow and you also have to know what is function for this