Lab 4: Debugging and Scope

Welcome to the fourth lab of Team Edge!

In this lab, we cover scope and debugging.

See practice challenges below!

Not sure why there's a duck? Scroll down!

Challenge:

Go to debugger.js

Fix all of the bugs to make a functional Rock, Paper, Scissors Game!

Reference

Scope :

Scope describes the accessibility and visibility of variables throughout a program.

Scope is among the most important concepts of programming, particularly when writing large programs. Simple scoping oversights can cause an entire project to fail. As a programmer, it's absolutely essential that you know, on any given line of code, the scope of a given variable.

When declaring variables, you do so in a specific context. Generally we refer to two kinds of scoping contexts in programming: Local (a.k.a "block") and Global. See below for more details.

Imagine

You went to the Code Next Lab one day and are asking around for someone named Joe. The most common response you'd get is, "Joe who?" You'd say, "You know... Joe! The dude I went to elementary school with back in the day."

No one would know what you're talking about, since while they might know a Joe, their Joe isn't your Joe.

This example illustrates how local scope works. Everyone has their own version of Joe. You say Joe, I say Joe... but we're talking about completely different people.

function oakland() {

let joe = "a dude";

}

function newYork() {

let joe = "another dude";

}

Local Scope

Variables declared in functions have local scope, and are referred to as local variables. Local variables are invisible outside of the scope in which they were declared. They disappear after a function has finished running.

In JavaScript, variables have local scope when they are declared within functions, conditionals, or other blocks of code (within the curly braces).

let bar = 321;

function foo() {

bar = 123;

}

foo();

console.log(bar);

Global Scope

Variables declared outside of functions have global scope, and are referred to as global variables. Global variables are accessible everywhere in the program in which they are declared, including within functions.

A good practice is to declare all of your global variables at the top of your script.

What about parameters?

function foo(param) {

console.log(param);

}

foo("This will print if you remove the statement below.");

console.log(param);

/* However the line above will crash the whole program, since param is not defined globally*/

Parameters also have local scope. That is, they are only accessible while the function is running. This is why calling foo() with some text will print that text, but referencing param outside of the foo() will produce an error.

Practice

What do you think will happen when each code snippets is run? Make a prediction and reveal the answer to check if you got it right.

function tryMe() {

let str = "You won't see this.";

}

console.log(str);

Check your answer

You should get this error:

console.log(str);

ReferenceError: str is not defined

let str = "You will see this.";

function tryMe() {

let str = "You won't see this.";

}

console.log(str);

Check your answer

You should see "You will see this." printed in your terminal. The str that was printed in this case wasn't the one inside tryMe(), obviously, since trying to do that caused an error. Instead, we are printing the str that was declared outside of the function. That str is a global variable.

let bar = 321;

function foo() {

let bar = 123;

}

foo();

console.log(bar);

Check your answer

Because the bar within foo() is being declared, foo() is essentially ignoring the global bar declared at the top of the script.

function foo(param) {

console.log(param);

}

foo("Hello!");

console.log(param);

Check your answer

The script will successfully print "Hello!" but it it will crash once it tries to print param because param is not a global variable.

Other Common Bugs

Bugs are problems in a program that either prevent it from running, makes it run poorly, or otherwise causes it to behave in unintended ways. Bugs can more technically be referred to as errors.

There are three general error types across most languages, as seen here:

JavaScript console error messages

The JavaScript console will notify you if you have syntax or runtime errors. While the messages themselves might not say "syntax" or "runtime", the type of error can be deduced by reading the message itself. The error messages are intended to help debug the code.

if(x > y) {

ReferenceError: y is not defined

at Object.<anonymous>

(...\Desktop\script.js:2:8)

Here, the variable y wasn't declared above where we reference it (line 2).

Common Debugging Techniques

Here are some techniques that can be used to debug errors.

Isolate Code with Comments

There are times when the source of the error is not clear. Comments can be used to identify the source by hiding the code that works and narrowing down the code that is causing errors.

Clean up your mess

Many times the bugs will be syntax errors. These errors are more likely to pop up when the code is messy. Be sure to indent. Close off braces, parentheses, and quotation marks.

Rubber Ducking

Try explaining your code to someone else, preferably someone who knows little-to-none about programming. Doing so forces you slow down and simplify, which can inadvertently help you find and fix bugs that were hidden in plain sight (e.g., a pesky typo). It's like explaining your program, line by line, to an inanimate object... like a rubber duck.

console.log()

This function prints out messages to the console.

In the example on the right, the variable z is being assigned the value of the larger variable. After this code runs, you can print out the value of z to check that the logic is correct and it has stored the correct value.

if(x > y) {

console.log("x is greater than y, so set z to x");

z = x;

} else if (y > x){

console.log("y is greater than x, so set z to y");

z = y;

} else {

console.log("x and y are equal, so set z to 0");

z = 0;

}

Project: Food Order Bot

Additional Resources

Here are some very common error messages you have likely already encountered, or will encounter later, along with documentation explaining what they mean.

There are many others. For a full list of JavaScript errors, click here.

Fun fact: For some interesting reading, check out this article: Top 10 JavaScript errors from 1000+ projects. If you get these errors often, know that you are not alone!

Report abuse