[Solved] TypeError: unshift is not a function

If we call the unshift() method on the value that is not of a array type, JavaScript will throw a TypeError: unshift is not a function.

In this tutorial, we will look at what is TypeErrror: unshift is not a function error and how to resolve them with examples.

What is TypeError: unshift is not a function error?

Let us take a simple example to demonstrate this issue

// Declare and store the data into a variable
const arr = "12345"

// Add the element into array using unshift() method 
arr.unshift('6', '7')

// Print output
console.log(arr)

Output

TypeError: arr.unshift is not a function

In the above example, we have declared a variable and assigned the string value into it.

In the next statement, we call the Array.prototype.unshift()method on the value of the type string, and hence we get a TypeError: unshift is not a function.

We can also check the variable type using typeof() to confirm the datatype.

// Declare and store the data into a variable
const arr = "12345"

// Print type 
console.log("The variable is of type", typeof(arr))

Output

The variable is of type string

How to fix TypeError: unshift is not a function error?

The Array.prototype.unshift() method can only be used on the Array values and not on any other types. 

There are two ways to fix this issue in JavaScript.

Solution 1: Convert the value into a Array

We can easily resolve the issue by converting the value into a Array before calling the unshift() method.

If we know the value can be converted to a valid array, then we can use the Array.from() method in JavaScript that creates a new, shallow-copied Array instance from an array-like or iterable object. 

Let us take an example to resolve the issue using the Array.from() method.

// Declare and store the data into a variable
const data = "12345"

// Convert the string data into array using Array.from() method
const arr = Array.from(data)

// Add the element into array using unshift() method 
arr.unshift('6', '7')

// Print output
console.log(arr)

Output

['6', '7', '1', '2', '3', '4', '5']

Similarly we can use the Array.from() method to convert any Array like or iterable object into an Array.

Let us also see some examples of objects that can be converted into Array.

// String Object to Array
console.log(Array.from('foo'))

// Set Object to Array
const set = new Set(['foo', 'bar', 'baz', 'foo']);
console.log(Array.from(set))

// Map to Array
const map = new Map([[1, 2], [3, 4], [5, 6]]);
console.log(Array.from(map))
console.log(Array.from(map.keys()))
console.log(Array.from(map.values()))

Output

[ 'f', 'o', 'o' ]
[ 'foo', 'bar', 'baz' ]
[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]
[ 1, 3, 5 ]
[ 2, 4, 6 ]

Solution 2 – Performing the type check

We can also perform a type check on the variable to check if it’s a Array before calling the unshift() method.

Example – Type check using if/else

// Declare and store the data into a variable
const arr = "12345"

// Add the element into array using unshift() method 
if (Array.isArray(arr)) {
    arr.unshift('6', '7')
    console.log(arr)
}
else
{
    console.log("Given Object is not a valid Array")
}

Output

Given Object is not a valid Array

Conclusion

The TypeError: unshift is not a function occurs if we call a unshift() method on the object that is not of a type Array. We can resolve the issue by converting the Array like/ iterable object into Array using Array.from() before calling the unshift() method or by performing a type check using Array.isArray() method; we can mitigate this error.