Another example of writing error handling

MDN Learn
#1

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?

#2

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?

#3

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>
#4

I understand. Thank you for answering.

#5

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

#6

@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.

#7

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:

image
image452×513 21 KB

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

#8

@chrisdavidmills
reading the official python tutorial, I see that they explain about errors and exceptions before talking about classes

so, maybe this is also good for javascript

so, the suggested place to explain about errors and exceptions in our course is here:

image
image452×513 21 KB

#9

I am currently studying through the Asynchronous JavaScript module and I noticed that Error handling is explained here. It is mentioned and explained in chapters Introducing asynchronous JavaScript, Graceful asynchronous programming with Promises and Making asynchronous programming easier with async and await.

Perhaps it might make sense to only add a little example of try and catch blocks to the functions module (like the one you posted above), with just a brief explanation what is happening here. Just so that the reader gets a basic idea of what is possible to do with such blocks.