Cannot convert undefined or null to object

Question

Today, we're going to discuss a TypeError: "Cannot convert undefined or null to object" in Javascript. It occurs when the programmers pass "null" or "undefined" parameters into a function that expects an "Object" parameter as arguments. Here, we'll discuss why it occurs and how to simply resolve it.

 Table of Contents:

1. What is "Cannot convert undefined or null to object"
2. Causes
3. Solutions
   1. Use 'if' statement to Check Truthy / Falsy
   2. Use Logical Operator OR (||)
   3. Use 'typeof' operator
   4. Use ternary operator
4. The Conclusion
5. The Reference

What is "Cannot convert undefined or null to object" #

This error commonly happens in these few conditions:

1. Passing "null" or "undefined" arguments into Object.keys() function.
2. Passing "null" or "undefined" arguments into Object.values() function.
3. Passing "null" or "undefined" arguments into Object.assign() function.
4. Delete a property on "null" or "undefined" value.

Let's see an example:

const value = undefined;

Object.keys(value);

Object.values(value);

Object.assign(value, {});

delete value.property;
  

This is the output:

TypeError: Cannot convert undefined or null to object
  

All of the examples will output the same error. But why? Let's look at next section.

Causes #

This is due to the reason that we're passing "null" or "undefined" parameters into the function that expects "Object" parameter as argument. The examples on the previous section will need an "Object" argument to work but we're passing an "undefined" parameter. This will lead to a type mismatch and that's why the TypeError: "Cannot convert undefined or null to object" happens. Don't fret; it can be simply solved with few options of solutions. Let's go to next section.

Solutions #

Well, this error can be fixed very easily with few simple solutions. Let's go through them together.

Solution 1: Use 'if' statement to Check Truthy / Falsy #

const value = undefined;

if(value){
  Object.keys(value);
}

  

After implementing this solution, you may notice that the error has gone because "undefined" value is a falsy value (evaluated to be false) and hence the codes within the `if` statement will not be executed.

Tip You may check https://developer.mozilla.org/en-US/docs/Glossary/Falsy and https://developer.mozilla.org/en-US/docs/Glossary/Truthy for more information on Truthy / Flasy value.

Solution 2: Use Logical Operator OR (||) #

 const value = undefined;

const keys = Object.keys(value || {});

console.log(keys)
  

This is the output:

[]
  

Why? Because we've passed an empty object as a backup value. Logical Operator OR (||): If the left operand is evaluted as false, then the right operand will be returned as a value. Since we're passing an empty object without any key-value pairs, that's why the result is an empty array.

Solution 3: Use 'typeof' operator #

const value = undefined;

if(typeof value !== "undefined" && value !== "null"){
  console.log(Object.keys(value));
}
else{
  console.log("The arguments are falsy");
}
  

This is the output:

The arguments are falsy
  

In the above example, typeof will returns the string text representing the type of the operand's value. The codes within the `if` statement will only be executed if the value variable is not undefined type and not a null object.

Solution 4: Use ternary operator #

Ternary Operator is an alternative way of writing if-else statement. If the expression to the left of the ? is evaluated as true the value at the left of the : is taken. Else, it'll take the value at the right of the :.

const value = undefined;

console.log(value ? Object.keys(value) : Object.keys({}));
  

This is the output:

[]
  

Since the value is undefined, it's evaluated as false and Object.keys({}) at the right side of the : is executed. Hence, an empty array is printed.

All the solutions above are pretty simple and easy right?

Note You shouldn't delete the property of an undefined / a null value. You may use the above solutions to check whether the variable is null or undefined before deleting its existing property.

const value = undefined;

if(value){
  delete value.property;
}
  

The Conclusion #

In this study blog, we've learned what's TypeError: "Cannot convert undefined or null to object" in Javascript. Besides, we'd also understand how it occurs in "Object.keys()", "Object.assign()", and "Object.values()". Lastly, we learned how to solve this error using solutions such as "typeof", "Logical Operator OR (||)", "Ternary Operator", and "if statement".

The Reference #

For further information, please visit:

1. Logical operator OR (||): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR
2. Truthy Value: https://developer.mozilla.org/en-US/docs/Glossary/Truthy
3. Falsy Value: https://developer.mozilla.org/en-US/docs/Glossary/Falsy
4. typeof: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof