> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/scope/hoist/variable/var.md).

# var hoisting

identifier hoisted to top of "function scope", value initialized to \`undefined\`❗️

[JS](/web/js.md) ⟩ [scope](/web/js/scope.md) ⟩ [hoisting](/web/js/scope/hoist.md) ⟩ var hoisting

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

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

{% tabs %}
{% tab title="✨ 範例" %}

* [function expression not hoisted](/web/js/scope/hoist/variable/var/fe-not-hoisted.md):exclamation:
  {% endtab %}

{% tab title="💈範例" %}

* replit：[var hoisting](https://replit.com/@pegasusroe/var-hoisting#index.js)
* 👉 [⛔️ TypeError](/web/js/err/type.md)： ['xxx' is not a function❗️](/web/js/err/type/not-function.md)

```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 hoisting](/web/js/scope/hoist/function.md) / [let/const/class hoisting](/web/js/scope/hoist/variable/let-const.md)
* [var redeclaration applied even in strict mode❗️](/web/js/variable/declare/var/redeclare.md):exclamation:
* [var has no block scope❗️](/web/js/variable/declare/var/in-block-cant-shadow.md):exclamation: - [var](/web/js/variable/declare/var.md) only has [function scope](/web/js/scope/function.md).
* [function expression not hoisted](/web/js/scope/hoist/variable/var/fe-not-hoisted.md)
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] [YDKJS: Scope & Closures (v.2)](/web/master/ref/book/you-dont-know-js-series-v.2/ydkjs-scope-and-closures-v.2.md) ⟩&#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 %}