How To Fix Split is Not a Function Error in JavaScript

The weakly typed nature of JavaScript is often both a blessing and a curse. It is great being able to code quickly and efficiently without having to worry about type safety. Of course, without this type safety, it can be easy to make mistakes and try to use methods before finding out the hard way that they do not exist. An example of such a mistake is the .split is not a function error.

The Problem

First and foremost it is important to understand the usage of the split() method. It can only be used on strings so the first potential problem is that you have tried to use it on a variable that is not a string. For example:

let myVar = true;

console.log(myVar.split()); // ❌ split is not a function errorCode language: JavaScript (javascript)

As mentioned before, JavaScript is a weakly typed language which means the type of a variable can be dynamic and implicitly changed at runtime. With the value of a variable changing throughout the course of a script’s execution, it is possible that the variable you once thought was a string has since changed to a different type. Here’s an example of what that might look like:

let myVar = 'hello world';

console.log(myVar.split('')); // ✔️ this works fine

myVar = 123;

console.log(myVar.split('')); // ❌ split is not a function errorCode language: JavaScript (javascript)

As you can see here the value of myVar was once a string which meant the .split() method worked fine. Once it changed to a number, however, the error occurs.

The Solution

In most cases, the easiest thing you can do is simply make sure the variable you are working with is a string before you try to use split() with it. This can be achieved with some simple logic that you could do inline or as part a of a function:

let myVar = true;

const arr = typeof myVar === 'string' ? myVar.split('') : []; // ✔️ this works fine

console.log(arr);Code language: JavaScript (javascript)

What should you do if you actually want to use the value whether or not it is a string? Fortunately, most types in JavaScript have a native toString() method that converts a value to its closest string representation. In the following example we combine the logic from the previous example with toString():

let myVar = 'hello world';

console.log(myVar.split('')); // ✔️ this works fine

myVar = 123;

const arr = (typeof myVar === 'string' ? myVar : myVar.toString()).split(''); // ✔️ this also works fine

console.log(arr);Code language: JavaScript (javascript)

In this example the value is converted to a string if necessary before using split() on it. This is helpful to understand the importance of using toString() to ensure the value is a string but to make this even cleaner you could simply use toString() on the value without first checking if it is a string and get the same result — with less code!

const arr = myVar.toString().split('');Code language: JavaScript (javascript)

Conclusion

Hopefully this will help you use split() properly and safely. The simplest and most important part is to make sure you are actually working with a string. Other than that, you can tailor your solution to fit your specific use case. Let us know if you have any other ideas about how to approach this error or if you have other errors you would like us to cover.