LongBranchLast

Spotted in a PR comment from aria in 2014:

I generally put the null case first, since it's often shorter

Long branch last is a heuristic for ordering elements in a linearized (e.g. textual) presentation of information, when the order is otherwise unimportant. That is:

// Good: short object before long object
const data = [
  {foo: 1, bar: 2},
  {
    foo: 3,
    bar: 4,
    someMore: [
      "stuff",
      "fluff",
    ],
  },
]

// Bad: long object before short object
const data = [
  {
    someMore: [
      "stuff",
      "fluff",
    ],
    foo: 3,
    bar: 4,
  },
  {foo: 1, bar: 2},
]

// Good: short case before long case
switch (something) {
  case "thing-1":
    return "blah"

  case "thing-2":
    doSomething()
    const x = andThenSomethingElse({
      with: 1,
      some: 2,
      arguments: 3,
    })
    return x
}

// Bad: long case before short case
switch (something) {
  case "thing-2":
    doSomething()
    const x = andThenSomethingElse({
      with: 1,
      some: 2,
      arguments: 3,
    })
    return x

  case "thing-1":
    return "blah"
}

// Good: short argument before long argument
doSomething(123.4, {
  options: {},
  object: {
    with: ["many"],
    different: "fields",
  },
})

// Bad: long argument before short argument
doSomething({
  options: {},
  object: {
    with: ["many"],
    different: "fields",
  },
}, 123.4)

Why the heuristic works

People read top-to-bottom, left-to-right (if they're reading English) and skim text by looking mostly at the beginning of each element (FPattern, research). Therefore, to maximize scannability and enable readers to find information quickly, you want the beginnings of as many elements as possible to be as close as possible to the top left corner of the page.

Putting the short branch first lets readers more easily associate subelements with their parent nodes. E.g. in this example:

// Good: short argument before long argument
doSomething(123.4, {
  options: {},
  object: {
    with: ["many"],
    different: "fields",
  },
})

It's easy to see that 123.4 and the options object are both arguments to doSomething. It's harder to see that if the order of the arguments is reversed.