Debugging is essential for programmers, coders, software engineers and developers.

Debugging is finding and fixing errors (and bugs) in your code. If you can debug quickly, then you can save a lot of time in coding.

Most beginners in coding are frustrated because there are bugs in their code, and they can't fix them quickly enough.

Syntax bugs

Syntax bugs are the most common type of bug in programming. They occur when the programmer makes a mistake in the syntax of the code, such as forgetting a semi-colon or misspelling a variable name.

What are the common syntax errors?

Missing/Unmatched Parentheses: the syntax error here is that the parentheses are not properly matched. console.log(foo(2, 3) should be console.log(foo(2, 3)):

function foo(a, b) {
  return a + b
}

console.log(foo(2, 3)

Undeclared/Misspelled Variables: the fo and bar variables are undefined. This is because they are either undeclared or misspelled:

var foo = 'bar';

console.log(fo); // 'fo' is undefined
console.log(bar); // 'bar' is undefined

Unmatched/Missing Quotes: the quotation marks " and ' don't match:

const example = "This is an example'

console.log(example)

How to avoid syntax errors and bugs?

Indenting your code properly makes it much easier to read your code and spot bugs. When you indent your code, you are essentially creating blocks of code that are easy to identify.

Bad Indentation:

function sort(array) {
  for (let i = 0; i < array.length - 1; i++) {
let minIndex = i

for (let j = i + 1; j < array.length; j++) {
if (array[j] < array[minIndex]) {
minIndex = j
}
}

if (minIndex !== i) {
  const temp = array[i]
array[i] = array[minIndex]
array[minIndex] = temp
}
}

return array
}

Good Indentation:

function sort(array) {
  for (let i = 0; i < array.length - 1; i++) {
    let minIndex = i

    for (let j = i + 1; j < array.length; j++) {
      if (array[j] < array[minIndex]) {
        minIndex = j
      }
    }

    if (minIndex !== i) {
      const temp = array[i]
      array[i] = array[minIndex]
	  array[minIndex] = temp
    }
  }

  return array
}

Isn't it much easier to read code with good indentation? In general, it is just a good idea to keep your code clean and readable. If you are working on a project with other people, they will appreciate being able to read your code easily.

Use a prettifier to automatically format your code so it's easy to read.

If you are using VScode, you can install one of the following add-ons:

• Prettier - Code formatter: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Beautify: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Read the error message carefully. Usually the error messages already tell you that you have a syntax error, and they will also tell you where the syntax error happens. You just have to read it carefully.

Here are 10 examples of syntax error messages in JavaScript:

1. "Unexpected token }"
2. "missing ) after argument list"
3. "Uncaught SyntaxError: Unexpected token ILLEGAL"
4. "Uncaught ReferenceError: Invalid left-hand side in assignment"
5. "Uncaught SyntaxError: Unexpected token }"
6. "Uncaught ReferenceError: foo is not defined" 
7. "Uncaught SyntaxError: Unexpected token }"
8. "Uncaught ReferenceError: Can't find variable: foo"
9. "Uncaught SyntaxError: Unexpected token }"
10. "Uncaught ReferenceError: Can't find variable: bar"

Logic bugs

Logic bugs basically mean that your logic is wrong. So, even when your code has no syntax error, it's producing the wrong outputs and unexpected outcomes.

To debug a logic bug, you need to understand what the code is supposed to do and what it is currently doing. This can be difficult, especially if the code is complex.

Sometimes you can use a debugger to help you find the logic bug. A debugger is a tool that allows you to execute the code one line at a time and see the values of variables. This can help you to understand what is going wrong.

You can learn to use VSCode's debugger here: https://code.visualstudio.com/docs/editor/debugging.

Syntax bugs vs. Logic bugs

In programming, here's how we solve problems (almost every single time):

1. understand the problem we are solving
2. create a solution using our own logic (which can be explained in plain English)
3. if the solution is wrong -> logic bugs
4. translate logic into code
5. if the translation is wrong -> syntax bugs

Code along but it's wrong

When you are following along with some online tutorials and your code doesn’t seem to work, you can compare your code with the tutorial version using a diff checker like https://www.diffchecker.com/.

How to ask programming questions

If you're new to programming, it can be tough to know how to ask questions. You might be worried about sounding stupid, or you might not even know where to start.

When you are asking somebody a programming question:

• always be specific
• always include all relevant information

Here's the most non-specific question: "It doesn't work.". Software breaks all the time, even for the pros. But there are better ways to ask for help when things don't work.

A better way to ask for help is "It doesn't work. I did a, b and c already. I was expecting x, but the code is giving me y. I also tried to debug using this and that. Can you look at my code? Here's the link to my code: <a link to Github repository>"

If you genuinely have no idea what you're doing, then you can say: "I have no idea what I am doing. Can you help me understand which part I don't understand? Can you give me some resources in understanding the big picture?"

Be Patient

There's a reason why software engineers are paid 2x to 3x the median salary in every country on Earth. Programming and software are supposed to be hard.

It's hard but it's not rocket science hard, and millions of people have learned it.

You just need to commit the time, be patient and persevere through challenges. At Altcademy, mentors will help you debug when necessary so you don't waste too much time.

The good news is that the more you code, the better you get, and the faster you will debug.