JavaScript - 變量作用域

Hello there, future JavaScript wizards! Today, we're going to embark on an exciting journey into the world of variable scope. Don't worry if you're new to programming – I'll be your friendly guide, and we'll explore this concept together, step by step. So, grab your virtual wands (keyboards), and let's dive in!

JavaScript - Variable Scope

JavaScript 變量作用域

變量作用域就像是你變量的遊樂場。它决定了在您的代碼中變量在哪裡是可見的並可以被使用。把它當作是您的變量的“可見範圍”。讓我們從一個簡單的例子開始：

let globalVar = "I'm visible everywhere!";

function sayHello() {
console.log(globalVar);
let localVar = "I'm only visible inside this function!";
console.log(localVar);
}

sayHello();
console.log(globalVar);  // This works
console.log(localVar);   // This will cause an error

在這個例子中，globalVar 就像是學校裡的明星學生——大家都認識他並且可以和他交談。但 localVar 則更像那個害羞的學生，只有在藝術課（我們的 sayHello 函數）時才會出來。

JavaScript �塊作用域

現在，讓我們來討論塊作用域。在 JavaScript 中，一個塊是由花括號 {} 定義的。使用 let 和 const 聲明的變量是塊作用域的，這意味著它們只在聲明的塊內可見。

if (true) {
let blockScopedVar = "I'm only visible in this block!";
console.log(blockScopedVar);  // This works
}

console.log(blockScopedVar);  // This will cause an error

把塊作用域想像成一個秘密俱樂部。只有俱樂部內的酷孩子（變量）才知道秘密握手（可以訪問變量）。

JavaScript 函數作用域

函數作用域就像是您的變量的私人房間。在任何函數內聲明的變量只在那個函數內可訪問。我們來看一個例子：

function outer() {
let outerVar = "I'm in the outer function!";

function inner() {
let innerVar = "I'm in the inner function!";
console.log(outerVar);  // This works
console.log(innerVar);  // This works
}

inner();
console.log(outerVar);  // This works
console.log(innerVar);  // This will cause an error
}

outer();

在這裡，outerVar 就像是一個父母，可以窺視他們孩子的房間（inner 函數），但孩子的玩具（innerVar）則留在孩子的房間內。

JavaScript 局部作用域

局部作用域指的是只在代碼的特定部分可訪問的變量。這可以是在一個函數內（函數作用域）或一個塊內（塊作用域）。我們來看一個更複雜的例子：

let globalVar = "I'm global!";

function outerFunction() {
let outerVar = "I'm from the outer function!";

if (true) {
let blockVar = "I'm from the block!";
var functionVar = "I'm visible throughout the function!";

console.log(globalVar);    // Works
console.log(outerVar);     // Works
console.log(blockVar);     // Works
console.log(functionVar);  // Works
}

console.log(globalVar);    // Works
console.log(outerVar);     // Works
console.log(functionVar);  // Works
console.log(blockVar);     // Error!
}

outerFunction();
console.log(globalVar);    // Works
console.log(outerVar);     // Error!
console.log(functionVar);  // Error!
console.log(blockVar);     // Error!

這個例子就像是一次大家庭聚會。globalVar 是大家都認識的祖父母。outerVar 像是一個父母，在 outerFunction 家庭中被認識。blockVar 是那個只在某一個房間（if 塊）出現的害羞表親。functionVar，使用 var 聲明，是那個在函數內到處都聽得見的嘈雜叔叔。

現在，讓我們總結一下不同類型的變量聲明及其作用域：

聲明	作用域	變量提升	可重新賦值
var	函數	是	是
let	塊	否	是
const	塊	否	否

記住，var 是那個老派的酷孩子，有點不可預測。let 和 const 則是那個遵守規則的新孩子。

理解變量作用域在 JavaScript 中至關重要。它幫助您撰寫更乾淨、更高效的代碼，並避免討厭的錯誤。總是記得在適當的作用域聲明您的變量，並注意您試圖訪問它們的位置。

當我們結束這堂課時，把您的代碼想像成一個組織良好的城市。全局變量是所有人都可以參觀的公共公園。函數作用域像是具有不同樓層（塊）的建築，每個樓層都有自己的房間（局部作用域）。通過將您的變量放在它們正確的“家”中，您將創造一個和諧且運作良好的 JavaScript 城市！

持續練習，不久您將成為變量作用域的大師。下次見，快樂編程！

Credits: Image by storyset