Why inside a function you can use a variable that's declared later

Question

I was writing a Dialog component and this thought came into my mind suddenly.

export const alert = (content: string) => {
  const buttons = [<button onClick={()=>closeModal()}>ok</button>] // quite ok 
  // const buttons = [<button onClick={closeModal}>ok</button>] // raise an error
  const closeModal = modal(content, buttons)
}

The error is : Block-scoped variable 'closeModal' used before its declaration. I am so used to wrap some expression in a function in React and never thought about it.

The situation may be simplified to below:

const caller = () => {
  func() // ok
}
const funcAgain = func // error
func() // error
const func = () => {}

What's this behavior called? Does it have something to do with closure? or variable hoisting?

Harish Dhami · Accepted Answer · 2020-05-15 02:40:00Z

3

This has to do with the basics of The variable declaration and scope management and then execution phase. Here variable declarations for blocked scope variables(let , const), are actually hoisted but not initialised . Js engine simply denies any operation on uninitialized variable identifiers.

Also there is famous term for this called as Temporal Dead Zone(TDZ). func is in its TDZ in this case.

Hope this helps.

answered May 15, 2020 at 2:40

Harish Dhami

1,1061 gold badge7 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

crazyones110 Over a year ago

So inside caller, caller find the func in the TDZ. And js engine doesn't care whether func is initialized or not as long as func is declared?

Harish Dhami Over a year ago

nope, that's not accurate. It's cares, any variable declaration needs to be initialised before it's usage. Be it function declaration, variable declartion or block scoped declaration. You should read more about hoisting, that will be give you better picture.

crazyones110 Over a year ago

got it. caller find the hoisted func which is not initialized yet in the global scope. But function means may called later, so it's ok. I tried if I turned caller to an IIFE, it would raised an error because func is not initialized.Thanks a lot

kc707 · Accepted Answer · 2020-05-15 02:55:13Z

0

Good question. onClick on the first sample works because it returns a new Function object. The body of the function does not get evaluated until it is being invoked.

()=>closeModal()

I think you are referring to 'Hoisting'. To hoist a function, you need to declare as below

const caller = () => {
  func() // ok
}
func() 
function func () {}

answered May 15, 2020 at 2:55

kc707

914 bronze badges

1 Comment

crazyones110 Over a year ago

the way that you typically pass in parameters that need to be evaluated later in Javascript is to pass through a function instead of passing in that expression directly

Collectives™ on Stack Overflow

Why inside a function you can use a variable that's declared later

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related