Debugging in JavaScript: Understanding the Undefined Keyword
Tags: webdev, javascript, programming, tutorial
Published: 2023-01-31 17:24:36

`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.
<br/>

##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 :

```javascript
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.
<br/>

## Not defined :

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

### Example :

```javascript
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.
<br/>

## 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.

```javascript
// 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`.
```javascript
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.
<br />



## Never assign "undefined" to any variable :

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

```javascript
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.

<br/>

## 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.

<br/>
<br/>

Hope this is helpful ✨

Do Like ❤️ & Save 🔖

Also, Follow me here on dev.to ✅