Sorting Code Alphabetically

#codequality #refactoring

This might feel like a really silly idea to most coders. But several years ago, I started paying a lot more attention to the alphabetization of my code. As near as I can tell, I'm darn near alone in this idea. I've rarely found any colleagues who do the same - or even care about it at all. But I've found that it makes my code incredibly easier to parse if I have any "arbitrary" values sorted alphabetically.

You might be thinking:

Huh?? You can't alphabetize code. Code is dependent upon the order in which it's written/executed.

Obviously, I'm not talking about alphabetizing all of your code. This can only be applied to those areas where we're defining a list of arbitrary values. But the more I've become beholden to my little alphabetization habit, the more I've realized that there's a lot of code that can absolutely be sorted, if you care to do it.

Chaos → Order

Consider this very common example from the top of damn near any React/JavaScript file:

import ReactTable from 'react-table';
import Row from 'components/row';
import CreateUserPage from 'components/modules/user/create.user.page';
import db from 'config/local';
import DeleteButton from 'components/buttons/delete.button';
import EditButton from 'components/buttons/edit.button';
import FullHeightPaper from 'components/full.height.paper';
import SpacerRow from 'components/spacer.row';
import styles from 'config/styles';
import TextField from '@material-ui/core/TextField';
import Tippy from '@tippy.js/react';
import TranslatedTextSpan from 'components/elements/translated.text.span';
import EditUserPage from 'components/modules/user/edit.user.page';
import FloatedHeaderSpan from 'components/elements/floated.header.span';
import FontAwesome from 'react-fontawesome';
import Try from 'components/try';
import {withStyles} from '@material-ui/core/styles';
import ActiveSwitch from 'components/switches/active.switch';
import Column from 'components/column';
import CreateButton from 'components/buttons/create.button';
import is from 'config/is';
import React from 'react';

What a cognitive mess!

I don't know how many times I've been looking through a file and I just wanted to know if a given package/file/class/variable was already imported. And then I see something like the jumbled mess above. I know my old is showing when I say this, but I find it so easy to skip over the exact import that I'm looking for when I'm scanning a pile of imports like the one above.

Yes, yes... I know. Any "modern" IDE does a pretty good job of showing you what's already imported as soon as you start typing - and automatically importing new items if they don't exist. But sometimes I'm truly just trying to read the code. And the haphazard order above can make that very difficult.

Imports aren't the only thing that are "order-agnostic". This can vary based upon individual coding style, but most of us find the occasion to define objects or arrays over multiple lines, like this:

const globalVars = {
    includeInactiveRoles : false,
    keyCodes : {enter : 13},
    moduleFadeTime : 3000,
    excludeInactiveRoles : true,    
    translationLanguages : {
        english : 1,
        spanish : 2,
    },
    apiUrl : 'http://127.0.0.1/apiware/',
    userAgent : 'Mozilla/5.0 (X11; Linux x86_64)',  
    colors : {
        softBlue : '#3F51B5',
        dustyRed : '#c94646',
        grey : '#444444',
        lightGrey : '#999999',
        limeGreen : '#77b255',
        white : '#ffffff',  
        nearWhite : '#eeeeee',
        paleBlue : '#708090',
    },
    contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
    excludeInactiveUsers : true,
    icons : {
        textField : 'terminal',
        users : 'users',    
        forms : 'wpforms',
        home : 'home',  
        register : 'registered',
        roles : 'chess',
        teams : 'people-carry',
        lists : 'list-ol',
        logInOut : 'power-off',
    },
    includeInactiveUsers : false,   
    months : ['January', 'July', 'August', 'September', 'October', 'November', 'December'],
};

In this example, there's no particular reason that the colors and icons values can't be listed alphabetically. And in theory, we could sort the entire globalVar in a way that's much easier to quickly scan with the human eye, like this:

const globalVars = {
    apiUrl : 'http://127.0.0.1/apiware/',
    colors : {
        dustyRed : '#c94646',
        grey : '#444444',
        lightGrey : '#999999',
        limeGreen : '#77b255',
        nearWhite : '#eeeeee',
        paleBlue : '#708090',
        softBlue : '#3F51B5',
        white : '#ffffff',
    },
    contentType : 'application/x-www-form-urlencoded;charset=UTF-8',
    excludeInactiveRoles : true,
    excludeInactiveUsers : true,
    icons : {
        forms : 'wpforms',
        home : 'home',
        lists : 'list-ol',
        logInOut : 'power-off',
        register : 'registered',
        roles : 'chess',
        teams : 'people-carry',
        textField : 'terminal',
        users : 'users',
    },
    includeInactiveRoles : false,
    includeInactiveUsers : false,
    keyCodes : {enter : 13},
    moduleFadeTime : 3000,
    months : ['January', 'July', 'August', 'September', 'October', 'November', 'December'],
    translationLanguages : {
        english : 1,
        spanish : 2,
    },
    userAgent : 'Mozilla/5.0 (X11; Linux x86_64)',
};

If the difference between these two examples seems trivial to you, then you've probably never had to waste copious amounts of time sifting through long lists of static variables trying to parse out what exists-and-doesn't-exist in the definition.

