Do you really know JavaScript ? Part 1: Undefined

#javascript #webdev #beginners #codenewbie

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.

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.

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.

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

// 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

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

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

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

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

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