How to prevent "Cannot read property split of undefined"

updated on 15 August 2022

Split() is a JavaScript string method that splits a string into an array of substrings without mutating the original string. As a JavaScript developer, there's a good chance that you've used the split() method and encountered this error: "Cannot read property split of undefined".

This error is a TypeError, and it occurs when calling a method, operand, or argument on the wrong data type, or when calling the split () method on a variable that returns undefined. A TypeError is one of the most common errors in JavaScript and so it's important to understand why it happens and how to avoid it.

In this article, you'll take a closer look at the meaning of the error "Cannot read property split of undefined", what causes it, some examples, and techniques to prevent it.

Why is it Important to Understand This Error?

As a developer, you're constantly dealing with user inputs as strings. Understanding this error will enable you to work with strings more effectively and will help prevent your users from having a bad experience with your application.

What Causes "Cannot read property split of undefined"?

The split() method divides a string into an array of substrings based on the separator argument passed in. Let's look at a few code examples below:

const sampleString = "This is a sample string";

Call the split() method on the string:

sampleString.split(' ');

After running this code in your console, you'll see the split() method in action:

['This', 'is', 'a', 'sample', 'string']
split() method dividing a string into an array of substrings-oag7k

The split() method can be a very useful tool in algorithms involving string data types. For example, you could use it when you need to reverse a string, or remove spaces from within a string.

The error "Cannot read property split of undefined" can occur when performing any of these types of operations if the variable is undefined. Furthermore, when you are working on a project, there are several other scenarios where this error can occur, including the following:

  • If different values are assigned to a variable several times, calling the split() method on the variable when it is set to undefined will result in the error. For example, a variable is defined as a string in a global scope and set to undefined in the function scope. In this case calling the split () method on the variable in the function scope will result in an error.
  • In cases where the return value of a variable could be a string or undefined, the function could return undefined, and thus calling split on the output might result in an error.

Let's look at a concrete example. Suppose you'd like to return a message depending on the value of n. The variable, message, is initialized on the first line. When n is greater than five, the message is ‘This number is greater than five’, and the Split() method is called on the message.

function greaterThanFive(n) {
    let message;
    if (n > 5) {
        message = 'This number is greater than five';
        return message.split(' ')
    } else {
        return message.split(' ');
    }
}

console.log(greaterThanFive(6));

The output will be:

[ 'This', 'number', 'is', 'greater', 'than', 'five' ]

The value of the message when n is less than five is not defined. As such, when n is less than five, the split function will be called on the undefined message, which will return an error. For example, calling greaterThanFive(4) will throw an error, as can be seen in the screenshot:

Calling greaterThanFive when n is less than five throws an undefined error-uyw1w
  • If you're dealing with JavaScript promises and you are trying to access the response from the promise without awaiting it, if the split() method is called on this response, this error would be generated. This is because when the response is accessed, the promise is unresolved and as such the response will be undefined.

How Can You Fix This Error?

Now that you understand why this error occurs and its potential impact on your work, how can you avoid it? There are several ways of doing this.

Check Data Types

Check the data type of your variable before proceeding to call the split() method. If the data type is a string, then you can proceed with your splitting operation. You can check a data type using the typeof() method, then call the split() method using conditional statements like if and else, as shown in the following code:

const sampleString = "This is a sample text";
if (typeof(sampleString) === 'string') {
    return sampleString.split('');
} else {
    return sampleString;
}

The first line in the code snippet defines the sample variable you want to check with the conditional statement in the next line. If the conditional if statement is true, then the sample variable is split; if it returns false, then the algorithm returns the original variable. This is a simple, easily added check to catch and address the Cannot read property split of undefined error.

Another way to implement more thorough type checks in your code is to use TypeScript. TypeScript is a strongly typed superset of JavaScript that allows you to catch type errors at build time rather than at runtime. For example, a function written in TypeScript might look like this:

