JavaScript Interview Day # 2 - Can You Explain Undefined And Null?

Have you ever been asked, “Can you explain null and undefined in JavaScript”? This question is very trivial but important. As a JavaScript developer, you must have absolute understanding about undefined and null.

• JavaScript Interview Day # 1 - How To Create A Class 

Let us start by looking at the code below.

var foo;
console.log(foo);

Output of the above code listing would be “undefined” as shown in the image below.

What is going on here? Whenever you create a variable in JavaScript and do not assign any value to it, that variable will contain a value “undefined”. So basically, undefined represents the missing value in JavaScript.

Let us consider another code snippet.

var foo = null;
console.log(foo);

Output of above code listing would be “null”, as shown in the image below.

So, what is going on here? When you create a variable but are not sure what should be the value, you may assign it with the value null. Therefore, null is a primitive value in JavaScript.

What is null?

In JavaScript, null represents intentional absence of a value. It is a primitive JavaScript value. You can say, null indicates an object with no value.

You can assign null to a variable as indication of no value. It can be assigned to a variable. In JavaScript, null can be assigned to any variable as representation of no value. Therefore, JavaScript very much allows you to perform the task shown in the listing below.

var foo = null;
console.log(foo);

Every value has a type in JavaScript and type of null is object. Try running the below code.

console.log(typeof (null));

You will get the below output which shows that the type of null is object.

JavaScript never sets value null to any variable automatically. If you want to set variable value null, it has to be done programmatically.

In JavaScript arithmetic operations, null becomes zero. So if you try to perform the following operations -

var foo = null;
var a = foo + 9;
var b = foo - 9;
var c = foo * 9;
var d = foo / 9;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

The output of above operation would be -

As you might have noticed that JavaScript is converting null value to zero value for all the arithmetic operations.

JavaScript treats null as zero for comparisons. However, keep in mind that null is not equal to zero. Try performing the below operations.

var foo = null;

if (foo > 9) {
    console.log('greater than 9');
}
if (foo < 9) {
    console.log('less than 9');
}

if (foo > -9) {
    console.log('greater than -9');
}
if (foo < -9) {
    console.log('less than -9');
}
if (foo == 0) {
    console.log('equal to zero');
}
if (foo === 0) {
    console.log('equal to zero');
}

You will get the output as shown below.

You can see that JavaScript is treating null as zero for the comparison operations.

What is undefined?

In JavaScript, undefined is created at run time and assigned as a missing value. Therefore, if you have not assigned any value to a variable, then at run time, JavaScript will assign undefined to that variable.

Consider the code given below.

var foo;
console.log(foo);

Since you are not assigning any value to foo, at runtime, JavaScript will assign undefined to foo. The output of the above code listing would be as shown in the image below.

Therefore, in JavaScript, undefined represents a missing value.

JavaScript assigns undefined in the following scenarios.

1. When a variable is declared but not assigned any value.
   

   var foo;
   console.log(foo);

2. When a function parameter is missing. So, in the below code, you are not passing value of parameter b, therefor JavaScript will assign value undefined to b.

   function foo(a, b) {
       console.log(b);
   }
   
   var res = foo(9);

   Output of above code listing would be “undefined” as shown in the image below.

   
   

3. When you call a function as function invocation pattern and if explicitly function does not return any value, then it returns undefined.
   
    
   

   function foo(a, b) {
   
       var res = a + b;
   }
   var r = foo(8, 9);
   console.log(r);

   In the above listing, you are calling a function as function invocation pattern. In FIP, when function does not return anything explicitly, JavaScript returns undefined for that. Therefore, output of the above function would be as shown in the image below.

   
   

4. JavaScript also assigns undefined to out of array index in an array.

   var foo = [5, 1, 6, 9];
   console.log(foo[4]);

   In the above code snippet, you are trying to print the fifth element of the array, however the size of the array is four. Therefore, JavaScript will print undefined for the fifth element. JavaScript will give you output as shown in the image below,

   
   

5. JavaScript returns undefined on accessing the object property, which does not exist. Let us consider below listed code
   

   Student = {
   
       name: 'foo',
       age: 9
   }
   
   console.log(Student.grade);

Student object does not have grade property, so JavaScript will print undefined for this. You will get the below output for the above code,

In arithmetic, for operations if one of the operand is undefined then JavaScript will always evaluate result to NaN. Consider the code listing given below, 

var foo;
var a = foo + 9;
var b = foo - 9;
var c = foo * 9;
var d = foo % 9;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

As output, JavaScript will evaluate all operations to NaN as shown in the image below,

Therefore, if any of the operands are undefined then JavaScript evaluates arithmetic operation to NaN.

Type of null was object, however, type of undefined is a special type undefined.

console.log(typeof (undefined));

Above code will print type of undefined as undefined.

null and undefined

In strict comparison, null and undefined are not same. Therefore, the below code will give you output as false.

console.log(null === undefined);

However, in type-converting equality comparison null and undefined are same. Therefore, below code will give you output true

console.log(null == undefined);

In this post, you learned one of the most important concepts of JavaScript - undefined and null. Having a good understanding of undefined and null helps you in faster debugging and writing better JavaScript codes. I hope, now, you will able to answer undefined and null in the interviews.