# Tag Variable Hoisting (Round 2)

## Hoisting from Conditional Body

<if=show>
  <const/hoisted = "hi"/>
</if>
-- ${hoisted}

`hoisted` is rendered _once_ with `undefined` if `show` is falsy or `hi` if `show` is truthy.

<if=show>
  <const/hoisted = "hi"/>
</if>
-- ${hoisted}
<button onClick() { show = !show } />

## Hoisting from Repeated Body

<for|i| until=10>
  <const/hoisted=i/>
</for>
-- ${Array.from(hosited)}

`hosited` is rend

## Hoisting from Async Body

### Same Async Context

_child.marko_

<${input.renderBody}("sync")/>
<await|value| = Promise.resolve("async")>
  <${input.renderBody}(value)/>
</await>

_parent.marko_

<child|value|>
  <const/hoisted = value/>
</child>
-- ${Array.from(hoisted)}

`hoisted` is rendered _once_ with `["sync", "async"]`

### Separate Async Context (1)

_child.marko_

<${input.renderBody}("sync")/>
<try>
  <await|value| = Promise.resolve("async")>
    <${input.renderBody}(value)/>
  </await>
</try>
<placeholder>
  Loading...
</placeholder>

_parent.marko_

<child|value|>
  <const/hoisted = value/>
</child>
-- ${Array.from(hoisted)}

`hoisted` is rendered _twice_ with `["sync"]` first and then `["sync", "async"]`

### Separate Async Context (2)

_child.marko_

<try>
  <${input.renderBody}("sync")/>
  <await|value| = Promise.resolve("async")>
    <${input.renderBody}(value)/>
  </await>
</try>
<placeholder>
  Loading...
</placeholder>

_parent.marko_

<child|value|>
  <const/hoisted = value/>
</child>
-- ${Array.from(hoisted)}

`hoisted` is rendered _twice_ with `undefined` first and then `["sync", "async"]`