---
description: >-
  identifier hoisted to top of "function scope", value initialized to
  `undefined`❗️
---

# var hoisting

[JS](../../..) ⟩ [scope](../..) ⟩ [hoisting](..) ⟩ var hoisting

{% hint style="success" %}
with a [var](../../../variable/declare/var "mention") declaration

* [id](../../../grammar/token/id "mention")： <mark style="color:yellow;">**hoisted**</mark> to the <mark style="color:yellow;">**top**</mark> of its enclosing [function](../../function "mention").\
  ( 👉 [in-block-cant-shadow](../../../variable/declare/var/in-block-cant-shadow "mention"):exclamation:)
* [val](../../../val "mention")： <mark style="color:yellow;">**initialized**</mark> to [undefined](../../../val/prim/undefined "mention"):exclamation:
{% endhint %}

{% tabs %}
{% tab title="✨ 範例" %}
* [fe-not-hoisted](var/fe-not-hoisted "mention"):exclamation:
{% endtab %}

{% tab title="💈範例" %}
* replit：[var hoisting](https://replit.com/@pegasusroe/var-hoisting#index.js)
* 👉 [type](../../../err/type "mention")： [not-function](../../../err/type/not-function "mention")

```javascript
const { log } = console;

// ⭐️ var hoisting
// ----------------
// • identifier: IS hoisted❗
// • value     : initialized to `undefined`❗

// <-------- greeting  === undefined
// <-------- greeting2 === undefined

// ⭐️ identifiers `greeting`, `greeting2`:
// • can be referenced now❗ (no ReferenceError)
log(greeting,  typeof greeting );  // undefined, 'undefined'
log(greeting2, typeof greeting2);  // undefined, 'undefined'

// ⭐️ reassign before declaration is OK 
greeting2 = "Hello!";            
log(greeting2);                    // Hello!

// ⭐️ identifier `greeting`:
// • can't be called (not a "function") yet❗(⛔ TypeError)
greeting();    // ⛔ TypeError: 'greeting' is not a function

// ⭐️ the following are "var declarations"
// ⭐️ "var declaration" is related to "var hoisting"
// ------------------------------------------------------
// • identifier: hoisted to top of scope❗
// • value     : initialized to `undefined`❗
// ------------------------------------------------------

// ⭐️ var declarations

//  ╭─ id ─╮   ╭── value ──╮  (value: function expression)
var greeting = function() {
    console.log("Hello!");
};

//  ╭─ id ──╮   ╭─value─╮     (value: string)
var greeting2 = "Howdy!" ;
```
{% endtab %}

{% tab title="👥 相關" %}
* compare：[function](../function "mention") / [let-const](let-const "mention")
* [redeclare](../../../variable/declare/var/redeclare "mention"):exclamation:
* [in-block-cant-shadow](../../../variable/declare/var/in-block-cant-shadow "mention"):exclamation: - [var](../../../variable/declare/var "mention") only has [function](../../function "mention").
* [fe-not-hoisted](var/fe-not-hoisted "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] [ydkjs-scope-and-closures-v.2](../../../../master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2 "mention") ⟩&#x20;
  * [ ] [Ch. 1](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md#chapter-1-whats-the-scope) ⟩ [Hoisting](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch1.md#hoisting)
  * [ ] Ch. 5 ⟩ [Hoisting: Declaration vs. Expression](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/ch5.md#hoisting-declaration-vs-expression)
{% endtab %}
{% endtabs %}
