こんにちは.今日は JavaScript での巻き上げのアイデアを見ていきます.

巻き上げとは

巻き上げとは、インタープリターがコードの実行前に変数と関数の宣言にメモリを割り当てるプロセスです.

var キーワードを使用して宣言された変数は、未定義の値で自動的に初期化されます.キーワード let と const を使用して変数を宣言すると、巻き上げで初期化されません.

通訳対私たち

変数の宣言 – var キーワードの使用

console.log(sport)
var sport = "Cricket"

上記のコードを見てください.宣言する前に変数を使用しました.これはエラーをスローするはずですよね?そうではありません.ここでホイストが助けになります.

このコードを実行すると、コンソールに未定義のログが記録されます.インタープリターがコードをどのように見るかを見ると、なぜこれが起こるのか理解できます.

インタプリタがコードをどのように認識するかを次に示します.

var sport;
console.log(sport)
sport = "Cricket"

変数の宣言 – let/const キーワードの使用

console.log(player)
let player = "Sanga"

これも undefined を出力として記録するはずですよね?残念ながら、巻き上げは let 変数と const 変数を初期化しません.

重要: JavaScript のすべての宣言が「持ち上げられている」ことに注意してください. let と const に関して言えば、宣言された変数は初期化されていないままです. let または const ステートメントが実行されたときにのみ初期化されるため、エラーがスローされます.この変数の作成と初期化の間の時間は、Temporal Dead Zone と呼ばれます. (詳細については、this StackOverflow answer をお読みください)

この場合、変数が初期化されないため、上記のコードは ReferenceError をスローします.

ReferenceError: Cannot access 'player' before initialization
    at Object.<anonymous> (C:\Users\ThenukaAluthGedara\Desktop\Hoisting.js:1:13)
←[90m    at Module._compile (internal/modules/cjs/loader.js:1063:30)←[39m
←[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)←[39m
←[90m    at Module.load (internal/modules/cjs/loader.js:928:32)←[39m
←[90m    at Function.Module._load (internal/modules/cjs/loader.js:769:14)←[39m
←[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)←[39m
←[90m    at internal/main/run_main_module.js:17:47←[39m
Please note that only declarations are hoisted in JavaScript.

次のコードは、変数が初期化されただけであるため、依然として ReferenceError をスローします.

console.log(name)
name = "Sanga"

関数宣言による巻き上げ

インタープリターは常に関数宣言を最初に確認するため、次のコード スニペットはどちらも正常に機能します.

greeting("The Coding Cricketer")

function greeting(siteName){
    console.log("Welcome to " + siteName)
}

function greeting(siteName){
    console.log("Welcome to " + siteName)
}

greeting("The Coding Cricketer")

参考文献

MDN Docs on Hoisting

W3Schools article on Hoisting

Digital Ocean article on Hoisting

結論

スコープの先頭で変数を宣言することは、常に良いコーディング プラクティスです.

JavaScript で「use strict」を使用すると、最初に変数を宣言しないと使用できなくなります.これについては、今後の記事で説明します.

私の記事を読んでいただきありがとうございます.今日、あなたが何か価値のあることを学んだことを願っています.気に入ったら、いいねを押してブログを購読してください.次の記事でお会いしましょう.安全を確保😷