可変巻き上げ📢

イントロ
あなたはこれらの3つのコンソール何を伝えることができます.印刷の下のログ?

console.log('x is', x)

var x

console.log('x is', x)

x = 5

console.log('x is', x)

そうでないならば、私と一緒にいてください、そして、私はhoistingをdeystifyするために、最善を尽くします.
そして、たとえ彼らが何を印刷するかについてわかっているとしても、あなたが理由を説明することができないならば、固執してください.何か新しいことを学ぶかもしれない!

巻上げ
Hoistingは悪名高い言語のために、またはいくつかの経験を持っている人のための最も混乱した側面の一つです-あなたはそれを聞いたことがある、それが存在することを知って、あなたはそれが起こる知っている…しかし、あなたは本当に正確にシーンの背後に起こっているかを知らない.
多くの場合、変数と関数の宣言が物理的にコードの先頭に移動したかのように説明されます.しかし、それは起こっていることでありません.hoistingを理解するために、JavaScriptエンジンがコードを通過するさまざまな段階を理解する必要があります.
注意: let/const/class宣言は異なった動作をします.最初にVAR/機能でhoistingを理解するのが最も良いと思います.このポストでは、変数の浮気を説明することから始めます.

JavaScriptエンジン
JavaScriptエンジンなしでJavaScriptについて話すことはできません.JavaScriptコードを読み書きするプログラムです.それはウェブブラウザであなたの美しいコードを実行することを可能にするものの核心です.今のところ、メモリの作成フェーズと実行フェーズの2つのフェーズでその仕事をしていることを知っているだけで十分です.

ブラウザ開発ツール
十分な話!のいくつかの例を通して行きましょう.あなたがすばやくあなたが行くように例を試してみたいならば、あなたはあなたのブラウザーで開発者ツールを開くことによってそうすることができます.
開発者ツールでマルチラインコードを実行するためのヒント:シフト+を入力し、新しい行に移動し、それらを実行するときにEnterキーを押します.または単にコピーして、全体のコードを貼り付けるし、Enterキーを押します.

可変巻き上げ
よし、ここが一番だ.

console.log(x)

// ReferenceError: x is not defined

わかりました.これは実際に巻上げの例ではありません.変数Xはコード内の任意の場所で宣言されていないので、Xが定義されていないと不平を言います.
これはどうですか.

console.log(x)
var x

// undefined

一見して、最初の例のように多くのことを考えるかもしれません.しかし、このコードはエラーをスローしません.未定義の値を実行し、出力します.JavaScriptでは、未定義は実際の値です.したがって、これは基本的にJavaScriptエンジンを解釈します.
ここでのキーは、Xが定義され、その宣言の前に利用可能であることです.従って、実施例2は実際には以下のようになる.

var x
console.log(x)

しかし、Xの値は未定義ですか?私は確かにしなかった、私は?
これはJavaScriptエンジンの仕事です.メモリ生成フェーズの間、それがコードを読んで、変数定義を認識して、未定義にそれらを初期化して、実行段階の間、使われるためにそれらをメモリに入れます.
別の例を見てみましょう.コンソールはどうしますか.ログ出力?

console.log(x)
var x = 10

// undefined

Xを10に初期化したので、10を出力すると推測したかもしれません.しかし、コンソール.log未定義の出力.なぜ?
ここでは、gotchaです.初期化は巻かれません.
メモリ作成フェーズ中、JavaScriptエンジンはXの宣言を認識し、Xを自動的に初期化してXを未定義にし、利用可能にした.しかしながら、初期化(10)が巻き上げられなかったので、Xの値は実行がコンソールに達したとき、未定義としてとどまりました.1行目のログ.
別のコンソールを追加した場合.3行目のログは10になります.

console.log(x)
var x = 10
console.log(x)

// undefined
// 10

得た?
すべてのフィードバック、質問、またはトピックの要求を投稿してください.私も感謝👏 あなたがポストのような場合、他の人もこれを見つけることができます.