Javascript understanding errors part 1

Intro

Bugs are a common part of coding and understanding various common bugs can be a huge time saver. Lets take a look at some of those common bugs:

Reference Errors

Reference errors commonly occur when variables or functions are misspelled or mis-capitalized causing the browser to look for an object that does not exist:

let wideReceiver = "Jerry Rice";
let runningBack = "Frank Gore";
console.log(`My favorite wide receiver is ${wideReciever}`);

// ReferenceError: wideReciever is not defined

Fix:

let wideReceiver = "Jerry Rice";
let runningBack = "Frank Gore";
console.log(`My favorite wide receiver is ${wideReceiver}`);

Syntax Errors

Syntax errors occur when the incorrect use of defined syntax is in your code. One of the more common syntax errors are from unclosed brackets, quotes, parentheses, and braces:

const myArr = [1,2,3,10;
console.log(myArr)

SyntaxError: Unexpected token, expected "," (1:23)

> 1 | const myArr = [1,2,3,10;
    |                        ^
  2 | console.log(myArr)

An easy way to avoid this mistake is once an opening character is written to immediately close that character before writing out any additional code:

const myArr = [1,2,3,10];
console.log(myArr)

Syntax Errors:Mixed Quotes

Javascript allows the use of both single quotes (') and double quotes ("). Just make sure in situations where you use both you don't close one of the quotes too early. Also when using single quote be careful of accidentally opening a second set of single quotes:

// Incorrect
const myQuote = 'I've had a wonderful day today'

SyntaxError: Unexpected token, expected ";" (1:19)

> 1 | const myQuote = 'I've had a wonderful day today';
    |                    ^

// Correct 
const myQuote = 'I\'ve had a wonderful day today';

Incorrect Assignment Operator

Another common error among beginning programmers is the incorrect assignment operator. Remember that = assigns a name to a variable while == and === check for equality. === checks for strict equality meaning the value and type must be the same.

Here is an example using an if statement:

let x = 10;
let y = 20;

if(x = y){
  console.log("These numbers are equal")
}

// "These numbers are equal "

Why did the console log "These numbers are equal when 10 clearly does not equal 20? We used the incorrect assignment operator = thus the console.log will trigger with any y value that isn't set to a "falsy" value.

To fix this we just need to use the proper === operator in the if statement:

let x = 10;
let y = 20;

if(x === y){
  console.log("These numbers are equal")
} else {
console.log("These numbers are not equal")
}

// 'These numbers are not equal'

Conclusion

That concludes the first set of common errors. In my next blog I will go over some more common errors and even a few less common errors.