[Note]Difference between Global&Local Variables-JavaScript -

Cover credit to Gastaloop 102

暸解變數全域與作用域範圍之前，先來認識一下變數。

何謂變數(Variables)

宣告變數(declaring variables) 可以理解為是一個容器，把對應資料裝進去，之後可以從變數儲存的資料取值或拿來做計算。

而Javascript的宣告(declarations)有三種方式，不同關鍵字有不同作用域和行為：

var(可重複宣告變數）

let(區塊區域宣告，同區塊區域無法重複宣告)

const(不可變常數）

接下來，會試者用比喻來形容這三個宣告變數，介紹之前先理解一下宣告變數的程式碼結構:

宣告後方接者識別字(identifiers) ，再來賦予值(Value)，值可以是String, Number, Boolean, Array, Object, Constant, Null, Undefined, Symbol

JavaScript

var movieName='吉刻救援';//String

let judyAge=30;//Number

var isApple=true;//Boolean

var colorName=['black','white','gray']; //Array

var person={name:'chuhaha', age:3};//Object

const pi =3.14159;//Constant

var nickName=null;//Null

Var

先想像有一個自助取貨櫃，有兩櫃子設定相同的號碼，當輸入這組取貨號碼，櫃子會照排序只打開最後一筆放進去箱子。

舉例var是箱子，我先拿了一個箱子裝入雜誌放進櫃子設定’box’

接者在拿一個箱子裝書放進另一個櫃子設定’box’

現在，有兩個’box’的櫃子，當取貨時輸入“box”只會開啟最後放書的櫃子

JS程式碼如下：

JavaScript

var box='magazine';
var box='book';

console.log(box);
//output: book

let

延續自助取貨櫃例子，先將報紙裝箱後放入櫃子設定’box’，爾後有其它櫃子存放let設定‘box’，在取貨輸入’box’是無法開啟任何一個櫃子。

下方程式碼用「函數」做示範

JavaScript

function aArea(){
let box='newspapres';
let box='novels';
console.log('小吉取貨拿了'+box);
}
aArea();
// Uncaught SyntaxError: Identifier 'box' has already been declared

不過，JS有其它重新賦值方式：

JavaScript

function aArea(){
let box='newspapres';
box='novel';
console.log('小吉取貨拿了'+box);
}
aArea();
//output: novel

const

舉例const是箱子，繪本裝箱放入櫃子設定‘box’，爾後出現其它設定’box’櫃子，輸入‘box’皆無法開啟，const概念同let第一點說明概念，但與let不同之處，const不可用其它方式重新賦值。

JavaScript

const box='pictureBook';
console.log(box);
//output: Picturebook


const box='pictureBook';
const box='HistoricalFiction';
console.log(box);
//Uncaught SyntaxError: Identifier 'box' has already been declared


const box='pictureBook';
box='historicalFiction';
console.log(box);
//Uncaught TypeError: Assignment to constant variable.

變數取值(Declaration and initialization)

這裡先淺談變數提升(Variable Hoisting)，JS在代碼執行Hoisting之前會將變數移到作用域中，讀取程式碼遇到變數時識別字會提升至作用域前，但賦值不會提升，換言之，變數中的值必須寫在JS作用域範圍，才能有效讀取。

JavaScript

console.log(chiHuahua);
var chiHuahua='吉娃娃';
//undefined


var dog='吉娃娃'
var combine=dog+universe;
var universe='被逐出宇宙';
console.log(combine);
//吉娃娃undefined


var dog='吉娃娃'
var universe='被逐出宇宙';
var combine=dog+universe;
console.log(combine);
//output:吉娃娃被逐出宇宙

(字串示範用，筆者支持生命平權，動物友善）🐶

變數範圍(Variable Scope)

var, let, const 變數與常數在不同作用域的位置，會影響JS讀取結果，

這裡分為兩種全域變數(Global Variables)、區域變數(Local Variables)

全域變數(Global Variables)

變數寫在全域屬性可以讓整個程式讀取，但要留意程式碼數量一多情況下造成命名混亂。

JavaScript

var chiHuahua ='吉娃娃';
var aka ='狗界迷你技安';

function combine(){
	console.log('我是一隻'+chiHuahua+'又名'+aka);
}
combine();
//Output:我是一隻吉娃娃又名狗界迷你技安


console.log('這樣也可以讀到'+chiHuahua+aka);
//Output:這樣也可以讀到吉娃娃迷你技安

此外，全域變數的有個情況，當函式內寫數值，此方式同等宣告全域變數，即使在函數之外也可以取值，盡量依據情境考慮使用var, let, const為佳。

JavaScript

function dog(){
	name='pug';
}
dog();
console.log(name);
//output：pug

區域變數(Local Variables)

區域變數是指在特定區塊被聲明，變數可以寫在函數、if、迴圈。

以下舉例，函數內的var, let, const變數，只會在函數中有作用，在呼叫函數時可以成功取值，而超出函數之外訪問裡面變數程式碼會得到未定義的結果。
補充說明：let, const是在ECMAScript 6（ES6）的版本引入區域宣告聲明，ES5之前版本var具有全域特性;即使在作用域無法顯示結果，透過Chrome Inspect查詢還是有宣告成功，ES6建議避免污染全域情況下，{}內請使用let, const取代var。

JavaScript

function chiHuahua() {
  let dogName = '吉娃娃';
	let character='若吉若梨'
  console.log(dogName+character);
}
chiHuahua();
//output：吉娃娃若吉若梨


function chiwawa() {
  let dogName = '歐練吉';
}
chiwawa();
console.log('有隻吉娃娃叫' + dogName);
//Uncaught ReferenceError: dogName is not defined

偶爾會畫圖來理解程式碼，若內文圖像對你理解有幫助，歡迎自行取用。

此為紀錄學習過程，如內容有誤，歡迎留言指教。

Abby

筆記一下