If/Else Logic: With This 1 Easy Tip...

We all learn from our mistakes. Since I started teaching a few years ago, I have had the benefits of learning from a lot of other people's mistakes too. This is one I've seen so frequently that I thought it would be worth writing about. It's an easy mistake to make, easy to fix, but hard to spot if you're not looking for it.

This is an example I frequently give to people just starting out with coding, learning about boolean values and if/else logic. You are a spy diffusing a bomb. You are on the phone with your resident scientist back at the lab. Let's say for the sake of not infringing any copyrights that her code name is R - certainly not Q. Different scientist, ok? You are confronted with 2 wires and you don't know what to do. R helpfully instructs you that "If one of the wires is red, cut the red one, but not the other one. Otherwise, throw the bomb out the window and run like hell - there's nothing you can do. Before writing this out in code, how would we write this in English?

"If the color of wire #1 is red, then cut it. Or, if wire #2 is red, then cut that. Otherwise, toss it and run." Sounds easy right? Let's write some JavaScript!

if (wire1Color = "red") {
  console.log("Cut wire 1!");
} else if (wire2Color = "red") {
  console.log("Cut wire 2!");
} else {
  console.log("Toss the bomb and run!");
}

Looks good right? Let's try some values.

var wire1Color = "red";
var wire2Color = "green";
if (wire1Color = "red") {
  console.log("Cut wire 1!");
} else if (wire2Color = "red") {
  console.log("Cut wire 2!");
} else {
  console.log("Toss the bomb and run!");
}

Great! We've set Wire #1's color to red, and our program tells us to cut wire1. Let's test with Wire #1 set to green and wire #2 set to purple. This should tell us to toss the bomb our the window, right?

var wire1Color = "green";
var wire2Color = "purple";
if (wire1Color = "red") {
  console.log("Cut wire 1!");
} else if (wire2Color = "red") {
  console.log("Cut wire 2!");
} else {
  console.log("Toss the bomb and run!");
}

Welp, this could cause a huge explosion. What is going on? The key is this, Mr. Bond my dear spy.

wire1Color = "red"

The first line of our if statement is setting the color of our first wire to red. So it will always be true, and essentially our spy is painting that wire red and then cutting it to diffuse the bomb. Our scientist will face palm when she sees this code. Let's fix it.

var wire1Color = "green";
var wire2Color = "purple";
if (wire1Color === "red") {
  console.log("Cut wire 1!");
} else if (wire2Color === "red") {
  console.log("Cut wire 2!");
} else {
  console.log("Toss the bomb and run!");
}

There! Now that you know to look for it, you can avoid this mistake and not have any bombs blowing up in your face. Do not think yourself immune. I've seen people who have been coding for many years still make this mistake. It's easy to overlook because when you think about the logic in your mind, it makes grammatical sense. "If thing #1 = thing #2." It's especially easy to do if you are focusing on more advanced concepts and looking for bugs that are harder to fix. So be warned! Keeping fundamentals like this in the front of your brain will help you avoid making more work for yourself.

Tags: 
Programming
Web Development