Skip to main content

How to Trim All Strings in a JavaScript Array

When working with arrays of strings, especially those from user input or external data sources, it's common to have leading or trailing whitespace. To ensure consistent data for comparisons or display, you need to "trim" every string in the array. The most idiomatic and modern way to do this is with the Array.prototype.map() method.

This guide will teach you how to use map() to create a new array of trimmed strings. You will also learn how to handle arrays with mixed data types and the alternative forEach() method for modifying the array in-place.

The Array.prototype.map() method is the standard tool for creating a new array by transforming every element of an existing one. This is an immutable operation, meaning it leaves the original array untouched, which is a best practice in modern JavaScript for predictable code.

For example, you have an array of strings with inconsistent whitespace.

// Problem: How to trim every string in this array?
const dirtyArray = ['  apple ', ' banana', 'cherry  '];

The solution is to call map() on the array and, for each element, call the String.prototype.trim() method.

const dirtyArray = ['  apple ', ' banana', 'cherry  '];

const cleanArray = dirtyArray.map(str => str.trim());

console.log(cleanArray);   // Output: ['apple', 'banana', 'cherry']
console.log(dirtyArray);   // Output: ['  apple ', ' banana', 'cherry  '] (original is unchanged)
note

This is the most concise and readable way to achieve the goal.

How the map() Method Works​

The map() method iterates through each element of an array and executes a callback function on it. It then collects the return value of each function call and assembles them into a new array. newArray = oldArray.map(callbackFunction)

In our example:

  1. Iteration 1: str is ' apple '. The callback returns ' apple '.trim(), which is 'apple'.
  2. Iteration 2: str is ' banana'. The callback returns ' banana'.trim(), which is 'banana'.
  3. Iteration 3: str is 'cherry '. The callback returns 'cherry '.trim(), which is 'cherry'.

The map() method then returns a new array containing these results: ['apple', 'banana', 'cherry'].

Handling Arrays with Mixed Data Types​

The trim() method only exists on strings. If your array might contain other data types (like numbers, null, or objects), calling .trim() on them will throw a TypeError.

For example:

// Problem: This will crash because .trim() doesn't exist on numbers.
const mixedArray = ['  apple ', 123, null, ' banana '];

The solution is to add a type check inside the map() callback. If the element is not a string, return it as-is.

const mixedArray = ['  apple ', 123, null, ' banana '];

const cleanArray = mixedArray.map(item => {
  if (typeof item === 'string') {
    return item.trim();
  }
  return item;
});

// A more concise version using a ternary operator:
// const cleanArray = mixedArray.map(item => (typeof item === 'string' ? item.trim() : item));

console.log(cleanArray); // Output: ['apple', 123, null, 'banana']
note

This makes your function robust and capable of handling messy, real-world data.

An Alternative (Mutating) Method: Using forEach()​

If you need to modify the original array directly (an in-place mutation), the Array.prototype.forEach() method is the right tool. It provides both the element and its index, allowing you to reassign the value at that position.

Solution:

const dirtyArray = ['  apple ', ' banana', 'cherry  '];

dirtyArray.forEach((str, index) => {
  dirtyArray[index] = str.trim();
});

console.log(dirtyArray); // Output: ['apple', 'banana', 'cherry'] (original is now changed)
note

While this works, the immutable map() approach is generally preferred in modern JavaScript because it leads to more predictable code, especially in larger applications.

Conclusion​

Trimming all strings in an array is a simple task with the right functional method.

  • The array.map(str => str.trim()) pattern is the recommended best practice. It is immutable, concise, and highly readable.
  • If your array contains mixed data types, add a typeof item === 'string' check inside your map() callback to prevent errors.
  • If you must mutate the original array, use forEach() with an index to reassign the value at each position.

Table of Contents