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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var foo; | |
console.log(foo); |
Output of above code listing would be “undefined” as shown in the image below:
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,
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 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
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var foo = null; | |
console.log(foo); |
Every value has a type in JavaScript and type of null is object. Try running below code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log(typeof (null)); |
You will get below output which shown type of null is object.
JavaScript never set 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 following operations
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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:
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 null is not equal to zero. Try performing below operations :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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:
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 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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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:
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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:
4. JavaScript also assigns undefined to out of array index in an array.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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:
5. JavaScript returns undefined on accessing the object property, which does not exist. Let us consider below listed code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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,
In arithmetic, operations if one of the operand is undefined then JavaScript will always evaluate result to NaN. Consider the code listing given below:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 operand is undefined then JavaScript evaluates arithmetic operation to NaN.
Type of null was object, however, type of undefined is a special type undefined.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, below code will give you output false.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log(null === undefined); |
However, in type-converting equality comparison null and undefined are same. Therefore, below code will give you output true
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
Leave a Reply