JavaScript ReferenceError

In JavaScript, a reference error is thrown when a code attempts to reference a non-existing variable. In this article, we will dive into the most common types of reference error triggers and how to fix them.

Common Reference Errors

According to JavaScript web docs, there are six different types of reference errors, with variations of each, that may get triggered in our code.This article focuses on five most common reference error examples for new developers.

Undefined variables

Forgetting to define a variable before referencing it may be the most common reference error trigger for new developers. This can also happen if the referenced variable has been commented out.

let firstName = "John"
let age = 23
 
console.log(lastName)
// Uncaught ReferenceError: lastName is not defined

let firstName = "John"
let lastName = "Smith"
let age = 23
 
console.log(lastName)
// returns Smith

Scope

Variables defined inside a function’s scope cannot be accessed outside of it. We can think of scope as laws that govern certain parts of land, let’s say in the United States. A law in the books for the city of San Francisco may not be okay to follow in the city of Miami. Residents of Miami living in Miami must follow Miami laws.

In the function below, we attempt to access the value of a outside of its lexical scope.

function nums() { 
    numA = 1
    numB = 2
  
    return numA + numB
  }
   
  console.log(numA); 
 
 
//   Uncaught ReferenceError: numA is not defined

We can fix this by defining our variables in the global scope.

numA = 1
numB = 2
 
function nums() { 
  return numA + numB
}
 
console.log(nums()); 
 
// returns 3

Strict Mode

Strict Mode intentionally has a different set of semantics than the regular defaulted, “sloppy mode” JavaScript code. A key thing to remember while coding in strict mode is that it eliminates silent errors by changing them into throw errors. A JavaScript statement will be using strict mode if “use strict”; is invoked before a statement.

function referenceErr(a){
    "use strict";
   foo = true;
 
   if(a == 0){
     return foo
   } else {
     return !foo
   }
 
  }
  
  console.log(referenceErr(1))
 
//   Uncaught ReferenceError: foo is not defined

As JavaScript developers we know to use var, let, or const in order to define a variable, but the above would have been a silent error if strict mode was not invoked. 

function referenceErr(a){
    "use strict";
   let foo = true;
 
   if(a == 0){
     return foo
   } else {
     return !foo
   }
 
  }
  
  console.log(referenceErr(1))
//   returns false

Redeclarations

Not full understanding how to redeclare variables can also trigger reference errors.

function redeclarations() {
    let declare = 1;
    if (true) {
      let declare = (declare + 1);   
    }
  }
  console.log(redeclarations())
// Uncaught ReferenceError: Cannot access 'declare' before initialization

To fix the code above, we must either change “let” to “var” or omit “let” inside our if statement completely.

function redeclarations() {
    let declare = 1;
    if (true) {
    declare = (declare + 1); 
  
    }
  }
  console.log(redeclarations())

Conclusion

In JavaScript a reference error is mainly thrown when a code is attempting to reference a variable that does not exist, but there are many ways we can write our code that may trigger this reference error to be thrown. Making sure the variable referenced is defined and is being called in the correct scope can be an easy fix for the majority of cases for new coders.