DEV Community

loading...

Debugging Notes

rthefounding profile image Randy Rivera ・3 min read

Catch Use of Assignment Operator Instead of Equality Operator

  • Branching programs, i.e. ones that do different things if certain conditions are met, rely on if, else if, and else statements in JavaScript. The condition sometimes takes the form of testing whether a result is equal to a value.

  • This logic is spoken (in English, at least) as "if x equals y, then ..." which can literally translate into code using the =, or assignment operator. This leads to unexpected control flow in your program.

  • As shown in other posts, the assignment operator (=) in JavaScript assigns a value to a variable name. And the == and === operators check for equality (the triple === tests for strict equality, meaning both value and type are the same).

  • Almost every value on its own in JavaScript evaluates to true, except what are known as the "falsy" values: false, 0, "" (an empty string), NaN, undefined, and null.

  • Ex:

let x = 7;
let y = 9;
let result = "to come";

if(x == y) {
  result = "Equal!";
} else {
  result = "Not equal!";
}

console.log(result);
Enter fullscreen mode Exit fullscreen mode
  • Here we get a result of "Not Equal" because x isnt strictly equal to y. ( 7 == 9)<--- not equal

Catch Missing Open and Closing Parenthesis After a Function Call

  • When a function or method doesn't take any arguments, you may forget to include the (empty) opening and closing parentheses when calling it. Often times the result of a function call is saved in a variable for other use in your code. This error can be detected by logging variable values (or their types) to the console and seeing that one is set to a function reference, instead of the expected value the function returns.
  • The variables in the following example are different:
function getNine() {
  let x = 6;
  let y = 3;
  return x + y;
}

let varOne = getNine;
let varTwo = getNine();
console.log(varOne);
console.log(varTwo);
Enter fullscreen mode Exit fullscreen mode
  • Here varOne will display [Function: getNine], and varTwo will display 9

Catch Arguments Passed in the Wrong Order When Calling a Function

  • The next bug to watch out for is when a function's arguments are supplied in the incorrect order. If the arguments are different types, such as a function expecting an array and an integer, this will likely throw a runtime error. If the arguments are the same type (all integers, for example), then the logic of the code won't make sense. Make sure to supply all required arguments, in the proper order to avoid these issues.
  • Ex:
let base = 2;
let exp = 3;
let power = raiseToPower(exp, base);

function raiseToPower(b, e) {
  return Math.pow(b, e);
}

console.log(power); console will display 9
Enter fullscreen mode Exit fullscreen mode
  • The function raiseToPower raises a base to an exponent. Unfortunately, it's not called properly. Let's fix the code so the value of power is the expected 8.
let base = 2;
let exp = 3;
let power = raiseToPower(base, exp);

function raiseToPower(b, e) {
  return Math.pow(b, e);
}

console.log(power); console will display 8
Enter fullscreen mode Exit fullscreen mode

Catch Off By One Errors When Using Indexing

  • Off by one errors (sometimes called OBOE) crop up when you're trying to target a specific index of a string or array (to slice or access a segment), or when looping over the indices of them.
  • JavaScript indexing starts at zero, not one, which means the last index is always one less than the length of the item. If you try to access an index equal to the length, the program may throw an "index out of range" reference error or print undefined.
  • Here are some examples of off by one errors:
let alphabet = "abcdefghijklmnopqrstuvwxyz";
let len = alphabet.length;
for (let i = 0; i <= len; i++) {
  console.log(alphabet[i]);
}
for (let j = 1; j < len; j++) {
  console.log(alphabet[j]);
}
for (let k = 0; k < len; k++) {
  console.log(alphabet[k]);
}
Enter fullscreen mode Exit fullscreen mode
  • The first example here loops one too many times, and the second loops one too few times (missing the first index, 0). The third example is correct.

  • Another Ex:

function countToFive() {
  let firstFive = "12345";
  let len = firstFive.length;
  for (let i = 0; i < len; i++) {
    console.log(firstFive[i]);
  }
}
Enter fullscreen mode Exit fullscreen mode
countToFive(); console will display 
1
2
3 
4
5
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Forem Open with the Forem app