undefined vs not defined in JavaScript

undefined and not defined are 2 different concepts let us go more deeper

Shubhvrat kulkarni
Frontend Weekly
4 min readFeb 5, 2024

--

Photo by Tracy Adams on Unsplash

Hey readers,

JavaScript is the most loved language in the world, but beginners often make mistake of starting without learning some important and basic concepts of JavaScript, but don’t worry we will learn some of the concept here

Let us start!!

Undefined vs Not-defined

Most of the people think that Undefined is similar as not-defined.

NO , they both are totally different concept, lets learn them for better understanding

Undefined

There is a statement for JavaScript — Every thing happens in JavaScript happens inside execution context.

And execution context has two phases memory allocation phase and code execution phase

When, we declare a variable, in execution context a memory is allocated to that variable.

confused? Lets see an example

code example
output

Now, in above code I have declared a variable.

In memory allocation phase, var a will be allocated a memory and it will be assigned a special value that is undefined

So, undefined is a special value that is allocated to variable during memory allocation phase.

Not-defined

Now, when we declare a variable it is allocated a memory in memory allocation phase, but when you try to log a variable that has not allocated a memory or in simple words you have not declared that variable in your code then it will throw us an error. for example

code
output

So, in above code i have declared var a and will be allocated a memory. But when i want an output of a variable that is not defined in the code, it will give us error that is —

Uncaught ReferenceError : b is not defined .

this is what not defined is.

Let us summarize

Undefined is a special value that is assigned to a variable.

Not defined is an error which arises when we try to console.log a variable which is not declared in code or have not allocated any memory.

code

So, in above code you can see that we have accessed var a before initializing it, what output it will give us?? 🤔

Yes you are right 👍, it will show us our special value that is undefined in the console.

code

But that is in the case of var, but what about let? Will it give us the same output as above?? 🤔

What do you think?

Now here is a tricky part

According to what we have learnt above the above program should give us output undefined right.!

NO, this will throw us an error which says —

Uncaught ReferenceError : Cannot access ‘b’ before initialization

What is the reason behind this error?

Let us go deeper into it.

Let us first understand the error, the error is telling us that you could not access b before initializing it or giving it a value.

case

case — it will not throw is any error because we haven’t accessed ‘b’ after initializing it.

Now, if you enable a debugger even before a single line of code you will see some magic

what exactly will you see?

Even before debugging single line of code we will see in scope JavaScript have allocated our b a memory and assigned it a special value undefined in script, similarly to our variable a JavaScript has allocated a memory and assigned undefined in Global

In above image you can see in case of our it is in the Global space while for let it is in Script.

Strange!!

This happened because, a has been allocated a memory to the var declaration and that a gets attached to the global object

In the case of let and const memory gets allocated but they are stored in different memory space other than global, and you cannot access this memory space unless you put some value to it.

JavaScript language is full of Surprises!!

Thankyou for reading. I hope it was helpful.

--

--