Here's one more example of code (in React/JSX) that's an excellent candidate for alphabetization. The list of component props can sometimes get quite long. Without alphabetization, you can find yourself trying to re-define the same prop twice - only to have your IDE display an error after you've already written your logic.

So with a quick bit of sorting, this:

<ListPicker
    unselectedItemsLabel={translate('Unassigned Roles')}
    labelContainerStyle={style.listPickerLabelContainer}
    onClick={handleUserRolesClick}
    selectedItemTooltip={translate('Unassign this role')}   
    unselectedItemTooltip={translate('Assign this role')}   
    selectedItems={assignedRoles}
    maxHeight={400}
    unselectedItems={unassignedRoles}
    selectedItemsLabel={translate('Assigned Roles')}
/>

Becomes this:

<ListPicker
    labelContainerStyle={style.listPickerLabelContainer}
    maxHeight={400}
    onClick={handleUserRolesClick}
    selectedItems={assignedRoles}
    selectedItemsLabel={translate('Assigned Roles')}
    selectedItemTooltip={translate('Unassign this role')}
    unselectedItems={unassignedRoles}
    unselectedItemsLabel={translate('Unassigned Roles')}
    unselectedItemTooltip={translate('Assign this role')}
/>

A Few Short Key Presses

Some of you may be thinking:

OMG. This pedantic jerk actually thinks I should be wasting my time alphabetizing lines of code.

But nothing could be further from the truth. Humans are inherently slow at alphabetizing. I don't want to do anything to make my coding slower. Neither should you. So never waste time manually alphabetizing blocks of code like the ones shown above. Let your IDE do the heavy lifting.

Line-sorting plugins have been available in IDEs now for some time. I use the JetBrains suite, and I just noticed recently that they added line sorting as an out-of-the-box feature. For me, the process is incredibly fast and simple:

I select a group of contiguous lines-of-code.
I press ALT+S.

That's it. Whatever block I've chosen is now re-sorted alphabetically.

A Step Beyond IDE Plugins

There is one more area where I strive to have my code sorted alphabetically: functions. Consider the following example:

export default class Animal extends React.Component{
   hop = () => {
      // all the cool 'hop' code here...
   };

   skip = () => {
      // all the cool 'skip' code here...
   };

   jump = () => {
      // all the cool 'jump' code here...
   };

   eat = () => {
      // all the cool 'eat' code here...
   };

   sleep = () => {
      // all the cool 'sleep' code here...
   };

   hunt = () => {
      // all the cool 'hunt' code here...
   };

   render = () => {
      return null;
   };
}

You may not think that the order of the functions makes much of a difference. In the example above, it's easy to scan up-or-down and get the full gist of everything. But in a real component, each of those functions would be filled with a dozen-or-more lines of code. I've been in large, legacy code files where there were dozens of functions, each one containing dozens of lines of code. And I can get really tired of scrolling up, then down, then back up again in the file as I search for the next function that I want to read/edit/trace/etc.

I guarantee that, if this were a file that I had created from scratch, it would look exactly like this.

export default class Animal extends React.Component{
   eat = () => {
      // all the cool 'eat' code here...
   };

   hop = () => {
      // all the cool 'hop' code here...
   };

   hunt = () => {
      // all the cool 'hunt' code here...
   };

   jump = () => {
      // all the cool 'jump' code here...
   };

   render = () => {
      return null;
   };

   skip = () => {
      // all the cool 'skip' code here...
   };

   sleep = () => {
      // all the cool 'sleep' code here...
   };
}

In case you're wondering, they do have IDE plugins that strive to sort code blocks, like functions. But I don't typically use a plugin for function sorting. I just put the functions in their "proper" place as I write them.

There are exceptions to my practice. I always put the constructor at the very top (if there is one). But for the most part, I try to keep all the "normal" functions in a logical (alphabetical) order.

Logical Limits

Although I've become something of an alphabetization addict, I will freely admit that this dances right on the border of pedantry. With that in mind, I would never try to ding someone else's pull request because they hadn't sorted any particular block of code. Hell... I wouldn't even suggest that they sort it. If they've submitted good, clean, bug-free code, then I'd be a Grade-A JERK if I tried to force my sorting fetish upon them.

You should also avoid re-sorting code when you are working on a team where you're all stepping on the same file in short order. Many times, you'll find that a particular file is kinda "yours" for a block of time while you work on a particular feature or bug. In those scenarios, feel free to sort ALL THE THINGS!!!.

But other times, when you're working on a central part of the application, you might know that other devs, with their own branches, are making updates to the same file concurrent to your efforts. In these scenarios, proceed with caution.

I do not suggest sorting any pre-existing code that you come across in a highly-trafficked part of the app... because it can lead to merge conflicts. When two devs submit code with the same instructions - but ordered differently - git doesn't know how to resolve the conflict, and you have to resolve it manually.

Top comments (4)

John Hillert • Jul 3 '21

There is one place this helps a LOT. In Redux DevTools the state tree follows the order of the individual reducers in the call to combineReducers() where the rootReducer is made. On a small project it doesn't really matter. On a big project with 30 different reducers and 200 developers all making their own little changes to the single source of truth, it becomes a huge pain to find what you are looking for quickly if it's not alphabetized. And when the state gets big enough, developers start missing when the state they need already exists, so they make duplicates.