Do you really know JavaScript ? Part 1: Undefined
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-04-16 18:42:57

JavaScript is a very complex programming language, fully master the subject is near to impossible, my view. My knowledge about various JavaScript concept is very limited, so I decided to check my knowledge in various topics in JavaScript and explore more deeply. Today I am looking at a simple topic, "undefined". For the next 30 days I will be exploring my knowledge about various topic, so as to improve my understating about the language. So let's start the exploration.

The "undefined" type has exactly one value, called undefined. Any variable that has not been assigned a value has the value undefined. 

```javascript
let z = undefined;
console.log(z);                 // undefined 
console.log(typeof undefined);  // undefined
 
console.log(typeof z === "undefined");  //true
typeof undefined === "undefined";       // true
```
We can explicitly assign a variable `undefined`. Undefined is not a reserved keyword you can use to  name a variable but **never use**, its a really bad practice.

```javascript
var undefined = 20;
console.log(undefined);     // undefined
```

Let's look at some examples where "undefined" value is generated

#### 1. A variable declared but it is not assigned a value.
```javascript
// Variable that is not initialized
let x;
console.log(typeof x);          // undefined
console.log(x);                 // undefined
```
In the above code the variable `x` is declared but it is never assigned any value so if we try to get the value of variable `x`, we get `undefined`

####  2. When we try to access an out of bound array element.
```javascript
// Accessing out of bound index of an array
let arr = [1,2,33];
console.log(arr[100]);          //undefined
```
In the above code we declared a array variable with values `[1,2,33]`, array `arr` contain 3 elements. If we try to access 100th element of array, JavaScript engine will not throw any error it just return the value of the 100th element as `undefined`.

#### 3. Accessing a non existing object property
```javascript
// Accessing a non existing object property
var y = {name: "kiran"};
console.log(y.age);             // undefined 
```
In the above code we declare a object with property name, if we try to access any non existing property, here for example `age`, JavaScript engine will not throw any error, it simply return a value `undefined`.

#### 4. A function that does not have a return statement.
```javascript
// Function that does not return
let ret = function(a,b){
    console.log(a+b)            // 30
};
console.log(ret(10, 20));       // undefined
```
In the above code the function perform an addition operation and prints the output to console, the function is not returning any value, so if we try to print the function call we get `undefined`. i.e. the function invocation result is undefined.

####  5. A function parameter implicitly default to undefined.
```javascript
// function paramaeters are undefined by default
function checkUndefined(x){
   if (x === undefined){
       console.log(`undefined`);
   }else{
       console.log(x);
   }
}
checkUndefined();               // undefined
```
In the above code you can see that the function `checkUndefined` take one argument, inside the function it checks whether the argument is equal to `undefined` if true `undefined` is print to the console. When we call the function without a parameter the function print `undefined` on the console, that means the parameter was equal to `undefined`. Since we did not pass any value to parameter, JavaScript engine assign the parameter a default value of `undefined`.

When I was reading about the undefined I stubbled upon a operator called 'Nullish coalescing'( ?? ). `Nullish coalescing` is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, if not, returns its left-hand side operand.

```javascript
let obj = {
    fname : "kiran"
}

let lname = obj.lname ?? "raj";
let fname = obj.fname ?? "manu";
console.log(lname);                // raj
console.log(fname);                // kiran
```

One more thing, `void` operator, it evaluates a given expression and return undefined no matter what the result of evaluation of the expression is
```javascript
let a1 = void 10
console.log(a1);                //undefined
let a2 = void arr[1,2,3]
console.log(a2);                //undefined
let a3 = void {name: "kiran"}
console.log(a3);                //undefined
let a4 = void (10 + 20);
console.log(a4);                //undefined
```