Skip to main content

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

The TypeError: ... .join is not a function is a common error in JavaScript that occurs when you try to call the Array.prototype.join() method on a value that is not an array. 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 (such as with objects or NodeList collections), and show you how to write "defensive" code to prevent it.

The Core Problem: .join() is an Array Method​

The .join() method is a function that exists exclusively on JavaScript Array objects. Its purpose is to concatenate all the elements of an array into a single string, separated by a specified delimiter.

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

Example of problem:

// This is a string, not an array.
let notAnArray = 'a,b,c';

// PROBLEM: Strings do not have a `.join()` method.
notAnArray.join(',');

Error Output:

Uncaught TypeError: notAnArray.join is not a function

Cause 1 (Most Common): The Variable is Not an Array (e.g., an Object or null)​

This is the most frequent source of the error. You believe you are working with an array, but you actually have a different data type.

A) The Variable is a String​

A common mistake is to try to "join" a string that is already a string.

let myString = 'Hello World';
myString.join(' '); // Throws the error.
note

If your goal was to replace spaces with another character, you should use the replaceAll() method: myString.replaceAll(' ', '_').

B) The Variable is an Object​

This often happens when working with JSON data from an API. You might have an object that contains an array, but you are calling .join() on the object itself.

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

// PROBLEM: `data` is the object, not the `items` array.
data.join(', ');        // Throws the error.

// SOLUTION: Access the property that holds the array.
data.items.join(', ');  // This works and returns "apple, banana".

C) 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 'join')"
items.join(', ');

Cause 2: The Variable is a NodeList or HTMLCollection​

DOM methods like querySelectorAll() or getElementsByClassName() return collections of elements that are array-like, but they are not true arrays. Older browsers, in particular, may not have the .join() method on these collections.

Example of problem:

<p>First</p>
<p>Second</p>
// `querySelectorAll` returns a NodeList.
let paragraphs = document.querySelectorAll('p');

// PROBLEM: `paragraphs` may not have a `.join()` method.
paragraphs.join(''); // This can throw the error.

Solution: you must first convert the collection into a true array. The standard and most reliable way to do this is with Array.from().

let paragraphs = document.querySelectorAll('p');

// Correct: Convert the NodeList to an array first.
let paragraphsArray = Array.from(paragraphs);

// Now you can safely call array methods.
let textContents = paragraphsArray.map(p => p.textContent);
console.log(textContents.join('; ')); // Output: "First; Second"

The Solution: How to Prevent the Error​

To write "defensive" code, you should always verify that your variable is an array before calling array-specific methods on it. The Array.isArray() method is the perfect tool for this.

function safelyJoin(arr, separator = ',') {
  // Add a "guard clause" to check if the input is an array.
  if (!Array.isArray(arr)) {
    console.error('Error: The provided input is not an array.');
    return ''; // Return a predictable value on failure.
  }
  
  return arr.join(separator);
}

// Example Usage:
console.log(safelyJoin(['a', 'b']));  // Output: "a,b"
console.log(safelyJoin('a,b'));       // Output: Error: ... and ""
console.log(safelyJoin({ a: 1 }));    // Output: Error: ... and ""

Conclusion​

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

To solve it, follow this diagnostic checklist:

  1. Inspect the variable: Use console.log() to see what the variable actually is. Is it a string? An object? null?
  2. Correct the variable type:
    • If it's an object, access the correct property that holds the array: myVar.items.
    • If it's a NodeList or HTMLCollection, convert it to an array first: Array.from(myVar).
  3. Add a guard clause (if (Array.isArray(myVar))) to your functions to handle non-array inputs gracefully.

Table of Contents