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") // 
Apr.06,2021

const, let temporary dead zone TDZ

when the control flow of the program is instantiated in the new scope (module, function or block scope, the variables declared in let/const in this scope will first be created in the scope, but because there is no lexical binding at this time, that is, the declaration statement is evaluated, it cannot be accessed, and the access will throw an error. So the time between the time when the running process enters the scope to create the variable and the time when the variable starts to be accessible is called TDZ (temporary dead zone)

clipboard.png


window require/import


:

: ":jsundefined?.js.js.js";

,

es6letconst
es6 let constvar

:




formHeader

.js.js.js

:



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.

    MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
    MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7aab49-242ad.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
    MySQL Errno : 1021
    Message : Disk full (/tmp/#sql-temptable-64f5-7aab49-242ad.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
    Need Help?