// note the `string` type specified for the input parameter
const splitString = (input: string) => {
    return input.split('');
}

console.log(splitString('foo')); // [ 'f', 'o', 'o' ]

console.log(splitString(undefined)); // Argument of type 'undefined' is not assignable to parameter of type 'string'.

When using TypeScript, you're able to annotate your code with types the way you would in other strongly typed languages. This enables deeper levels of IntelliSense and in-editor errors and hints. In this case, assuming you're using a code editor with TypeScript support, the second call to splitString will show you an error directly in your code editor when you try to invoke the function with an invalid type. This can save a lot of time and effort, as it drastically shortens the feedback loop when it comes to type-related errors, allowing you to find and fix them before your code ever runs.

Assign an Alternative Value

If the variable the split() method is called on resolves to undefined, you can assign an alternative value to it.

const sampleString = undefined;
const result = sampleString || ‘ ’
return result.split()

Here, the sample variable is declared at undefined in line one. Rather than calling the split method directly on the variable, line two assigns an alternative value so the split operation will execute without error.

Optional Chaining

Optional chaining allows you to optionally call the split() method, depending on if a variable is defined or not. If the variable is defined, the function runs as expected; if it's undefined or null, it stops and returns undefined. This is especially useful in situations where the variable is optional, and may or may not be present.

const person = {}; // empty object
const personalDetails = person.location?.address.split('')
return personalDetails // returns undefined

Because the property location is not present in the person object, the code returns undefined.

try and catch Blocks

Wrapping your code in a try and catch block. While this method doesn't prevent the error from occurring, it does ensure that if it occurs, it's handled gracefully. This method is especially useful when there are edge cases that cannot be accounted for in your algorithm. You can read more about try-catch in this blog post here.

One of the benefits of the try and catch block is that it allows developers to handle errors seamlessly, and to customize your error messages. Putting your function in a try and catch block would ensure that a simple, easy-to-understand response is returned to the client if an error occurs.

function convertString(sampleString) {
  const result = sampleString.split(" ");
  return result;
}

let invalidInput;

try {
  const parts = convertString(invalidInput);
} catch (error) {
  // handle error and display message here
  console.log(error);
}

Avoid Errors With Meticulous

Meticulous is a tool to create frontend tests without writing code. Use our CLI to record a user session and test a pull request or code change by replaying that user session on the old code and new code. Meticulous captures a screenshot at the end of each replay, and diffs the two to create a simple test. Meticulous records network calls at record-time and automatically mocks out all network calls at replay-time, meaning you don’t need a backend environment to replay against. You can also switch this network mocking off if you wish to hit a backend environment.

A runtime error such as the "Cannot read property split of undefined" is easily caught by Meticulous during a replay testing session for your application. Meticulous also gives you access to a log of all the exceptions thrown and network requests, where you can view the regressions in your application, as well as a video log of the replay. You can integrate Meticulous tests into any CI system, or use our example on integrating Meticulous with GitHub. Read more at our docs.

Conclusion

In this post, you have seen the many different scenarios that can result in a "Cannot read property split of undefined" error showing up in your application. You've also learned that carrying out data type checks, assigning alternative values to variables, and exception handling with a try and catch block are some of the best ways to handle the error in your project.

Knowing how to handle errors is important, but a better approach is to avoid them altogether. Integrating Meticulous into your CI flow will allow you to easily catch errors before they reach your customers.

Meticulous

Meticulous is a tool for software engineers to easily create end-to-end tests. Use our open source CLI to open an instrumented browser which records your actions and translates them into a test. Meticulous makes it easy to integrate these tests into your CI.

Meticulous has an option to automatically mock out all network calls when simulating a recorded sequence of actions. If you use this option, you do not need a backend environment to use Meticulous and Meticulous tests never cause side effects (like affecting analytics) or hit your backend.

Try out the open-source CLI and create your first test in 60 seconds using our docs or watch the demo.

Authored by Oluseun Falodun

Read more