Skip to main content

How to Resolve "TypeError: .slice is not a function" Error in JavaScript

The TypeError: ... .slice is not a function is a common error in JavaScript that occurs when you try to call the .slice() method on a value that is not an Array or a String. This error is a clear signal that the variable you are working with is not the data type you expected it to be.

This guide will explain the fundamental reason this error happens, walk you through the most common scenarios where it occurs, and show you how to write "defensive" code to prevent it.

The Core Problem: .slice() Belongs to Arrays and Strings​

The .slice() method is a function that exists exclusively on two of JavaScript's built-in types:

  • Array.prototype.slice(): Returns a shallow copy of a portion of an array into a new array object.
  • String.prototype.slice(): Extracts a section of a string and returns it as a new string.

The error is the JavaScript engine telling you, "You asked me to call the .slice() function, but the variable you gave me isn't an Array or a String, so that function doesn't exist on it."

Example of problem:

// This is a number, not an array or a string.
let notAnArrayOrString = 12345;

// PROBLEM: Numbers do not have a `.slice()` method.
notAnArrayOrString.slice(1);

Error Output:

Uncaught TypeError: notAnArrayOrString.slice is not a function

Cause 1: The Variable is Not a String (e.g., a Number)​

This often happens when you have a number and want to treat it like a string to extract a portion of it. You cannot call .slice() directly on a number.

Example of problem:

let myNumber = 12345;

// PROBLEM: `myNumber` is a number, not a string.
let lastTwoDigits = myNumber.slice(-2);

Solution: you must first convert the number to a string before you can use string methods on it. The String() constructor is the safest way to do this.

let myNumber = 12345;

// Correct: Convert the number to a string first.
let myString = String(myNumber);

let lastTwoDigits = myString.slice(-2);
console.log(lastTwoDigits); // Output: 45

Cause 2: The Variable is Not an Array (e.g., an Object, null, or HTMLCollection)​

This is another frequent cause. You believe you are working with an array, but you actually have a different data type.

A) The Variable is an Object​

This is common when working with JSON data. You might have an object that contains an array, but you are calling .slice() on the object itself.

let data = { items: ['apple', 'banana', 'cherry'] };

// PROBLEM: `data` is the object, not the `items` array.
data.slice(1);       // This will throw the error.

// SOLUTION: Access the property that holds the array.
data.items.slice(1); // This works and returns ['banana', 'cherry'].

B) The Variable is null or undefined​

If a function or API call fails to return an array, it might return null or undefined.

let items = null;

// This will throw "TypeError: Cannot read properties of null (reading 'slice')"
items.slice(1);

C) The Variable is an HTMLCollection​

Older DOM methods like getElementsByClassName() return a live HTMLCollection, which is an array-like object but does not have the .slice() method.

let items = document.getElementsByClassName('item');

// PROBLEM: `items` is an HTMLCollection, not an array.
items.slice(1);             // This will throw the error.

// SOLUTION: Convert it to an array first.
Array.from(items).slice(1); // This works.

The Solution: How to Prevent the Error​

To write "defensive" code, you should always verify that your variable is the correct type before calling a type-specific method on it.

function safelySlice(collection, start, end) {
  // Guard Clause 1: Check if it's an array.
  if (Array.isArray(collection)) {
    return collection.slice(start, end);
  }
  
  // Guard Clause 2: Check if it's a string.
  if (typeof collection === 'string') {
    return collection.slice(start, end);
  }
  
  // If it's neither, return a predictable value and log an error.
  console.error('Error: The provided input is not an Array or a String.');
  return undefined; 
}

// Example Usage:
console.log(safelySlice(['a', 'b', 'c'], 1));   // Output: ['b', 'c']
console.log(safelySlice('hello', 1));           // Output: 'ello'
console.log(safelySlice(123, 1));               // Output: Error: ... and undefined

Conclusion​

The TypeError: .slice is not a function is a clear indicator that you are trying to call an array or string method on a value of the wrong type.

To solve it, follow this diagnostic checklist:

  1. Inspect the variable: Use console.log(myVar) and console.log(typeof myVar) to see what the variable actually is.
  2. Correct the variable type:
    • If it's a number, convert it to a string: String(myVar).
    • If it's an object, access the correct property that holds the array or string: myVar.items.
    • If it's an HTMLCollection, convert it to an array: Array.from(myVar).
  3. Add a guard clause (if (Array.isArray(myVar)) or if (typeof myVar === 'string')) to your functions to handle incorrect data types gracefully.

Table of Contents