Explain the difference between undefined and not defined in JavaScript

In JavaScript, they both are related to memory space and there is a very simple difference between them. If the variable name which is being accessed doesn’t exist in memory space then it would be not defined, and if exists in memory space but hasn’t been assigned any value till now, then it would be undefined.

undefined: It is a JavaScript keyword that has a special meaning. Everything which gets a space in memory will contain undefined until we assign a value to that memory space.

Let’s understand how the JavaScript code is being executed to see a more clear picture. Everything in JavaScript happens inside the execution context. Execution context is the little separate section where code is being executed and variables get their memory space.
The JavaScript code is being executed in two-phase, 

1. The first one is the memory allocation phase during this all the variables and function definitions get stored inside the memory heap. The JavaScript assigns undefined to each variable in this phase.
2. The second one is a thread of the execution phase, during this the code written inside the JavaScript file is being executed.
   Each variable holds the value undefined till the program reaches the line where we have assigned that variable. After that line, the variable’s undefined value gets replaced by the original value.

Example 1: The global execution context will be created and in the memory allocation phase, the var a will get space in memory, and JavaScript will assign undefined to it. During the thread of execution, the JavaScript will encounter the first line console.log(a) and as we haven’t assigned the value for a, undefined will be printed on the console. In the next line, we have assigned 5 to a, hence the variable a is no more undefined. Now it contains the value 5. So next time whenever we access the variable a, it won’t be evaluated as undefined. So it will print the actual value of a.

HTML

<script>
  console.log(a);
  var a = 5;
  console.log(a);
</script>

Output (In console):

undefined
5

Additional Points:

1. If you are assigning a function call to a variable, and that function doesn’t return anything, the variable will become undefined.
2. You can explicitly assign undefined to any variable but it is not good practice to use language keywords in the way it is not expected.

not defined: In JavaScript, it is one of the reference errors that JavaScript will throw when someone accesses the variable which is not inside the memory heap.

Example 2: First of all, global execution context will be created and in the memory allocation phase, the variable “a” will get space in memory, and by default, JavaScript assigns undefined to “a”. During the thread of execution, the “console.log(a)” will be printed as undefined. In the next line, we have assigned 5 to variable a. In the console, 5 will be printed. At the last line when JavaScript encounters the “console.log(b)” it searches for “b” inside the memory heap of execution context but it is not available, the JS engine will throw the “Reference Error” with a message of “b is not defined“. The JavaScript will stop execution when it encounters a reference error.

HTML

<script>
  console.log(a);
  var a = 5;
  console.log(a);
  console.log(b);
</script>

Output:

Difference between undefined and not defined

undefined	not defined
It works like when we declared a variable in the code but did not assign the value before printing the variable value	It works like when we did not declare the variable and try to call that variable.