在声明之前在 function 组件内使用全局 const 变量

Question

I came across this code, but I do not understand why the const variable myList can be used inside the function component before its declaration.

  export default function ListComponent(props) {
    const listItems = myList.map((item) => <li>{item}</li>);
   return <ul>{listItems}</ul>;
}
const myList = ["apple", "orange", "strawberry", "blueberry", "avocado"];

but the following code throws an error. It is because let or const variable cannot be used before it is declared (Variables defined with let and const are hoisted to the top of the block, but not initialized.).

error: Uncaught ReferenceError: Cannot access 'a' before initialization

const b=2;
 function test() {
  console.log(a);
  console.log(b);
}
test();
const a=1;

Can anyone explain how the first code works? Thanks in advance!

Answer 1

ListComponent runs after myList has been initialized since you use it in an export and the declaration happens before the function is called.

Also, there is an exception when using variables declared via "var". Then all declarations are moved to the top of the current scope and initialized. You can read up more on hoisting here