Debugging

Bugs are a normal part of programming—even experienced developers make mistakes! The key skill isn't avoiding all bugs, but knowing how to find and fix them efficiently.

What is a Bug?

A bug is when your code doesn't do what you expect. It might crash with an error, give wrong results, or behave strangely. The process of finding and fixing bugs is called debugging.

Types of Errors

// Missing closing parenthesis
console.log("Hello"  // SyntaxError!

// Missing quotes
let name = Alice;    // SyntaxError!

// Using undefined variable
console.log(userName);  // ReferenceError!

// Calling method on undefined
let user;
console.log(user.name);  // TypeError!

// Wrong operator
let average = (a + b) / 3;  // Should be / 2

// Off-by-one error
for (let i = 0; i <= arr.length; i++)  // Should be < not <=

Reading Error Messages

Error messages are your friends! They tell you:

• What went wrong (the error type)
• Where it happened (file and line number)
• Why (the error message)

Uncaught ReferenceError: userName is not defined
    at script.js:5:13

// Breaking this down:
// • Error type: ReferenceError
// • Problem: userName is not defined
// • Location: script.js, line 5, column 13

Try It Yourself

Debugging Techniques

1. console.log() - The Classic

Print values at different points to see what's happening:

function findMax(numbers) {
  console.log("Input:", numbers);  // What did we receive?

  let max = numbers[0];
  for (let num of numbers) {
    console.log("Checking:", num, "Current max:", max);
    if (num > max) {
      max = num;
      console.log("New max found:", max);
    }
  }

  console.log("Final result:", max);
  return max;
}

2. Check Your Assumptions

When code doesn't work, ask yourself:

• Is this variable what I think it is?
• Is this condition evaluating as I expect?
• Is this function being called at all?
• Am I accessing the right index/property?

3. Isolate the Problem

Comment out code to find exactly where things break:

// Comment out suspicious parts
function processData(data) {
  // Step 1
  let cleaned = cleanData(data);
  console.log("After step 1:", cleaned);

  // Step 2 - does it break here?
  // let transformed = transform(cleaned);
  // console.log("After step 2:", transformed);

  // Step 3
  // return format(transformed);
}

4. Browser Developer Tools

Common Bugs and Fixes

Debugging Mindset

Quick Quiz

Key Takeaways

• Bugs are normal—every programmer deals with them
• Read error messages carefully—they tell you what's wrong and where
• console.log() is your best friend for tracking values
• There are three types of errors: syntax, runtime, and logic
• Isolate problems by testing small pieces of code
• Browser developer tools are powerful debugging helpers

Congratulations!

You've completed all the core programming concepts! You now understand variables, data types, operators, conditionals, loops, functions, arrays, objects, and debugging. These fundamentals apply to every programming language!