Variable is undefined…

Imagine if it was that easy to get the meaning of life. In JavaScript when you receive this error it can be a disheartening feeling. What happened here? What does this even mean and how can it be fixed. First, we need to understand what is happening under the hood of JavaScript’s V8 engine

A code snippit
A code snippit

Execution Context

When JavaScript begins running, it is setting up the environment in which your code will run called the “execution context”. The first thing it does is creates a global object, a variable called “this” and possibly a reference to the outer environment if there is one. At this point, it begins as a process of “hoisting” all the variables in your code.

“Hoisting” is another topic that is best discussed later in a separate article. For now, for conversation sake let us just agree to use the definition from the MDN documents here:

“ a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code”.

As JavaScript is setting up the environment for your code to run it begins allocating memory for each variable you have declared and space for the value you have assigned to it. If you have not declared an explicit value for the variable called life. JavaScript will automatically assign it the special value of “undefined”. So when you see life is “undefined” as an error. What javaScript is trying to tell you: is in the execution environment, I have created for your code to run. You have not assigned a value to the variable life. So your code has a variable named life but no value stored in memory for it.

A code snippet
A code snippet

This vastly different from “ Reference Error: life is not defined”. JavaScript in its strangely helpful way. Is trying to point you in the direction to fix your code. What the JavaScript engine is trying to tell you with “Reference Error: life is not defined” is that when your code was hoisted and variables and values were placed in memory. The JavaScript engine did not set aside any memory space for this variable as you have not declared a variable called life. So essentially it is saying there is no reference in your code to a variable called life, thus nothing was hoisted. So we have an error because there is nothing in the execution environment to reference for a value

A code snippet
A code snippet

This brings up a really important point, what if you needed to declare a variable and set it to have a value that indicates, it has an absence of value?

My suggestion would be to use “null” according to MDN here

“The value null represents the intentional absence of any object value. It is one of JavaScript's primitive values and is treated as falsy for boolean operations.”

Hopefully, this article helped clarify what is really happening under the hood with JavaScript, as you will encounter these common errors. Alas, the meaning of life is so not easily defined.

Happy Coding!

Full Stack Web Developer (Junior)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store