Are modules fully “parsed” before they are used in other files?

30 viewshoistingjavascriptreactjs
0

I came across an example in React and I am trying to figure out how and why it works.

function MyComponent() {
 return <h2>{name}</h2>
}

const name = "John";

export default MyComponent;

And in App.js, we’re using this component, nothing fancy.

But I expected embedding name within MyComponent’s JSX not to work due to how hoisting behaves with let and const, since they’re placed in the TDZ until its declaration is reached.

I also tried a simple example in JavaScript.

function myFunc() {
  console.log(name);
}

const name = "John";

export default myFunc;

And in my main.js, I import the function and simply execute it. It also works.

Which makes me think that modules go through the creation and execution phase before its content is used in another file? Or am I involving the execution context wrongly here? What’s the explanation?