---
title: "Null vs. Undefined in JavaScript"
published_at: "2022-11-22T11:46:28+00:00"
modified_at: "2024-12-10T13:23:22+00:00"
url: "https://www.syncfusion.com/blogs/post/null-vs-undefined-in-javascript"
excerpt: "In JavaScript, null and undefined data types may appear similar when viewed at an abstract level. As a result, developers often need clarification and help when debugging errors related to these two values. This article will go through the definitions..."
taxonomy_category:
  - "Development"
  - "JavaScript"
  - "Web"
taxonomy_post_tag:
  - "JavaScript"
  - "productivity"
  - "Web Development"
---

# Null vs. Undefined in JavaScript

[Isuri Devindi](https://www.syncfusion.com/blogs/author/isuri-devindi)

![Null vs. Undefined in JavaScript](https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Null-vs.-Undefined-in-JavaScript-1.png)


In JavaScript, **null** and ** undefined** data types may appear similar when viewed at an abstract level. As a result, developers often need clarification and help when debugging errors related to these two values.

This article will go through the definitions of **null** and ** undefined** along with their similarities, fundamental differences, and how you could utilize each of these values in your program.

## What is Null?

The primitive type **null** indicates the intentional absence of a value. Therefore, in JavaScript, programmers often assign ** null** to a variable to denote that the variable is declared and initialized and currently doesn’t hold a value. Still, a value can be expected in the future.

The following code snippet shows how to assign null data type to a variable.

```
var nullVar = null;

console.log("Initial value of nullVar is ", nullVar);
/*Result:
Initial value of nullVar is null
*/
```


## What is Undefined?

undefined is a primitive value automatically assigned by JavaScript to indicate the unintentional absence of any object value.

Some of the situations where JavaScript assigns the value **undefined** are:

- To a declared but uninitialized variable.``` //A variable declared without a value assigned. var undefinedVar; console.log("The value of undefinedVar is ",undefinedVar); /* Result: The value of undefinedVar is undefined. */ ```
- The programmer declares the variable without initializing it to any value (not even **null).**
- To a non-existent property of an object.``` //A non-existent property in an object. var undefinedObj={}; console.log("The value of non-existent property 'name' is ", undefinedObj.name); /* Result: The value of non-existent property 'name' is undefined. */ ```
- To a return value of a function that’s not explicitly defined.``` //A return without an explicit value. var undefinedRet = function(){ return; }; console.log("The return value of the function is ",undefinedRet()); /* Result: The return value of the function is undefined. */ ```
- To formal arguments of a function without actual arguments.``` //Formal parameters of a function without actual arguments. var undefinedParam = function(arg1){ console.log("The value of arg1 is ",arg1); }; undefinedParam(); /* Result: The value of arg1 is undefined */ ```
- To out-of-bound array elements.``` //Out of bound array elements are undefined. const array1 = [0,1,2,3]; console.log("The 4th element in the array is ",array1[4]); /* Result: The 4th element in the array is undefined. */ ```


## Similarities between Null and Undefined

Even though there are fundamental differences between **null** and ** undefined** (which will be discussed in the next section in detail), programmers often tend to use them interchangeably due to the following similarities:

- Both denote the absence of a value.
- Both are [primitive](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) JavaScript values, meaning they are not considered objects and therefore don’t have methods or properties.
- Both are **false** when encountered in a Boolean context ([falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) values).
- Despite both being falsy in a Boolean context, **null** or ** undefined** is not loosely equal (==) to any other falsy value such as zero (0), an empty string (” “, ‘ ‘), or Not-a-Number (NaN). The only values ** null** is loosely equal to are ** undefined** and itself. This is due to the [type-coercion](https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion) quality of the loose equality operator of JavaScript. The following code snippet depicts this loose equality behavior between ** undefined** and ** null.**``` var nullVar = null; console.log("The value in variable is ", nullVar); if (nullVar == undefined){ console.log("null is loosely equal to undefined!"); }; if(nullVar == 0 || nullVar == NaN || nullVar == ''){ console.log("null is loosely equal to other falsy values!"); } else{ console.log("null is not loosely equal to other falsy values!"); }; /*Result: The value in the variable is null. null is loosely equal to undefined! null is not loosely equal to other falsy values! */ ```

## Differences between Null and Undefined

Despite the similarities between **null** and ** undefined,** they may appear or be used in different places in a program due to their differences.

Some of the significant differences between null and undefined are:

- JavaScript always assigns **undefined** to indicate the absence of a value by default, and it never automatically assigns ** null** as a value. A variable will only return ** null** if a programmer or an API specifically assigns the value ** null** to the variable.
- In a numerical context, **undefined** is evaluated to ** NaN** while ** null** is evaluated to ** 0**.``` console.log(2+null); // 2 console.log(2+undefined); // NaN ```
- Even though **null** and ** undefined** are loosely equal, they are not strictly equal.``` console.log( null === undefined) // false ```
- Although both **null** and ** undefined** are primitive values in JavaScript because of a [historical error](https://2ality.com/2013/10/typeof-null.html) that transpired, ** typeof(null)**returns **“object”**. On the other hand, ** typeof(undefined)** is **“undefined”**.


## How to choose between Null and Undefined

The following instances depict when and how you could utilize **null** and ** undefined** in a meaningful manner based on the properties discussed so far:

- Since **undefined** is the default value assigned by JavaScript to uninitialized variables, if you want to indicate the absence of a deal explicitly, always use ** null** instead of ** undefined** to avoid confusion.
- To check if a variable has any value before proceeding further in a program, you can use the loose equality **==null** to check for either ** null** or ** undefined.**For example, in the following program, the function ** assignVal()** checks whether the num is ** undefined** or ** null** and assigns the value given by the user only if the variable ** num** is not initialized to any value. As a result, the value in the variable ** c** will not be changed by the function.``` let assignVal = (num,val) => { //if num is either null or undefined, assign the new value. // otherwise, keep the same value. if( num == null){ num = val; } else{ num = num; }; return num; }; var a; var b = null; var c = 0; a = assignVal(a,100); b = assignVal(b,50); c = assignVal(c,80); console.log("a =", a,",b =",b,",c=",c); /* Result: a = 100 ,b = 50 ,c= 0 */ ```
- If you try to check the absence of a value that has not been declared using the previous method, a [ReferenceError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError) will be thrown. In such instances, we can use the function **typeof()** to check whether a value has been declared and appropriately initialized using the following statement.``` typeof(undeclaredVar) !== "undefined" && (typeof(undeclaredVar) !== "object" || !!undeclaredVar)) ```

This statement will be evaluated as **false** if the variable ** undeclaredVar** is:

- Not declared.
- Declared but not initialized **(undefined).**
- Declared but initialized to **null** or ** undefined.**

As a result, you can safely conclude that a variable is properly declared and has a valid value when the previous statement is evaluated as **true.**  
 [https://www.syncfusion.com/downloads/essential-js2](https://www.syncfusion.com/downloads/essential-js2)

## Conclusion

This article covered the basics of **null** and ** undefined** values and some best practices to check and handle errors in JavaScript apps that may arise from them.

Since runtime errors in JavaScript apps often occur when variables that are undefined or null are mishandled, it’s crucial for a developer to understand and differentiate between the two specific primitive values clearly. I hope this article was a helpful guide in understanding the difference between null and undefined.

Thank you for reading!

Syncfusion’s [Essential JS 2](https://www.syncfusion.com/javascript-ui-controls)
 is the only suite you will need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download a [free trial](https://www.syncfusion.com/downloads/essential-js2)
 to evaluate the controls today.

If you have any questions or comments, you can contact us through our [support forums](https://www.syncfusion.com/forums)
, [support portal](https://support.syncfusion.com/)
, or [feedback portal](https://www.syncfusion.com/feedback/)
. We are always happy to assist you!

## Related blogs

- [JavaScript Debounce vs. Throttle](https://www.syncfusion.com/blogs/post/javascript-debounce-vs-throttle.aspx)
- [Top 7 JavaScript Object Destructuring Techniques](https://www.syncfusion.com/blogs/post/top-7-javascript-object-destructuring-techniques.aspx)
- [5 Different Ways to Deep Compare JavaScript Objects](https://www.syncfusion.com/blogs/post/5-different-ways-to-deep-compare-javascript-objects.aspx)
- [11 Console Methods in JavaScript for Effective Debugging](https://www.syncfusion.com/blogs/post/11-console-methods-in-javascript-for-effective-debugging.aspx)