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 中,一個塊是由花括號 {} 定義的。使用 letconst 聲明的變量是塊作用域的,這意味著它們只在聲明的塊內可見。

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 是那個老派的酷孩子,有點不可預測。letconst 則是那個遵守規則的新孩子。

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

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

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

Credits: Image by storyset