What are the benefits of encapsulating conditionals (in functions)?

Question

According to this clean-code guide you should encapsulate conditionals:

function shouldShowSpinner() {
  return fsm.state === 'fetching' && isEmpty(listNode);
}

if (shouldShowSpinner()) {
  // ...
}

Why not just write:

const shouldShowSpinner = fsm.state === 'fetching' && isEmpty(listNode)

if (shouldShowSpinner) {
  // ...
}

Answer 1

Because

const shouldShowSpinner = fsm.state === 'fetching' && isEmpty(listNode)

is only evaluated once. The assignment operator = stores the result of a single evaluation of the boolean expression.

This is fine if the state of the boolean expression never changes during code execution in the relevant scope, but will produce wrong results if it does change, in which case you will get the now inaccurate result of the original calculation.