Eating your greens - ordering arrays of strings

OftenOften in code, you handle arrays of items. Sometimes you know their types but not their number. Sometimes you even know the complete list of possible values, but not their number. What if that is the case and you want to sort them in a particular order? Not alphabetically, or by date, or from longest to shortest, or anything a computer can calculate. You want to sort them by something that seems, at least to a dumb computer, entirely arbitrary (laughable, even). Alphabetically by which letter maps to your favourite numbers between 1 and 26. Or according to a list of label names for the form inputs in a UI? Yeah, that one. That's what happened to me.

My specific use case

I was building a form at work, but I didn't know exactly what all the inputs were going to be. I knew what they could be - it's my job to, after all - but the specific subset of all possibilities depended on a user's previous input into the application. Pesky user 🙄 Dynamically building a form is fine, but what about the order of the inputs? There are established patterns to follow here. It is confusing to ask for a user's grandmother's vet's email address before cordially asking for their name, for instance.

Vegetables as an example

Let's take vegetables as an example. We are expecting an array of vegetables. We know all the possible vegetables, but we don't know the subset, or what order they'll come in. But, being unnecessarily opinionated programmers, we know the order we absolutely must display them in. First, let's make an array describing our preferred order, given all possible vegetables that exist in the app:

const idealVegOrder = [
  'Daikon',
  'Broccoli',
  'Runner beans',
  'Sweetcorn',
  'Carrots',
  'Onions'
]

The chaos of actual data

What if the user didn't put little ticks in all the checkboxes earlier in the app confirming that they love of all of these vegetables? And what if the way we get their inconvenient subset of vegetables doesn't keep them in the neat order we absolutely require? Say this is the array of vegetables that our user fancies:

const userVeggies = ['Broccoli', 'Carrots', 'Daikon', 'Onions'];

Daikon must come first! 😡

Don't worry, I'll stop rambling and give you the snippet now. Here's how we can order the chaos of user data according to our nirvana of cruciferous order:

const sortVeggies = (userVeggiesArray) => {
  const idealVegOrder = [
    'Daikon',
    'Broccoli',
    'Runner beans',
    'Sweetcorn',
    'Carrots',
    'Onions'
  ];

  return userVeggiesArray.sort(
    (a, b) => idealVegOrder.indexOf(a) - idealVegOrder.indexOf(b)
  );
}

const userVeggies = getUserVeggies(user); // ['Broccoli', 'Carrots', 'Daikon', 'Onions']

const orderedUserVeggies = sortVeggies(userVeggies); // ['Daikon', 'Broccoli', 'Carrots', 'Onions']

Hooray! I know this isn't going to set the internet on fire, but hopefully it will help one or two of you on your coding journeys. Peace 🌽🥦🥕 (Who wants to put in a proposal for a Daikon emoji?)