Recognize Syntax, Reference and Logic Errors

A syntax error prevents parsing; a reference error can occur when a name is unavailable; a logic error can produce the wrong school result without throwing. Identify which stage fails before choosing a fix.

Before this topic, review Cancel Unneeded Requests if its terms are unfamiliar.

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

Errors are inevitable in programming. In JavaScript, errors can occur due to typos, invalid operations, missing variables, or unexpected behavior at runtime.

Understanding error types and how to catch them is important to writing reliable code. JavaScript offers built-in mechanisms like try...catch to help developers gracefully handle unexpected issues.

• ReferenceError: Occurs when a variable that hasn’t been declared is accessed.
• TypeError: Happens when an operation is performed on a value of the wrong type.
• SyntaxError: Raised when JavaScript code has invalid syntax.
• RangeError: Happens when a value is out of an allowable range.
• EvalError: Related to the eval() function (rarely used today).
• URIError: Occurs when functions like decodeURI() or encodeURI() are misused.

This error is thrown when you try to access a variable that hasn’t been declared.

// ReferenceError Example
try {
  console.log(userName); // userName is not defined
} catch (error) {
  console.error("Caught a ReferenceError:", error.message);
}

Caught a ReferenceError: userName is not defined

Thrown when a value is not of the expected type. For instance, calling a method on undefined.

// TypeError Example
try {
  let num = 42;
  num.toUpperCase(); // toUpperCase() is a string method
} catch (error) {
  console.error("Caught a TypeError:", error.message);
}

Caught a TypeError: num.toUpperCase is not a function

Occurs when the code structure is not valid JavaScript. These errors must be caught at eval-time.

// SyntaxError Example using eval
try {
  eval('function () {'); // invalid syntax
} catch (error) {
  console.error("Caught a SyntaxError:", error.message);
}

Caught a SyntaxError: Unexpected token ')'

Thrown when a number is outside of its allowable range, e.g., when creating an array with invalid length.

// RangeError Example
try {
  let items = new Array(-5);
} catch (error) {
  console.error("Caught a RangeError:", error.message);
}

Caught a RangeError: Invalid array length

Happens when decodeURI or encodeURI is used incorrectly.

// URIError Example
try {
  decodeURI('%'); // invalid URI component
} catch (error) {
  console.error("Caught a URIError:", error.message);
}

Caught a URIError: URI malformed

JavaScript provides try...catch to handle errors:

try {
  // risky code here
} catch (error) {
  // handle error here
  console.log("Error caught:", error.message);
} finally {
  console.log("This block always runs");
}

If errors are not caught using try...catch, JavaScript will stop execution and show the error in the console. In production, this could mean breaking your entire web page or script.

Q: Can all errors be caught with try...catch?

A: No, SyntaxError that occurs outside eval cannot be caught using try...catch. Also, asynchronous errors need special handling (like .catch() for Promises).

Q: Can you throw custom errors?

A: Yes, using throw. You can throw a string, number, object, or an instance of Error.

try {
  throw new Error("This is a custom error");
} catch (e) {
  console.log("Custom Error:", e.message);
}

Custom Error: This is a custom error

By understanding error types and handling them effectively, you can make your JavaScript programs more robust and user-friendly. Mastering try...catch and identifying error patterns is an essential skill for every developer.

A syntax error in the same source cannot be caught by a try block that never parsed. Avoid publishing raw personal data in diagnostic logs.

Your task: Replace missingMark with 72. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

The value is now available directly, so the try block prints it without throwing.

A syntax error prevents parsing; a reference error can occur when a name is unavailable; a logic error can produce the wrong school result without throwing. Identify which stage fails before choosing a fix.

Check your variation against this explanation: The value is now available directly, so the try block prints it without throwing.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.