How To Fix Uncaught TypeError: Cannot Set Properties Of Undefined In JavaScript

This article shows you how to fix the “TypeError: Cannot set properties of undefinedin JavaScript. It’s helpful for you, read on it now.

The cause of the error

The cause of TypeError: Cannot set properties of undefined in JavaScript is that you set the properties to an undefined value.

To illustrate, take a look at these examples where the error occurs:

Example 1:

let test_obj;
console.log(test_obj) // undefined

test_obj['name'] = 'hello'   //error
test_obj.age = 22   //error

Output:

In fact, a typical case of this error is when you try to set the nested property for a field with an undefined value in the object.

Example 2:

const student = {
name: 'David',
otherName: undefined,
age: 18
}

student['otherName']['nickName'] = 'Tom'

Output:

We have this error message because the property ‘otherName’ is undefined or may not even exist in your object. So the statement student[‘otherName’] is an invalid statement.

Solution for TypeError: Cannot set properties of undefined in JavaScript

Method 1: Use the conditional statement

Syntax:

if (condition1) {
// code block for this case
}
else if (condition2) {
// code block for this case
}
else {
// code block for this case
}

The if-else statement is used to check the property’s value in an object. As I mentioned above, if you want to set nested properties, you must ensure that the parent property has been declared before. And, of course, it’s not an undefined value.

const student = {
name: 'David',
otherName: undefined,
age: 18
}

if(student['otherName']) {
student['otherName']['nickName'] = 'Tom'
student['otherName']['friendlyName'] = 'Dave'
}
else {
student['otherName'] = {
nickName: 'Tom',
friendlyName: 'Dave'
}
}

console.log(student) 

Output:

{
name: 'David',
otherName: { nickName: 'Tom', friendlyName: 'Dave' },
age: 18
}

In this example, we check the property ‘otherName’ of the student object. If its value is undefined, we will set a new property with the corresponding name and its child properties, ‘nickName’ and ‘friendlyName’. Otherwise, we will set the nested property directly by using the square brackets. With conditional statements, you will avoid errors and get correct results.

Method 2: Use the OR operator

The OR operator is represented by the ‘||’ character.

Syntax:

const test_value= A || B  // This statement means that variable test_value can take the value A or B

An example for you:

let test_obj;
const temp = test_obj || {};
temp['name'] = 'hello';
temp.age = 22;
console.log(temp)

Output:

{ name: 'hello', age: 22 }

The purpose of using the OR operator is to provide a fallback value for a variable that is likely to be undefined. If the value on the left is undefined, the value on the right will be used to assign the variable.

As shown in the example above, I created a variable ‘temp’. This variable will store the object’s information along with a fallback value of an empty object. In case our object is not defined, ‘temp’ will be assigned with an empty object. So the error won’t happen because we already have a fallback value for the object.

Summary

Through this article, you know how to fix the error “TypeError: Cannot set properties of undefined” in JavaScript. If you have any problems, please comment below. Thanks for reading the whole post.

Maybe you are interested: