Debugging in JavaScript: Understanding the Undefined Keyword

undefined is a primitive data type in JavaScript. When you declare a variable and don’t initialize it to a value, the variable will have a value of undefined.

In JS, we also have a data type known as null which also represents an empty or unknown value. So essentially, undefined and null mean the same thing but they are not identical. This creates a lot of confusion for developers while debugging their program. So let's understand what exactly is undefined in JavaScript.

Understanding the concept of "undefined" :

• When a JS program is executed, even before executing the first line of JS program, memory is allocated to all variables and functions declared in the program.
• Since execution has not begun, values which were going to be assigned to the variables are still not known.
• Thus, here JS assigns undefined to variables. undefined acts as a placeholder for the time being until the actual value is assigned to the variable.

Remember :
'undefined' is not equal to 'empty'. It also takes up its own memory.

Example :

console.log(a);    // undefined
var a = 7;
console.log(a);    // 7

• In the above example, before the code is executed, memory is allocated to variable 'a' and undefined is assigned to it. Thus, the output of console.log() in first line is undefined.
• Now, when JS comes to second line, it sees an integer value of '7' is assigned to variable 'a'. Thus, JS assigns '7' to variable 'a' in the program memory.
• Therefore, the output of console.log() in third line is '7'.

So from above example we can understand that JS used undefined as a placeholder until the actual value was assigned to the variable.

Suppose if we didn't assign any value to variable 'a' throughout the whole program it will carry the value as undefined until program is completely executed.

Not defined :

When we try accessing a variable which was never declared throughout the program, that time we get 'not defined' Reference Error.

Example :

console.log(a);   // ReferenceError: a is not defined

It is usually caused by a typo, or by trying to access a variable that is out of scope.

Null vs. Undefined :

• null is another data type in JS which represents an empty or unknown value.
• Logically undefined and null mean the same thing, but they are not equal.

// Testing for strict equality:
console.log(null === undefined)    // false

• The major difference between undefined and null is that null is explicitly assigned to a variable or returned from a function by the programmer . It means that the variable has no value.
• For example, in a JS program you are trying to find a certain value in an array (which is defined) using a function. If it does not exist, the function will simply return null.

var num = [1,2,3,4,5];

function findNumber(arr, n){
    for(let i=0; i < arr.length; i++){
        if(arr[i] === n) return true
    }
    return null
}

console.log(findNumber(num, 3))   // true
console.log(findNumber(num, 8))   // null

From above example we can clearly see null is returned when the array is searched for a number which is not present in the array.

Never assign "undefined" to any variable :

In a JS program, you can explicitly assign a variable as undefined. It won't throw any error.

var a = undefined;
console.log(a);   //undefined

But it is a kind of a mistake or a bad practice to do in JS.
Even though the code will work but it can lead to a lot of inconsistencies. So it is not a good practice and must be avoided.

Conclusion :

When a variable is assigned undefined, it dosen't exactly mean there is no value. It means that this variable isn't assigned a value yet, but a value may or may not be assigned to it in the future at time of execution of program.

In case of assigning something as null, the programmer is explicitly saying that this thing has been defined but it does not have any value at all.

Hope this is helpful ✨

Do Like ❤️ & Save 🔖

Also, Follow me here on dev.to ✅