Errors and AI

Interpreting errors

Before we continue to learn new JavaScript concepts, let’s pause for a moment to talk about how to deal with errors. As an example, try running the following line:

console.log(hello);

The goal with this line is to output the text hello to the console. However, within the web inspector console, the above line will instead generate the following error:

Uncaught ReferenceError: hello is not defined
    at app.js:1:13

When you see an error like this, don’t be discouraged. Errors are actually a good thing because they provide clues to fix your code.

For example, the above error output tells us what file/line/character the error occurs on (app.js:1:13), which in this example is the file app.js, line 1, character 13.

This may not seem useful in our 1 line file, but imagine your file had hundreds of lines of code.

In the output, we also see this specific error message: Uncaught ReferenceError: hello is not defined.

The issue here is our String of hello is not surrounded in quotes, so JavaScript is not recognizing it as a String and instead interprets it as a variable, which has not been defined.

To resolve this error, update the code to surround hello in quotes (single or double will work):

console.log('hello');

Output:

hello

Working with AI

The above error was obviously straightforward, but this is not always the case. If you’re stuck on an error, it can be helpful to input your code and the resulting error into a generative AI program for guidance.

For example, I posed the above issue to an AI program...

Prompt:

My JavaScript code "console.log(hello)" is producing the error "ReferenceError: hello is not defined". Why?

AI Response:

The error "ReferenceError: hello is not defined" occurs because JavaScript is attempting to print the value of a variable named `hello`, but it has not been defined before the `console.log()` statement.
Here’s what’s happening:

JavaScript encounters the console.log(hello) statement.

It tries to find the value of the variable hello.

Since hello has not been previously defined (i.e., assigned a value), JavaScript raises a ReferenceError indicating that the name hello is not defined.

To fix this error, you need to define the variable hello before trying to print its value.

For example:
let hello = "Hello, World!";
console.log(hello);
This will assign the string "Hello, World!" to the variable hello and then print its value without causing a ReferenceError.

There’s a lot of valuable information in this reply, and it mirrors our explanation given above - that JavaScript is interpreting hello as a variable which has not been defined.

But note that the AI is assuming that our intention was to have a variable called hello and we just need to define it to resolve the issue. But this does not match our actual intention, which was to print out hello as a string.

Knowing this, we can nudge the AI in the right direction:

Prompt:

I want JavaScript to actually print the string hello.

Response:

If you want JavaScript to print the string "hello" as it is, you need to enclose it in either single quotes (') or double quotes ("). Otherwise, JavaScript will interpret `hello` as a variable and try to print its value. Here’s how you can print the string "hello":
Using single quotes:
console.log('hello');
Using double quotes:
console.log("hello");
Both of these will print the string "hello" to the console.

There we go!

AI points to remember

Some takeaways from this “interaction” and how you’ll use AI in this course:

It’s ok to ask AI for assistance; part of being a modern day programmer is learning to to effectively and responsibly harness AI.
AI does not always full understand our problem or intentions, and can provide misleading information because of that. Always be on the lookout for these “miscommunications” and understand that working with AI is often an iterative process used to arrive at an appropriate solution.
Be aware of how often you’re asking AI to generate code for you vs. helping you with code you have already written. When starting out, relying too much on AI to generate code can be detrimental to the learning process.
When you do ask AI to generate code, it should only be for little “bites” of code, not the whole meal. E.g.
- It is appropriate to ask AI “In JavaScript how can I sort an array alphabetically?"
- It is not appropriate to ask “How can I write a JavaScript program that shows a user 10 words in alphabetical order then asks them to recall those words in the same order in which they were presented?”
If AI provides you with code you don’t understand or uses concepts we have not yet covered, take time to ask follow-up questions and do research until you understand the solutions it is providing you. You should be able to explain any code you submit for work in this course, and if we suspect you are over-using AI, we may ask you to explain your code.
Any prompts you enter into an AI program should be recorded in your weekly outside resources log. Recording this information will help use make sure you are most effectively (and appropriately) using AI.

Parsing confusion

In many cases, the errors you see will clearly and accurately point you in the direction of the problem. For example, this code:

alert(participantName);

...produces this error:

Uncaught ReferenceError: participantName is not defined at app.js: `: 1:7

In this example we’re told exactly what the problem is - we’re referencing a variable participantName that has not yet been defined.

Now compare that to this code:

alert(Welcome to the experiment);

...and its resulting error:

Uncaught SyntaxError: missing ) after argument list (at app.js:1:7)

This error is not as helpful as the first because the code we wrote is creating parsing confusion.

Parsing confusion happens when the JavaScript parser (i.e. interpreter) is thrown off by our syntax such that it reports back with something that is either a) not helpful and/or b) not actually the source of our problem.

In this case, JavaScript is interpreting Welcome as a variable (since it is not surrounded in quotes), and is expecting some logical operator to follow such as + (to concatenate something to that string), or , to pass more variables as arguments to the alert method. Instead, it encounters a space which “confuses” the interpreter resulting it it being unable to locate the closing ) at the end - hence the error message we see.

Another example - let’s say you had filled in some placeholder code and forgot to replace it before refreshing the page:

alert([my code here]);

This would produce this error:

Uncaught SyntaxError: Unexpected identifier 'code' (at app.js:10:11)

In this code, we (the humans) see the square brackets as a placeholder, but in JavaScript, square brackets are used to define arrays. Based on this, it thinks we’re passing the alert method an array that starts with an item called my. Following that, it expects a comma to identify the next item in the array, but instead it encounters the word code, and hence the error message we see.

Parsing confusion take-away

Seeing the above examples, it’s important to understand that error messages can not always be taken literally. Use them as a starting point - they may be able to clearly and accurately point you in the right direction. Sometimes, however, they might not make sense because they are completely thrown off by the syntax you are using. In that case, you have to look beyond the error message and closely study the code to look for the problem.

You might also share the code and error message with a AI program for further guidance, as AI programs can often better handle parsing confusion than the the JavaScript interpreter can.

Zoom out

Another tip when interpreting errors - start looking at the specific line number the error message gives you, but understand that might not actually be where the underlying problem is.

Sometimes the underlying problem might be before the indicated line number, but it doesn't actually trigger a problem with the interpreter until the indicated line.

In short, always look at the bigger picture context of your code when tracking down errors.