JavaScript中const变量初始化前无法访问，为何React函数组件该场景无报错

本质是函数定义和执行的时机差异，和JS模块的执行顺序共同导致的 #

• JS引擎加载当前模块时，会按书写顺序逐行执行顶层代码：
  1. 首先执行组件函数的定义逻辑const BasicFunctionalComponent = props => {... }，这一步只是把函数的逻辑存到内存，不会运行函数内部的代码，所以不会触发对constantVariable的访问
  2. 接着执行export default BasicFunctionalComponent完成组件导出，这一步同样不会执行函数内部的JSX逻辑
  3. 最后执行const constantVariable = '**how I am initialized**?'，完成常量的初始化，此时该变量已经脱离暂存死区，可以被正常访问
• 之后这个组件被其他模块引入、触发渲染时，才会实际调用BasicFunctionalComponent函数运行内部代码，这时候constantVariable早就完成了初始化，自然不会抛出「Cannot access 'constantVariable' before initialization」的报错。

可以对比会触发报错的写法：如果把对变量的访问逻辑直接写在顶层，而非函数内部，就会命中暂存死区的报错：

// 直接在顶层访问未初始化的const变量会抛出预期错误
console.log(constantVariable)
const constantVariable = 'test'

内容的提问来源于stack exchange，提问作者Audrey