JS, разделяющий строку, содержащую числа, возвращает массив с пустым элементом

Попробуй это:

let str  = 'foo123'
let splits = str.split(/(\d+)/g).filter(x => x! = "")
console.info(splits)

Это происходит из-за того, что метод split разделяет ваш массив (в данном случае строку) налево и направо... чтобы избежать этого простого фильтра для удаления пробелов.

Это связано с тем, что для определения среза: .... Если исходный текст начинается или заканчивается разделителем, функция возвращает массив, первым или последним элементом которого будет пустой текст соответственно. ...

Попробуй это

let str  = 'foo123'
let splits = str.split(/(\d+)/g).filter(Boolean)
console.info(splits)

Он добавляет пустой элемент, потому что вы используете последовательность цифр в качестве разделителя. Так что правая сторона в вашем случае будет пустой, потому что после цифр нет символа.

why does this happen

Вы используете последовательность цифр как разделитель. Разделитель отделяет левую сторону от правой. В вашем примере разделителем является в конце строки, поэтому правая сторона пуста (-> пустая строка).

Why split method doesn't return empty element when the input string is e.g foo123bar ?

Потому что строка не конец с вашим разделителем.

Это ничем не отличается от использования любого другого значения в качестве разделителя.

console.info('foo,'.split(','));
console.info('foo,bar'.split(','));

Что особенного в использовании регулярного выражения, так это то, что сам разделитель включается в вывод, если он является частью группы захвата.

Если ввод всегда имеет одну и ту же структуру, то есть буквы, за которыми следуют цифры, я бы просто нашел индекс первой цифры, а затем соответствующим образом нарезал строку:

function split(str) {
  const match  = str.match(/\d/);
  if (match) {
    return [str.slice(0, match.index), str.slice(match.index)];
  }
  return [str];
}

console.info(split('foo123'));