Syntax errors vs logic errors

Generally speaking, there are two kinds of error you'll encounter while programming: syntax errors and logic errors. The former is easier to track down, while the latter tends to be more difficult.

For the examples in this post, let's assume an array of fruits:

var fruits = [
  "Guava",
  "Kiwi",
  "Lemon",
  "Lime",
  "Mango"
];

Syntax errors

Imagine we want to check if our fruits array contains a specific fruit. We could use the modern includes() method, but let's use the old-school indexOf() method for this example.

The indexOf() method accepts a value that you want to find in the array. If the value exists, the method will return its index; if not, it will return -1.

So, to check if our fruits array contains the string "Kiwi", we could do this:

// This message WILL be logged, because "Kiwi" exists in our array

if (fruits.indexOf("Kiwi") > -1) {
  console.log("We have a kiwi 🥝");
}

But imagine we accidentally mistype the indexOf() method. We could easily find out because the script would throw a TypeError.

In the following example, notice that I missed the e in the indexOf() method:

// This will NOT work because I mistyped indexOf()

if (fruits.indxOf("Kiwi") > -1) {
  console.log("We have a kiwi 🥝");
}

// TypeError: "fruits.indxOf is not a function"

The console would show us the error and point us to the relevant line number so we could fix it. For this reason, syntax errors are easier to track down and debug.

Logic errors

What would happen if our JavaScript was valid, but our logic was flawed?

// This message WILL NOT be logged.
// "Kiwi" exists in our array, so its value is NOT less than -1.

if (fruits.indexOf("Kiwi") < -1) {
  console.log("We have a kiwi 🥝");
}

In the example above, I accidentally used the less than (<) operator instead of the greater than (>) operator.

This is perfectly valid JavaScript, so we would never see an error. The code inside the if statement simply wouldn't run.

Instead, we'd be banging our heads against the wall, wondering why the hell our code wasn't working. Tiny logic errors like this are so easy to make, but incredibly tricky to spot!