TypeError: Cannot read property 'replace' of Undefined in JS

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

TypeError: Cannot read property 'replace' of Undefined in JS #

The "Cannot read property 'replace' of undefined" error occurs when calling the replace() method on a variable that stores an undefined value. To solve the error, make sure to only call the replace method on data types that implement it, e.g. strings.

cannot read property replace of undefined

Here is an example of how the error occurs.

index.js
const str = undefined; // ⛔️️ TypeError: Cannot read properties of undefined (reading 'replace') str.replace('test', 'replacement');

We called the replace() method on an undefined value, so the error occurred.

Another common cause of the error is accessing an array at an index that doesn't exist and calling the replace() method.

index.js
const arr = []; // ⛔️️ Cannot read properties of undefined (reading 'replace') arr[0].replace('test', 'replacement'); // ✅ Use optional chaining (?.) instead const result = arr[0]?.replace('test', 'replacement');

To solve the error, initialize the value to an empty string and only call the replace() method on the correct data type.

index.js
const example = undefined; // ✅ Initialize to empty string const str = example || ''; // ✅ Using optional chaining (?.) const r1 = str?.replace('test', 'replacement'); console.log(r1); // 👉️ "" // ✅ Check if truthy if (str) { const r2 = str.replace('test', 'replacement'); } // ✅ Check if string if (typeof str === 'string') { const r3 = str.replace('test', 'replacement'); } // ✅ Provide fallback in place const r4 = (str || '').replace('test', 'replacement');

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

index.js
const example = undefined; const str = example || '';
If the value to the left is falsy, the logical OR operator returns the value to the right.

The next example shows how to use the optional chaining (?.) operator which short-circuits instead of throwing an error if the reference is undefined or null.

index.js
const example = undefined; const str = example || ''; const r1 = str?.replace('test', 'replacement'); console.log(r1); // 👉️ ""
If the value stored in the str variable is equal to undefined or null, the optional chaining (?.) operator short-circuits returning undefined.

The next example checks if the value stored in the str variable is truthy.

undefined is a falsy value, so it doesn't satisfy the condition.

index.js
const example = undefined; const str = example || ''; if (str) { const r2 = str.replace('test', 'replacement'); }

The fourth example checks if the value has a type of string before calling the replace() method.

index.js
const example = undefined; const str = example || ''; if (typeof str === 'string') { const r3 = str.replace('test', 'replacement'); }

The last example uses the logical OR (||) operator to provide a fallback in place, right before calling the replace method.

index.js
const example = undefined; const str = example || ''; const r4 = (str || '').replace('test', 'replacement');

If you're getting the "Cannot read property 'replace' of undefined" error when working with DOM elements, make sure:

  • the element you're working with exists in the DOM.
  • you're inserting the JS script tag at the bottom of the body, after all of the HTML elements have been declared.

Conclusion #

The "Cannot read property 'replace' of undefined" error occurs when calling the replace() method on an undefined value.

To solve the error, provide a fallback for the value if it's equal to undefined and conditionally check that it stores the correct data type before calling the method.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.