From 385287838e2460c4af4b647e64583e2c8d9bd7b3 Mon Sep 17 00:00:00 2001 From: Subash Iglesias Date: Mon, 11 Nov 2019 19:07:11 +0530 Subject: [PATCH] fix(curriculum) - fixed function keyword not misspelled in debugging guide (#37711) * [ FIXES ] - fixed function keyword not misspelled * Update client/src/pages/learn/javascript-algorithms-and-data-structures/debugging/index.md Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: added comment back into example code --- .../debugging/index.md | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/client/src/pages/learn/javascript-algorithms-and-data-structures/debugging/index.md b/client/src/pages/learn/javascript-algorithms-and-data-structures/debugging/index.md index 4dfd153e59..679299853e 100644 --- a/client/src/pages/learn/javascript-algorithms-and-data-structures/debugging/index.md +++ b/client/src/pages/learn/javascript-algorithms-and-data-structures/debugging/index.md @@ -6,6 +6,41 @@ superBlock: JavaScript Algorithms and Data Structures ## Introduction to the Debugging Challenges Debugging is a valuable and (unfortunately) necessary tool for programmers. It follows the testing phase of checking if your code works as intended, and discovering it does not. Debugging is the process of finding exactly what isn't working and fixing it. -After spending time creating a brilliant block of code, it is tough realizing it may have errors. These issues generally come in three forms: 1) syntax errors that prevent a program from running, 2) runtime errors when code fails to execute or has unexpected behavior, and 3) semantic (or logical) errors when code doesn't do what it's meant to.

Modern code editors (and experience) can help identify syntax errors. Semantic and runtime errors are harder to find. They may cause your program to crash, make it run forever, or give incorrect output. Think of debugging as trying to understand why your code is behaving the way it is.

Example of a syntax error - often detected by the code editor:

function willNotWork( {
  console.log("Yuck");
}
// "function" keyword is misspelled and there's a missing parenthesis


Here's an example of a runtime error - often detected while the program executes:

function loopy() {
  while(true) {
    console.log("Hello, world!");
  }
}
// Calling loopy starts an infinite loop, which may crash your browser


Example of a semantic error - often detected after testing code output:

function calcAreaOfRect(w, h) {
  return w + h; // This should be w * h
}
let myRectArea = calcAreaOfRect(2, 3);
// Correct syntax and the program executes, but this gives the wrong answer
+After spending time creating a brilliant block of code, it is tough realizing it may have errors. These issues generally come in three forms: +1. syntax errors that prevent a program from running +2. runtime errors when code fails to execute or has unexpected behavior +3. semantic (or logical) errors when code doesn't do what it's meant to. + +Modern code editors (and experience) can help identify syntax errors. Semantic and runtime errors are harder to find. They may cause your program to crash, make it run forever, or give incorrect output. Think of debugging as trying to understand why your code is behaving the way it is. +Example of a syntax error - often detected by the code editor: + +```js +funtcion willNotWork( + console.log("Yuck"); +} +// "function" keyword is misspelled and there's a missing parenthesis +``` + +Here's an example of a runtime error - often detected while the program executes: + +```js +function loopy() { + while(true) { + console.log("Hello, world!"); + } +} +// Calling loopy starts an infinite loop, which may crash your browser +``` + +Example of a semantic error - often detected after testing code output: + +```js +function calcAreaOfRect(w, h) { + return w + h; // This should be w * h +} +let myRectArea = calcAreaOfRect(2, 3); +// Correct syntax and the program executes, but this gives the wrong answer +``` + Debugging is frustrating, but it helps to develop (and follow) a step-by-step approach to review your code. This means checking the intermediate values and types of variables to see if they are what they should be. You can start with a simple process of elimination.

For example, if function A works and returns what it's supposed to, then function B may have the issue. Or start checking values in a block of code from the middle to try to cut the search space in half. A problem in one spot indicates a bug in the first half of the code. If not, it's likely in the second.

This section will cover a couple helpful tools to find bugs, and some of the common forms they take. Fortunately, debugging is a learnable skill that just requires a little patience and practice to master.