A function to make a word plural (or singular) in JavaScript

Sometimes, if you get one result or one item in a list, you need to display slightly different text than when you get two or more results.

Like if I have a search in my app, and it returns 1 result, it might say "1 result", but if there are 2+ results, it shouldn't say "2 result" (singular), it should say "2 results" (plural).

Or, for another example, if your app shows a user their team, it might return 10 team members, and say "10 Team Members". But what if they only have one team member? "1 Team Members" is incorrect - it should say "1 Team Member" instead.

I found myself writing this kind of logic all the time. Anywhere I had a search or fetched a list of data, I'd be coding a string concatenation, something like:

`${total} search result${ total === 1 ? "" : "s" }`

What I'm doing here is adding an "s" onto the string if it's plural (the number of results isn't one).

And you know what they say, if you need to repeat the same bit of code multiple times, you need a function!

So let's create a function called toPlural so I can get rid of all of these string concatenations and replace them with a simple function call instead.

// as a string
`${total} search result${ total === 1 ? "" : "s" }`
// with a function
`${total} ${toPlural(total, "search result")}`

That will be much neater (and clearer)!

Adding an "s" if the number count isn't 1

The first thing the toPlural function needs to do is add an "s" to the singular word if the count isn't 1.

I originally wrote this as >1 (greater than 1), but 0 should be plural too with countable nouns - which (and English is my first language, so I should probably know this, but I don't and had to look this up!) seems like what we are doing here.

Anyway, I want "0 results", not "0 result", which looks plural to me!

function toPlural(count, single) {
  return `${single}${count === 1 ? "" : "s"}`;
};

The function takes two parameters - count and single.

count is the number of results or whatever number that will determine if the word needs to be singular or plural. E.g. 0, 1, 2, 101 etc.

single is a string with the singular version of the word(s). E.g. "result", "search result", "user", "file" etc.

Here's what we get when we use the function with different arguments (singular and plural):

console.log(toPlural(1, "result")); // result
console.log(toPlural(2, "result")); // results
console.log(toPlural(0, "user")); // users
console.log(toPlural(1, "user")); // user
console.log(toPlural(10, "user")); // users

Nice!

That all seems to be working. Here are some examples of how I would use it:

let count = 1;
console.log(`${count} ${toPlural(count, "result")}`);
// 1 result

let count = 10;
console.log(`${count} ${toPlural(count, "search result")}`);
// 10 search results

That solves my original use case, but let's make this function even better!

Optional plural parameter for when the plural version is a different word

So far so good. But some plurals aren't just an "s" at the end of the single version of the word. Like people.

You would have "1 person", but you wouldn't have "2 persons". You would have "2 people".

`${peopleCount} ${ peopleCount === 1 ? "person" : "people" }`

It doesn't happen that often, but we want the function to be able to handle this use case. Let's add another (optional) parameter to the function, called plural.

If we need to use a different word for the plural version, we can supply a third argument to let the function know to return that instead of adding an "s" to the single parameter.

Here's how the updated toPlural function looks:

function toPlural(count, single, plural) {
  if (count !== 1 && plural) {
    return plural;
  }
  return `${single}${count === 1 ? "" : "s"}`;
};

Now if the count does not equal one, AND the plural argument has been provided, the toPlural function will return the plural word. Otherwise, it will just add an "s" at the end of the singular word if it's plural like it did before.

Here's how we can now turn "person" into its plural "people" using the function.

let peopleCount = 1;
console.log(`${peopleCount} ${toPlural(peopleCount, "person", "people")}`);
// 1 person

let peopleCount = 10;
console.log(`${peopleCount} ${toPlural(peopleCount, "person", "people")}`);
// 10 people

Other uses e.g. is and are

Another possible use case for this function is when you need to change other words if you are talking singular or plural.

For example, "1 person is on your team" vs. "10 people *are" on your team".

This is when things start to get a little annoying if you have to string the string together every time!

`${peopleCount} ${ peopleCount === 1 ? "person" : "people" } ${ peopleCount === 1 ? "is" : "are" } on your team`

For the singular person, we need to use "is". For the plural people, we need to use "are".

Here's how our toPlural function can come to the rescue.

let peopleCount = 10;
// calling the function once
console.log(`${peopleCount} ${toPlural(peopleCount, "person is", "people are")} on your team`);
// or example calling it twice
console.log(`${peopleCount} ${toPlural(peopleCount, "person", "people")} ${toPlural(peopleCount, "is", "are")} on your team`);

You can call toPlural once, like the first example, and add "is" to the singular word and "are" to the plural word. That works well when you need to supply a different plural word like "people".

Or you can call the function twice, like the second example, which works well if you don't need to supply a plural argument, like for user(s).

let userCount = 10;
console.log(`${userCount} ${toPlural(userCount, "user")} ${toPlural(userCount, "is", "are")} on your team`);

Super - now I have a small but useful function to help me string my strings together!