I want to understand why are variables were already declered even if I seem to declare them later?

const main = (function functio(params) {
  console.log(2);
  console.log(1);
  function fun() {
    button.addEventListener('click', () => {
      console.log(input.value);
    });
  }
  const input = document.querySelector('input');
  const button = document.querySelector('button');
  return (Object.freeze || Object)({
    init: function (data) {
      fun();
    },
    load: function (data) {},
  });
})();
main.init();