Frendly

The ReferenceError is an error thrown by the JavaScript engine when it looks to find a variable or function within the available scope and finds nothing with that identifier name.

The error will be thrown if you're trying to assign a value to an undeclared variable, or access the value of an undeclared variable, or a variable that is declared, but not within the bounds of the available scope.

  "use strict"
  
  function someFunction() {
    a = 1;  // someFunction scope can’t find a,
            // global scope can’t find a,
            // strict mode throws ReferenceError: a is not defined
  }

  function someFunction() {
    a = 1;  // someFunction scope can’t find a,
            // global scope can’t find a,
            // not in strict mode
            // global scope creates var a
            // no errors here
  }

  function someFunction() {
    var a = 1; // a is contained within someFunction scope
  }
  
  someFunction();
  console.log(a); // ReferenceError: a is not defined

  function someFunction() {
    var c = 1; // c here is within the scope of someFunction
  }
  
  function anotherFunction() {
    console.log(c); // anotherFunction scope can’t find c,
                    // so looks to global scope,
                    // where it's not found
                    // ReferenceError: c is not defined
  }

  for(var i = 0; i < 2; i++) { console.log(i); } // 0, 1
  // var i is declared in the enclosing scope, not within the for loop
  console.log(i) // 2
  
  for(let x = 0; x < 2; x++) { console.log(x); } // 0, 1
  // let x is defined within the for loop block scope and not the enclosing scope
  console.log(x) // ReferenceError: x is not defined

  // in the global scope
  
  var a = 1;
  let b = 2;
  const c = 3;
  
  console.log(a) // 1
  console.log(window.a) // 1 - a global var is available to window (browser environment)
  
  console.log(b) // 2
  console.log(window.b) // undefined - let is not available to window
  
  console.log(c) // 3
  console.log(window.c) // undefined - const is not available to window

  var a = {
    b: 1,
  };
  
  console.log(a); // {b: 1}
  console.log(a.b); // 1
  console.log(a.c); // undefined - not a ReferenceError
  console.log(a.c.d); // TypeError: Cannot read property 'd' of undefined
 

Note the difference in the last two code box examples, where we're trying to access a property of an object. If the property doesn't exist the value undefined is returned, as opposed to throwing the ReferenceError. If you try to access a property of undefined, as with a.c.d, a TypeError is thrown, (as opposed to a ReferenceError), as a variable of type undefined can't have properties.

Declared, but undefined

The ReferenceError error message is slightly confusing in that variables without value have the value undefined, but this isn't the same as "ReferenceError: x is not defined". As mentioned, the ReferenceError is thrown when an identifier can't be found in available scope. This is not the same as the variable was declared and found in scope, but has a value of undefined, which is perfectly valid, and won't throw the ReferenceError.

  // No errors thrown here
  
  var x;
  console.log(x === undefined); // true
  console.log(typeof x); // undefined
  
  var y = undefined;
  console.log(typeof y); // undefined
 

Perhaps it's clearer to read the ReferenceError as "x is not declared", rather than "not defined".

If you're facing a ReferenceError in your code, look to see if it's declared, and if so, if it's within the available scope of your executing code.