Solve - Cannot set property of Undefined in JavaScript

avatar

Borislav Hadzhiev

Tue Oct 19 20213 min read

banner

Photo by Chad Madden

Solve - Cannot set property of Undefined #

The "Cannot set property of undefined" error occurs when setting a property on an undefined value. To solve the error, conditionally check if the value is of the expected type (object or array) or has to be initialized before setting the property on it.

cannot set property of undefined

Here is an example of how the error occurs.

index.js
const example = undefined; // ๐Ÿ‘‡๏ธ With OBJECTS // โ›”๏ธ Cannot set properties of undefined (setting 'myKey') example.myKey = 'my value'; // ๐Ÿ‘‡๏ธ With ARRAYS // โ›”๏ธ Cannot set properties of undefined (setting '0') example[0] = 'my value';

To solve this, you can provide a fallback value for the variable.

index.js
const fromDb = undefined; // โœ… Objects const obj = fromDb || {}; obj.myKey = 'my value'; console.log(obj); // ๐Ÿ‘‰๏ธ {myKey: 'my value'} // โœ… Arrays const arr = fromDb || []; arr[0] = 'my value'; console.log(arr); // ๐Ÿ‘‰๏ธ ['my value']

We used the logical OR (||) operator to provide a fallback value if the value to the left is falsy (e.g. undefined).

If the value to the left is falsy, the logical OR (||) operator returns the value to the right.

The error most commonly occurs when trying to set a nested property on an undefined value in an object or array.

index.js
const obj = {}; // โ›”๏ธ Cannot set properties of undefined (setting 'b') obj['a']['b'] = 'my value'; const arr = []; // โ›”๏ธ Cannot set properties of undefined (setting '0') arr[0][0] = 'my value';

Trying to access obj['a'] returns undefined, because the a key does not exist in the object.

Similarly, accessing the array at index 0 returns an undefined value, because there is no element at that index in the array.

When we try to set the property or index on an undefined value, the error gets thrown.

To solve the error, make sure that the object or array you're trying to set a property on exists.

Here's an example that does that for objects.

index.js
// โœ… With objects const obj = {}; if (obj['a']) { obj['a']['b'] = 'my value'; } else { obj['a'] = { b: 'my value', }; } console.log(obj); // ๐Ÿ‘‰๏ธ {a: {b: 'my value'}}

If accessing the a property on the object returns an undefined value, we set the a property to an object that contains the b property.

And if the a property is defined on the object, we set the b key to be equal to my value.

Here's the same example, but for two dimensional arrays.

index.js
const arr = []; if (Array.isArray(arr[0])) { arr[0][0] = 'my value'; } else { arr[0] = ['my value']; } console.log(arr); // ๐Ÿ‘‰๏ธ [ ['my value'] ]

We first check if the array element at index 0 is an array, if it is, we set its value at index 0 to my value.

If the array element at index 0 is not an array, we set it to an array that contains the value.

The error might also occur if you're supposed to pass an object or array to a function, but don't provide it.

index.js
function example(obj) { obj.first = 'John'; obj.last = 'Smith'; return obj; } // โ›”๏ธ Cannot set properties of undefined (setting 'first') example();
The example function expects an object argument, however we didn't pass it one, therefore the value of obj is undefined in the function and it causes the error.

To solve this, you can provide a default value for the function parameter.

index.js
// ๐Ÿ‘‡๏ธ Provide an empty object as default value function example(obj = {}) { obj.first = 'John'; obj.last = 'Smith'; return obj; } const result = example(); console.log(result); // ๐Ÿ‘‰๏ธ {first: 'John', last: 'Smith'}

We set an empty object as the default value for the obj parameter. This means that if a parameter is not passed when the function is invoked, the obj variable is set to an empty object.

Conclusion #

The "Cannot set property of undefined" error occurs when setting a property on an undefined value.

To solve the error, verify that the value is of the expected type and provide a fallback if it hasn't been initialized.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee