Sorting Code Alphabetically
Tags: codequality, refactoring
Published: 2020-03-03 13:38:35

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 &rarr; Order

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

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
<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:

```javascript
<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:

1. I select a group of contiguous lines-of-code.

1. 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:

```javascript
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.

```javascript
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.