Undefined vs Not defined in JavaScript

In this blog, we are going to learn about the difference between undefined and not defined in JavaScript, and how they are different from each other. We will also cover the topic of type conversion.

In JavaScript, all variables are assigned the value undefined at the time of memory creation. When you run a JavaScript program, the execution context is created, which has two parts: the memory creation phase and the code execution phase. During the memory creation phase, JavaScript assigns the default value undefined to variables. During the code execution phase, JavaScript will see what value we assigned to those variables and replace the default undefined value. Let's take a look at an example:

console.log("VALUE OF A", a); // LINE 1
var a = 10; // LINE 2
console.log("VALUE OF A", a); // LINE 3

As soon as we run the above program, the same process will happen. The execution context will be created, and during the memory creation phase, the default value undefined will be assigned to the variable. Therefore, the output of the above program will be:

VALUE OF A: undefined; // This is because we are using variable a before assigning any value to it
VALUE OF A: 10; // This is because we assigned a value to variable a at line number 2 and then we are doing console.log(a).

It is important to understand that undefined is not the same as empty or null. It is a special placeholder value for variables until we assign them a value in our program. To prove this, let's take a look at two examples:

var x;
if (x === undefined) {
  console.log("value of x is undefined");
}
if (x === "") {
  console.log("x is empty");
}

In the above program, it will never reach the second if condition where we are checking if x is empty because the default value of the variable is undefined. Therefore, it will reach the first if condition and the program will output: "value of x is undefined." One last thing to note is that, from a JavaScript community perspective, it is not recommended to assign the value undefined to a variable yourself if it is possible to avoid it.

Now that we have a good understanding of undefined, let's talk about not defined. When we try to use a variable in JavaScript that we never defined in our program, JavaScript throws an error and says that the variable is not defined. Let's take a look at an example to understand not defined:

console.log(x); // LINE 1
var x = 10; // LINE 2
console.log(x); // LINE 3
console.log(z); // LINE 4
console.log("I WILL NEVER REACH HERE BECAUSE OF LINE NUMBER 4"); // LINE 5

As soon as we run the above program, JavaScript will first print the value undefined from line 1 because we have not assigned any value to x yet. Then, we are assigning the value 10 to variable x at line 2, so it will print 10 because now x has the value 10. However, as soon as we reach line number 4, JavaScript tries to find z in its memory, but it cannot find it because we never declared any variable with the name z. This is when JavaScript thinks that you are trying to use something that you don't even have in your program, and it throws the error "ReferenceError: z is not defined."

That's all about undefined and not defined now as we are talking about variables so let's learn about coercion because this is also an important topic to understand.

Javascript is losing type language or we can also say weakly typed language. This means in javascript if initially, you assigned string value to variable x then later in the program you can assign any other type of value also like a boolean, number or even object and array also and in most other language it won't even allow you to compile the code where is javascript it handles lots of stuff in the background for you and this type conversation process in javascript is also known as type coercion.

There are two ways to perform type coercion in javascript.

1. Implicit coercion: This is where javascript automatically handles type conversation for you like you have taken one variable where you assigned a value string but later in your program, you want to assign it to a number then you can directly assign a number to that variable and javascript will handle everything else for you.

2. Explicit coercion: Explicit coercion: You can also explicitly convert data types using built-in functions such as Number(), String(), and Boolean(). These functions take a value of one type and return a value of another type. This way javascript allows us to make type conversions by ourselves also. Let's see some examples of Explicit coercion.

index.js
   // Number to String
   let num = 10;
   let numToStr = String(num); // converted number to string now numToStr value is not 42 but its "42"

  // String to Number
   let str = "42";
   let strToNum = Number(stringNum); // converted string to number using Number() now value of strToNum not "42" but its 42

That's all about undefined vs not-defined and coercion. And thanks to Akshay Saini
for creating an incredible Namaste Javascript playlist this blog is just whatever learning I had from there.