JavaScript淺嚐紀錄No.2-JS的中變數、函式的潛規則

更新 發佈閱讀 8 分鐘

宣告變數、賦值 (assign)

變數的作用

為什麼要使用變數,原因其實很簡單,就是為了不要重複打同樣的一大串程式碼,更簡單的說就是懶,所以創造變數讓它去記得想讓它去記得的東西(同樣的一大串程式碼)。

變數的命名是有規則的

需要注意的事項

  • 變數的名稱被稱為 identifiers 需要遵從一定的規則。
  • 可以使用錢符($)、底線(_)與數字進行命名。如 $myBirthday 或 _myBirthday
  • 可以使用英文大、小寫命名不同變數。如 MyBirthday 與 myBirthday 會被視作不同變數。
  • 名稱不可使用JavaScript語言保留字詞(w3schools中JavaScript Reserved Words的介紹)。
  • 數字不能作為變數開頭

可以怎麼幫變數命名?

變數與函式,都用小駝峰式(camelCase)的命名或大駝峰式命名法(CamelCase)命名,像是myBirthday(小駝峰式)、MyBirthday(大駝峰式),說實在我也很少看到用錢符($)、底線(_)作為變數的開頭的(或旭是因為我看的程式碼太少吧),所以還是隨眾用小駝峰式(camelCase)命名方法。

參考資料(裡面有介紹更多好的跟不好的命名,可以在詳讀。)


變數、常數與命名


變數命名規則


宣告變數

在ES6裡提出新的宣告方式letconst,但原本的var還是可以繼續使用,但已經不太建議了!這3個宣告的方式差異是甚麼?

  • var:宣告一個可隨意更改其內容的變數。
  • let:宣告一個可隨意更改其內容的區塊區域變數。
  • const:宣告一個只可讀取的不可變常數(像是 const pi = 3.14,是固定的),如果去改變用const宣告的變數的值,將會得到Assignment to constant variable.,不能對const宣告的變數的值作重新賦值的動作,但用const宣告物件,如果要改變物件裡面的屬性值是被允許的(又牽扯到資料型別的儲存方式了,有空再打)。

在上面出現了一個名詞叫作區塊區域變數,這也是為什麼varlet很相似,但不建議使用var而要改用let的原因?

全域變數v.s區域變數

全域變數 (global variable)指得是在這份程式文件裡面的所有程式碼都可以使用到這個變數。

區域變數(Local Variable)指得是變數只在宣告的區塊或函式裡面才有效(也就是在{}裡面)。

甚麼意思?比較一下下面的程式碼。

//var

if (true) {

var A = 5;

}

console.log(A);

console.log(this); //這個this指的是window object



//let

if (true) {

let B = 5;

}

console.log(B);

console.log(this);

if裡用var宣告的變數A,在if{}外面還能取得到值,並且利用console.log(this),查詢window object時,還能在裡面發現變數A的值,這也就是全域變數 (global variable),這也就是為什麼在MDN裡對於var有這段描述:其變數值還會超出宣告區塊而影響到全部的描述碼。

再看看let的情況有不一樣了在if裡面宣告的變數B,在if{}外面就無法取得到值了,並且利用condole.log(this)(要先刪除console.log(B)再用),查詢window object時,也找不到變數B了,這也就是區域變數(Local Variable)。

下面幾種情況很容易混淆,一定要注意:

  • function中利用var宣告變數也能產生區域變數,這似乎牽涉到function的語法作用域問題就暫時不解釋了。
function getTotal(){

var total = 40; //區域變數

console.log(total);

}

getTotal();//40

console.log(total); //Uncaught ReferenceError: total is not defined



//比較

var total //全域變數

function getTotal(){

total = 40;

}

getTotal();//調用後,才會執行total = 40,去改變全域變數的total值

console.log(total);//如果沒有調用function會產生「undefind」
  • 調用function改變全域變數的值。
let a = 1;

function getTotal() {

a = 2;

console.log(a);

}

getTotal();//2

console.log(a);//2



//比較,沒有調用getTotal()

let a = 1;

function getTotal() {

a = 2

console.log(a);

}

console.log(a);//1
  • {}內找不到變數會「往外層查找」,不論是varletconst都一樣。
let a = 1;

function getTotal() {

console.log(a);

}

getTotal();

console.log(a); //1

參考資料:


MDN語法與型別


卡斯柏JavaScript 變數的宣告與他的作用域


宣告變數後賦值

透過=賦值給變數,例如let a = 1

賦值後透過console.log()才能正確地取得變數的值,如果沒賦值就會顯示undefined

函式

宣告函式(Function declaration)v.s函式表達式(Function expression)

宣告函式(Function declaration)

  • function如果不需要參數,小括號還是不能省略,function(){...}
  • return代表再調用函式後將值返回給調用此函式的代碼,如果不需要返回值,就不需要用。
  • 在宣告函式時,num1num2被稱為參數(parameter),但當調用時,在參數位置輸入的值會稱作引數,例如getTotal(3,4),裡面的3跟4就是引數(argument)。

函式表達式(Function expression)

let total = function (num1, num2) {

return num1 * num2

}

total();

方法跟宣告變數一樣,利用let宣告一個叫做total的變數,並賦予它一個匿名函式(沒有函式名稱的函式)。

兩者差異

  • 宣告函式(Function declaration)
    • 函式宣告式(function declaration)可以被提升(hoisting)到頂部,所以可以在宣告函式前,就先調用此函式。
    • typeof回傳值式"Function"
    • 函式名()調用函式。
  • 函式表達式(Function expression)
    • 不能被提升(hoisting),不能在宣告前調用此函式。
    • typeof回傳值式"Function"
    • 變數名()調用函式。

