JavaScript Debugging for freecodecamp

Debugging is the process of going through your code, finding any issues, and fixing them.

Issues in code generally come in three forms: syntax errors that prevent your program from running, runtime errors where your code has unexpected behavior, or logical errors where your code doesn’t do what you intended.

In this course, you’ll learn how to use the JavaScript console to debug programs and prevent common issues before they happen.

Use the JavaScript Console to Check the Value of a Variable

使用console.log來檢查每一個步驟的正確與否

let a = 5;

let b = 1;

a++;

// Only change code below this line

let sumAB = a + b;

console.log(a);

Understanding the Differences between the freeCodeCamp and Browser Console

There are many methods to use with console to output messages. log, warn, and clear to name a few. The freeCodeCamp console will only output log messages, while the browser console will output all messages. When you make changes to your code, it will automatically run and show the logs. The freeCodeCamp console is then cleared each time your code runs.

let output = “Get this to show once in the freeCodeCamp console and not at all in the browser console”;

console.log(output);

console.clear();

console.warn(output);

Use typeof to Check the Type of a Variable

Here are some examples using typeof:

console.log(typeof "");
console.log(typeof 0);
console.log(typeof []);
console.log(typeof {});

In order, the console will display the strings string, number, object, and object.

JavaScript recognizes seven primitive (immutable) data types: Boolean, Null, Undefined, Number, String, Symbol (new with ES6), and BigInt (new with ES2020), and one type for mutable items: Object. Note that in JavaScript, arrays are technically a type of object.

let seven = 7;

let three = “3”;

console.log(typeof seven);

console.log(typeof three);

Catch Misspelled Variable and Function Names

檢查是否有打錯字

let receivables = 10;

let payables = 8;

let netWorkingCapital = receivables – payables;

console.log(`Net working capital is: ${netWorkingCapital}`);

Catch Unclosed Parentheses, Brackets, Braces and Quotes

檢查標點符號的位置有沒有打錯

// let myArray = [1, 2, 3;

// let arraySum = myArray.reduce((previous, current => previous + current);

// console.log(`Sum of array values is: ${arraySum}`);

let myArray = [1, 2, 3];

let arraySum = myArray.reduce((previous, current) => previous + current);

console.log(`Sum of array values is: ${arraySum}`);

Catch Mixed Usage of Single and Double Quotes

檢查單引號和雙引號是否有混淆使用

let innerHtml = “<p>Click here to <a href=’#Home’>return home</a></p>”;

console.log(innerHtml);

Catch Use of Assignment Operator Instead of Equality Operator

記得條件是要使用 === 或是 == ，而不是只使用 =

let x = 7;

let y = 9;

let result = “to come”;

if(x === y) {

result = “Equal!”;

} else {

result = “Not equal!”;

}

console.log(result);

Catch Missing Open and Closing Parenthesis After a Function Call

設定完一個function不要忘記要有 ()

function getNine() {

let x = 6;

let y = 3;

return x + y;

}

let result = getNine();

console.log(result);

Catch Arguments Passed in the Wrong Order When Calling a Function

要把順序寫正確，你要的數學公式才會正確

function raiseToPower(b, e) {

return Math.pow(b, e);

}

let base = 2;

let exp = 3;

let power = raiseToPower(base, exp);

console.log(power);

Catch Off By One Errors When Using Indexing

從第0項開始，到最後一項的寫法是，

for (let k = 0; k < len; k++) {
  console.log(alphabet[k]);
}

function countToFive() {

let firstFive = “12345”;

let len = firstFive.length;

// Only change code below this line

for (let i = 0; i < len; i++) {

// Only change code above this line

console.log(firstFive[i]);

}

countToFive();

Use Caution When Reinitializing Variables Inside a Loop

修復雙矩陣的寫法

function zeroArray(m, n) {

// Creates a 2-D array with m rows and n columns of zeroes

let newArray = [];

for (let i = 0; i < m; i++) {

// Adds the m-th row into newArray

let row = [];

for (let j = 0; j < n; j++) {

// Pushes n zeroes into the current row to create the columns

row.push(0);

}

// Pushes the current row, which now has n zeroes in it, to the array

newArray.push(row);

}

return newArray;

}

let matrix = zeroArray(3, 2);

console.log(matrix);

console.log(zeroArray(4,3))

Prevent Infinite Loops with a Valid Terminal Condition

function myFunc() {

for (let i = 1; i <= 4; i += 2) {

console.log(“Still going!”);

}

myFunc()