What's ReferenceError: x is not defined in JavaScript?
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.
If you have any questions or comments or want to connect, you can follow me on Twitter, or sign up to the newsletter in the footer for front-end articles to your inbox 👇