Skip to content
the poor coder

js how to sort array by string length

Poor Man
Published
Reading time
2 min read
On this page

Sorting an Array by String Length in JavaScript#

Sorting an array by string length is a common task in JavaScript development. The good news is that it can be accomplished with only a few lines of code.

Method 1: Using the sort() method with a custom comparator function#

The easiest way to sort an array of strings by length is to use the built-in sort() method. However, since the default behavior of sort() is to sort the elements as strings, we need to provide our own comparator function to sort the elements by length.

Text
const arr = ['apple', 'banana', 'pear', 'kiwi'];

arr.sort((a, b) => {
  return a.length - b.length;
});

console.log(arr); // ['kiwi', 'pear', 'apple', 'banana']

In this example, we create an array of fruits and use the sort() method with a custom comparator function to sort the elements by length. The comparator function takes two arguments (a and b) and returns a negative number if a should come before b, a positive number if a should come after b, and zero if they are equal.

Method 2: Using the map() method and the sort() method#

Another way to sort an array of strings by length is to use the map() method to create an array of objects containing the original string and its length, then use the sort() method to sort the objects by length, and finally use the map() method again to extract the sorted strings.

Text
const arr = ['apple', 'banana', 'pear', 'kiwi'];

const sortedArr = arr
  .map((str) => ({ str, len: str.length }))
  .sort((a, b) => a.len - b.len)
  .map(({ str }) => str);

console.log(sortedArr); // ['kiwi', 'pear', 'apple', 'banana']

In this example, we create an array of fruits and use the map() method to create an array of objects with the original string and its length. We then use the sort() method with a custom comparator function to sort the objects by length. Finally, we use the map() method again to extract the sorted strings from the sorted array of objects.

Method 3: Using the localeCompare() method#

The localeCompare() method is another way to sort an array of strings by length. This method compares two strings and returns a negative number if str1 should come before str2, a positive number if str1 should come after str2, and zero if they are equal.

Text
const arr = ['apple', 'banana', 'pear', 'kiwi'];

arr.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));

console.log(arr); // ['kiwi', 'pear', 'apple', 'banana']

In this example, we create an array of fruits and use the sort() method with the localeCompare() method to sort the elements by length. We pass { numeric: true } as the third argument to the localeCompare() method to ensure that the sorting is done numerically rather than alphabetically.

Conclusion#

Sorting an array by string length in JavaScript can be accomplished using several methods, including the sort() method with a custom comparator function, the map() method and the sort() method, and the localeCompare() method. Choose the method that best suits your needs and coding style.

Keep going

2023

how to sort an array

How to Sort an Array If you have an array and you want to order its elements in a specific way, you need to use a sorting algorithm. There are several sorting algorithms available, but two of the most commonly used are…

javascript2 min read
2023

jquery mobile or desktop

jQuery Mobile or Desktop? As a web developer, I have had some experience with both jQuery Mobile and jQuery Desktop. Both frameworks have their pros and cons, and which one to use really depends on the specific project…

javascript1 min read
2023

node.js folder structure

Node.js Folder Structure If you are new to Node.js, it can be daunting to create a folder structure that will work for your project. The structure you choose will depend on the size and complexity of your project. Here…

javascript1 min read
ESC