typeerror cannot read property ‘replace’ of undefined

One of the most common errors that you may encounter is “TypeError: Cannot read properties of undefined (reading ‘replace’)” error.

This error occurs if you are attempting to use the replace() method on a variable that is either undefined or null.

Here is an example of how the error occurs:

let str;
let newStr = str.replace("hello", "hi");
console.log(newStr);

In this example, the variable str is declared yet it does not initialize, so it is undefined.

The replace() method is called on str, yet the str is undefined, and it doesn’t have a replace() method.

The reason why it results in an error message.

Output:

TypeError: Cannot read properties of undefined (reading ‘replace’)

How to Fix the error?

Here are the following methods to fix the error:

Method 1: Make sure to initialize the variable to an empty string

The first method to solve this error is to make sure that we initialize the variable to an empty string.

We will use the logical OR (||) operator to initialize the variable to an empty string.

Here is an example:

const exampleValue = undefined;

const str = exampleValue || ''; 

const example_operator = str.replace('example', 'testing');
console.log(example_operator); 

The code initializes a variable with the value of undefined, then creates a new variable that is either assigned the value of the original variable if it is true or an empty string if it is false.

We can also add a return to an empty string right before calling the String.replace() method.

Let’s take a look at an example:

const example_string = undefined;

const example_operator = (example_string || '').replace('example', 'testing');
console.log(example_operator);

When the example_string variable stores a false value or for example the undefined, the expression should call the replace() method on an empty string.

Method 2: Using optional chaining (?.)

The second method to solve this error is to use the optional chaining to the short-circuit if the reference is null.

For example:

const example_chain = undefined;

const value = example_chain?.replace('result', 'testing') || '';

console.log(value); 

This code declares a constant variable called “example_chain” and sets its value to undefined.

Then it declares another constant variable called “value” and assigns it the result of an expression.

The expression uses the optional chaining operator “?.” to check if “example_chain” is not null or undefined.

Method 3: Use if statement

The other method to solve this error is to use an if statement. By using the type of operator to verify if the variable will store a string before calling the replace() method.

For example:

const example_value = undefined;

if (typeof example_value === 'string') {
  const value = example_value.replace('example', 'testing');
  console.log(value);
} else {
  console.log('This variable does NOT store a string');
}

Method 4: Using ternary operator

The method to solve this error is to use ternary operator.

For example:

const example_string = undefined;

const value =
  typeof example_string === 'string' ? example_string.replace('replace', 'property') : '';

console.log(value);

A ternary operator is a shorthand way of writing an if-else statement in programming languages.

Common Causes of the Error

The following are the common causes of the error occurs:

• Attempting to call the replace() method on a variable or property that is undefined
• Passing an argument that is not a string to the replace() method

Additional Resources

The following articles are additional resources that could be able to help you to understand more about undefined

• Typeerror google.maps.places is undefined
• Typeerror cannot read property push of undefined
• Uncaught typeerror: cannot read property ‘addeventlistener’ of null
• typeerror: cannot read property ‘0’ of undefined
• Typeerror cannot read property ‘map’ of undefined

Conclusion

The TypeError: Cannot read properties of undefined (reading ‘replace’) typically occurs when you’re attempting to access an object property using dot notation when the object itself is undefined.

To resolve this error, make sure to initialize the variable to an empty string, using the optional chaining (?.), using the if statement, and using the ternary operator.

FAQs