The problem when a function is assigned to a variable with the same name

problem description:
I have two js files
I defined one of this function in the first js file

function formHeader (msg) {
   let formHeaderContent = `
   <caption>${msg}</caption>
   <tr>
   <th></th>
   <th></th>
   <th>1</th>
   <th>2</th>
   <th>3</th>
   <th>4</th>
   <th>5</th>
   <th>6</th>
   <th>7</th>
   <th>8</th>
   <th>9</th>
   <th>10</th>
   <th>11</th>
   <th>12</th>
   </tr>`;
   return formHeaderContent;
}

in the second .js

function renderForm(data, msg) {
    // :12 12
    //  {
    //    HTML
    // }
    // HTMLtable-wrapper

    const formHeader = formHeader(msg);
    ....
 }

wrote one of this function, and then mistakenly reported Uncaught ReferenceError: formHeader is not defined
this is how I understand : my function is declared and defined in the global of another js file, why does it report an error undefined? here? My understanding is that both .js belong to a global environment, I am in one of the .js life functions, the other .js should also be able to call it, I do not know where to understand the problem
what is the difference between it and this function?

function abc(val) {
    return val;
}
var abc = abc("hello") //

Instead of calling the outer foo , the program reports an error on the fourth line. maybe some students misunderstand let / const , thinking that they will not improve the variables. In fact, the JS engine scans all the definitions once, generates Scope, and then processes the code logic. This is necessary in order to strike a balance between efficiency and convenience. To oversimplify, the only difference between let / const and var is that undefined is replaced by ReferenceError . So as I said above, formHeader is already a local uninitialized value, which means that the uninitialized value corresponding to the keyword will be returned according to the keyword used when visiting ( undefined of var , let / const ReferenceError ). maybe I didn't explain the problem of ReferenceError directly, but I think "the timing of variable declaration" is the more fundamental problem. After all, the title of the main question is "when a function is assigned to a variable with the same name", and even the veteran may not be able to understand it. Everyone upstairs explains the temporary dead zone directly, but after replacing it with var , the first piece of code will not work, and the subject will ask the revised question on SF. The comment below says, "the error that should be reported is formHeader is not a function.." in fact, if the const of the subject is replaced with var , or if hack enters the browser kernel to disable TDZ, to report exactly this error.