If you are a JavaScript Engineer, you might have heard people communicating technical words like undefined, undeclared, and uninitialized. And developers often confuse it for being the same. We think that they are synonyms. We tend to mean that it's kind of almost the same thing.
But they are not, they are different things. I have also added important resources in the end, do not miss them. Let's find out what do they mean in first person.
Undefined
Hi, I am undefined. I do reside inside of a variable at the time of initialization. So there's a variable but at the moment it does not have value.
Let's say you have bought an empty box and you have also labelled it. The box is there with a label but you haven't thought through what you will be putting inside that box, so it is undefined right now that what will go into that box. But the box is there and it is undefined.
Undeclared
Hi, I am undeclared. (In Morpheus voice) And what if I told you there is no box. B) I have never been bought and if you try to reference my existence, I will throw you an error. A Reference Error.
I mean to say, I have never been created in any of the scope that you have access to. Because I was never created. You can not have access to something which was never created, right? So if you try to reference me I will give you ReferenceError.
You, do realize that you were talking to someone who doesn't exist, right? What kind of scary type of first blog am I writing? It's me the author. Well, let's address the real elephant in the room. Shall we?
The
typeofoperator is the only operator in existence that can reference a thing that doesn't exist and not throw an error.
Uninitialized aka Temporal Dead Zone(TDZ)
Hi, I am the new kid around the block. ES6(ECMAScript 2015) brought me here. When a variable or box is created in a block scope they don't get initialized. The variables never get set to the state of undefined. When that variable is referenced in my state, the uninitialized state, they don't get access to that variable. It is off the limits.
Instead, I throw them an error. Can you guess which error I will throw them?
Yes, you are right. I will throw them a ReferenceError if they try to access the variable in the uninitialized state. A lot of people get confused about the Temporal Dead Zone(TDZ) Let me over-simplify it to you. What it means is that, if you try to access the variable, the space before which the variable is declared, that space is called the Temporal Dead Zone
For Example:
console.log(a);
let a = 'I cannot be accessed before I am initialized';
Summary
To summarize,
Undeclared means it's never been created in any scope that you have access to. And undefined means there's a variable, and at the moment, it has no value. Uninitialized on the other hand means until and unless you initialize me you cannot touch me.
Resources
- This blog post is inspired by one of the lessons of Kyle Simpson's Frontend Master's course Deep JavaScript Foundations: Kinds of emptiness
- Time and time I have found that you go and read all the resources out there on the internet about JavaScript to get a better understanding of the language but there is no better explanation given with technicalities than on MDN.