Null vs. Undefined in JavaScript

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
*/

Explore the best and most comprehensive JavaScript UI controls library in the market.

Explore Now

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.
  */

Everything a developer needs to know to use JavaScript control in the web app is completely documented.

Read Now

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 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 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 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 that transpired, typeof(null) returns “object”. On the other hand, typeof(undefined) is “undefined”.

Syncfusion JavaScript controls allow you to build powerful line-of-business applications.

Try Now

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 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.

Easily build real-time apps with Syncfusion’s high-performance, lightweight, modular, and responsive JavaScript UI components.

Try It Free

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 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 to evaluate the controls today.

If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

• JavaScript Debounce vs. Throttle
• Top 7 JavaScript Object Destructuring Techniques
• 5 Different Ways to Deep Compare JavaScript Objects
• 11 Console Methods in JavaScript for Effective Debugging