undefined and null in JavaScript

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

Let us start by looking at code below:


var foo;
console.log(foo);

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

image

What is going on here? Whenever you have created a variable in JavaScript and have not assigned any value to it, then that variable will contain a value “undefined”. So undefined is missing value in the 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:

image

So what is going on here? When you create a variable but not sure what should be the value, you may assign it with the value null. Therefore, null is a primitive value in the 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

image

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 allow 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 below code


console.log(typeof (null));

You will get below output which shown type of null is object.

image

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

image

In JavaScript arithmetic operations, null becomes zero. So if you try to perform 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);

Output of above operation would be as below:

image

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

image

JavaScript treats null as zero for comparisons. However, keep in mind null is not equal to zero. Try performing 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 output as shown below:

image

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

image

What is undefined?

In JavaScript undefined is created at run time and assigned as 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. Output of above code listing would be as shown in the image below:

image

Therefore, in JavaScript undefined represents a missing value.

JavaScript assigns undefined in 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 below code listing, 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:

image

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

image


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

In 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 above function would be as shown in the image below:

image

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


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

In above code snippet, you are trying to print 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:

image

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 below output for above code,

image

In arithmetic, 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:

image

Therefore, if any of the operand is undefined then JavaScript evaluates arithmetic operation to NaN.

image

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.

image

null and undefined

In strict comparison null and undefined are not same. Therefore, below code will give you output 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 learnt one of the most important concept of JavaScript undefined and null. Having a good understanding of undefined and null helps you in faster debugging and write better JavaScript codes. I hope, now you will able to answer undefined and null in the interviews.

4 responses to “undefined and null in JavaScript”

  1. […] JavaScript Interview Day # 2: Can you explain undefined and null […]

  2. […] JavaScript Interview Day # 2: Can you explain undefined and null […]

  3. It’s very good article. It’s simple and easy to understand.

  4. very knowledgeable article.

Leave a comment

Create a website or blog at WordPress.com