Почему так работают функции?

Потому что в твоем случае функция объявлена с помощью function declaration и такие функции можно вызывать до их объявления, потому что такие функции создаются еще до начала выполнения кода интерпретатором.

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

1. Нужно изучить что такое function declaration и expression и разницу между этими методами объявления функций, об этом можно почитать в этой статье https://learn.javascript.ru/function-expressions
2. Нужно изучить тему замыканий, довольно сложная тема для новичков, но это очень важная тема в JavaScript, новичку может потребоваться некоторое время чтобы разобраться в ней, если освоишь эту тему, то это даст тебе полный ответ на твой вопрос. О замыкании можно прочитать в этой статье https://learn.javascript.ru/function-expressions

JS-код (да, даже в интерпретируемых языках) сначала компилируется в байт-код виртуальной машины, а потом выполняется. И если переменная (данные) создаётся в процессе выполнения кода (потому, её надо сначала объявить, а потом использовать), то функция (код) создаётся в процессе компиляции и может быть использована до объявления.

Интерпретатор сначала собирает все функции, потому уже приступает к их выполнению

Код работает, потому что функция является объявлением функции, которое создает функцию в глобальном контексте исполнения до выполнения любого кода в этом контексте. Поэтому, когда вы вызываете функцию why() выше в коде, она уже была объявлена и добавлена в глобальный контекст выполнения. Такой подход называется "всплытием" (hoisting) функции и применяется в JavaScript для того, чтобы разрешить ссылки на функции, которые объявлены позже в коде. Однако, хотя ваш код работает, рекомендуется объявлять функции до их вызова, чтобы избежать путаницы и сделать код более понятным.