Как работает эта функция?

При обычном задании функций, такого вида: function f() {return 1;}
При запуске скрипта браузер сначала ищет все определения используемых функций. А только потом запускает выполнение основного скрипта. Это позволяет в том числе все используемые функции определять после основного тела скрипта.

У вас в скрипте имеется два определения такого вида. И соответственно браузер использует последнее из представленных.

"Поднятие"

т.е. Ваш код компилятор исполняет так:

(function f(){
  function f() {return 1;}
  function f() {return 2;}
  return f();
})();

Далее. Javascript синтаксически допускает определение двух функций с одинаковым именем. В этом случае он использует последнее определение.

Собственно поэтому и получается двойка.

Потому что в любом языке программирования сначала читаются все найденые функции, а у тебя тут тупо перезапись, т.к. имена одинаковые.