參考資料:

Fooish 程式技術的JavaScript Function (函式)

MDN語法與型別

留言
avatar-img
鍋灶的熱湯
1會員
13內容數
分享生活、旅行經驗,經驗是種解決問題的方式,方式不只一種歡迎大家一起分享經驗
鍋灶的熱湯的其他內容
2026/02/27
JavaScript跟前端的關係? MDN中的介紹: JavaScript是一種准許你在網頁上實現複雜事物的程式語言 — 每次網頁要做的不只是停在那裏,並顯示靜態信息給你— 及時顯示內容更新、交互式地圖、繪製2D/3D 動畫圖形以及滾動視訊點唱機等等。— 你會發現 JavaScript 幾乎無處
2026/02/27
JavaScript跟前端的關係? MDN中的介紹: JavaScript是一種准許你在網頁上實現複雜事物的程式語言 — 每次網頁要做的不只是停在那裏,並顯示靜態信息給你— 及時顯示內容更新、交互式地圖、繪製2D/3D 動畫圖形以及滾動視訊點唱機等等。— 你會發現 JavaScript 幾乎無處
2026/02/27
在了解 Callback Functions Hell ,必須先知道甚麼是 Callback Functions ,而 Callback Functions 怎麼造成 Callback Functions Hell。 Callback Functions 其實有寫過 JS 的 都應該有用過 Ca
2026/02/27
在了解 Callback Functions Hell ,必須先知道甚麼是 Callback Functions ,而 Callback Functions 怎麼造成 Callback Functions Hell。 Callback Functions 其實有寫過 JS 的 都應該有用過 Ca
2026/02/27
先來了解一下一個專有名詞 「AJAX」(非同步 JavaScript 及 XML,Asynchronous JavaScript and XML),這個名詞主要用來描述利用 JS 中數個方法來向伺服器取得資料,且不需要更新畫面即可及時取得最新內容,而這一篇主要是介紹如何使用 XMLHttpReque
Thumbnail
2026/02/27
先來了解一下一個專有名詞 「AJAX」(非同步 JavaScript 及 XML,Asynchronous JavaScript and XML),這個名詞主要用來描述利用 JS 中數個方法來向伺服器取得資料,且不需要更新畫面即可及時取得最新內容,而這一篇主要是介紹如何使用 XMLHttpReque
Thumbnail
看更多
你可能也想看
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。
Thumbnail
JavaScript 中的 ESM(ES Modules)和 CJS(CommonJS)是用於模塊化開發的兩種不同的模組系統。 關於CJS CJS 是 CommonJS 的模塊系統,最初是為了在伺服器端使用的 Node.js 開發而設計的,但也被廣泛用於前端開發。CJS 使用 require 函數來
Thumbnail
JavaScript 中的 ESM(ES Modules)和 CJS(CommonJS)是用於模塊化開發的兩種不同的模組系統。 關於CJS CJS 是 CommonJS 的模塊系統,最初是為了在伺服器端使用的 Node.js 開發而設計的,但也被廣泛用於前端開發。CJS 使用 require 函數來
Thumbnail
在初學程式的時候,我曾經看室友開發專案到一半時,突然坐在那發呆,於是我好奇一問,室友說:「我在等程式編譯完成啊。」 還記得當初還是程式小菜雞的我,懞懂無知的說:「編譯?哈哈哈,我們 JavaScript 都不需要編譯耶,可以直接跑在瀏覽器上。」 室友一臉莫名其妙地回我:「噢,是嗎⋯⋯」
Thumbnail
在初學程式的時候,我曾經看室友開發專案到一半時,突然坐在那發呆,於是我好奇一問,室友說:「我在等程式編譯完成啊。」 還記得當初還是程式小菜雞的我,懞懂無知的說:「編譯?哈哈哈,我們 JavaScript 都不需要編譯耶,可以直接跑在瀏覽器上。」 室友一臉莫名其妙地回我:「噢,是嗎⋯⋯」
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
在現代 Web 開發中,框架的規範性對於團隊合作至關重要。這不僅提高了程式碼的一致性,也降低了理解他人程式碼的時間成本。現在,我們將以 JavaScript 為例,展示如何使用關注點分離的原則來撰寫一個簡單的應用喔。
Thumbnail
在現代 Web 開發中,框架的規範性對於團隊合作至關重要。這不僅提高了程式碼的一致性,也降低了理解他人程式碼的時間成本。現在,我們將以 JavaScript 為例,展示如何使用關注點分離的原則來撰寫一個簡單的應用喔。
Thumbnail
自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
JSON 全名 JavaScript Object Notation,其格式基本上就是key: value的組成如下: { "name": "Bob", "age": 40, "childs": [ { "name": "Justin", "
Thumbnail
JSON 全名 JavaScript Object Notation,其格式基本上就是key: value的組成如下: { "name": "Bob", "age": 40, "childs": [ { "name": "Justin", "
Thumbnail
學習程式設計不再困難!本文提供一份循序漸進的 JavaScript 教學,每天只需 10 分鐘,就能從基礎語法到專案實作,逐步學習網頁開發,包含 HTML、CSS、JavaScript、DOM 操作、Canvas 等,並以 Road Map 呈現學習進度。即使零基礎也能輕鬆入門,開啟程式設計之路。
Thumbnail
學習程式設計不再困難!本文提供一份循序漸進的 JavaScript 教學,每天只需 10 分鐘,就能從基礎語法到專案實作,逐步學習網頁開發,包含 HTML、CSS、JavaScript、DOM 操作、Canvas 等,並以 Road Map 呈現學習進度。即使零基礎也能輕鬆入門,開啟程式設計之路。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News