Difference Between Null And Undefined In Javascript

What is the Undefined in Javascript?

Undefined means something is ‘not defined.’ So in javascript, when we declare a variable and do not assign it any value, it is called an undefined variable.

In Javascript, undefined is a primitive data type. And it is automatically assigned by Javascript to the variable if we forget to assign any value to a variable.

Let’s understand it using some coding examples.

Code:

• javascript

javascript

let username;
console.log(username);    
console.log(typeof(username));  

You can also try this code with Online Javascript Compiler

Run Code

Output:

undefined
undefined

Explanation:

Functions that do not have a return statement also return undefined.
 

Code:

• javascript

javascript

function greetUser(username) {
    let name = username || 'Stranger';
    console.log(`Hey!! ${name}. How are you?`);
}


let result = greetUser('Lakshya');  
greetUser();   


console.log(result);  
console.log(typeof(result));  

You can also try this code with Online Javascript Compiler

Run Code

Output:

Hey!! Lakshya. How are you?
Hey!! Stranger. How are you?
undefined
undefined

Explanation:

In this code example, we created a function named greetUser to greet users, which takes a username as input. Our function will use the default name if any user does not provide their name. We have printed the output on the console in both cases.

Also, we printed different results on the console. The function's return value is undefined since the function does not have any return statement, and the type of undefined is also undefined.

Difference Between Null and Undefined In Javascript

Arithmetic Operation on null and undefined.

During arithmetic operations, null is operated as ‘0’. The Js compiler converts the null to a numerical value, and we can successfully do the arithmetic operations between any number and null. 

For null

Code:

• javascript

javascript

let x = 3;
let y = null;

console.log(x + y);     
console.log(typeof(x + y));    

You can also try this code with Online Javascript Compiler

Run Code

Output:

3
number

Explanation:

Here we have declared two variables, ' x' and 'y', with 'x' assigned with a value of '3' and 'y' having a null value. The first console log statement prints the addition of 'x' and 'y', where the null will convert to 0 during the arithmetic operation. The second console log prints the type of return we are getting, i.e., number.

For Undefined 

Code:

• javascript

javascript

let x = 3;
let y;

console.log(x + y);    
console.log(typeof(x + y)); 

You can also try this code with Online Javascript Compiler

Run Code

Output:

NaN
number

Explanation:

Here again, we have two variables, ' x' and 'y', with 'x' assigned with a value of '3' and 'y' does not have any value. The first console log statement prints the addition of 'x' and 'y' where the value of the undefined variable will convert to NaN during operation. The second console log prints the type of return we are getting, i.e., number.

Comparison using strict equality operator (===)

Code:

• javascript

javascript

console.log(null === undefined); 
console.log(null == undefined);  

You can also try this code with Online Javascript Compiler

Run Code

Output:

false 
true

Explanation:

Since the strict equality operator (===) compares the values of the variables as well as their types and returns false accordingly. But if we compare it using the loose equality operator (==), it will return true. 

Frequently Asked Questions

When should we use null or undefined in JavaScript?

Null is used when we want to show any variable's missing or unknown value. At the same time, Undefined is a predefined Javascript type assigned to a variable or object that has not been assigned.

How can we assign a default value to a variable that may be null or undefined?

Using the OR operator, we can assign a default value to the variable or object that may be null or undefined. Ex. let name = null; name = name | |  ‘stranger’ .

Here, ’stranger’ will be the value of the name variable if the name is null or unfined.

How can I check if a value is null or undefined?

You can check if a value is null or undefined in JavaScript using strict equality checks: value === null for null and typeof value === 'undefined' for undefined. Alternatively, a combined check can be done with value == null.

Why use null instead of undefined in JavaScript?

Using null explicitly indicates the intentional absence of a value, improving code clarity. In contrast, undefined typically signifies uninitialized variables. Thus, using null can help differentiate between unintentional absence and intentional absence of values.

Conclusion

Null and undefined are two very similar-looking terms in javascript as both represent the absence of a value. Understanding the distinction between null and undefined is essential for JavaScript developers. While both represent empty or missing values, they serve different purposes: undefined occurs when a value hasn't been assigned, while null represents an intentional absence of value that must be explicitly set.

We recommend you to read these articles related to this article:

1. Variables and Data Types in Javascript
2. Data Types in C++
3. Type Conversion in Javascript
4. Explain "this" keyword and the Scope of this in Javascript Arrow Functions.
5. Difference Between Compiler and Interpreter and Assembler