[ JavaScript 筆記] 變數 Variable & 值 Value 與他們的命名方式

更新於 發佈於 閱讀時間約 3 分鐘
前言:
雖然前面有些定義還沒有完整的解釋,但還是後面再說吧,
誰想一直看理論啊(摔本子)

變數 Variable & 值 Value

變數就像一個寫上標籤的盒子,值就是要放入盒子的東西。
JS 會將變數存在記憶體中,以便未來取用。

宣告變數與賦值

我們告訴 JS 我們需要一個盒子,並且寫上標籤,這個動作就是宣告變數,
盒子裡面放入值,就是賦值(assign):

const a = 15;
// 宣告時,最前面寫 關鍵字,後方接 變數名稱
// 如果有預設值,可以在宣告時直接賦予

這裡用 const 這個關鍵字告訴 JS 我要宣告一個叫做 a 的常數,值是 15,
未來需要使用 a 來做計算時,就可以取用。
反之,如果沒有宣告,它會不知道我們要幹嘛:

a = 15;
// 得到報錯訊息:Uncaught ReferenceError: a is not defined​
// 代表 ​a 沒有被定義

let / const / var 三種常見關鍵字,其中一種最好不要用

上面例子中使用了 const 來宣告,但 JS 還有另外兩種常見關鍵字:let、var。

const - 宣告不可變動之常數
用 const 宣告時,就不能重新賦值 or 重新宣告

const myName = "asdf";
myName = "qwer"; // 重新​賦值時會報錯
const myName = "qwer​"; // 重新宣告也會報錯
// TypeError: Assignment to constant variable

let - 宣告可變動之變數
反之,用 let 宣告時,就能重新賦值,但一樣不能重新宣告

let kingOfThePirates = "MonkeyDLuffy";
kingOfThePirates = "Luffy"; // 重新​賦值沒問題

let kingOfThePirates = "Luffy​"; // 無法重新宣告區塊範圍變數

var - 宣告可變動之變數
跟 let 很像,可以重新賦值,不同的是 var 可以重新宣告
乍看下來很像沒什麼,但如果今天是一個幾萬行的程式碼,
如果用 var 宣告了一個 a 變數,某一天再用 var 宣告一次 a,
這時候程式碼裡的 a 變數就被污染了,
因為不確定這一行取用的 a 到底是哪一次宣告的。

var examRange = "chapter12";
examRange = "chapter13"; // 重新​賦值沒問題
var examRange = "chapter1";; // 重新宣告不會報錯 但是會造成問題

所以 var 最好不要用,不然除錯的時候會很想揍自己。

現在這三個關鍵字先這樣記就好,等到解釋作用域的時候再完整說明一次。

變數名稱與他們的命名方式

變數命名有些習慣要遵守⭐️

  • 不可使用 JS 保留字 JavaScript Reserved Words
  • 不可使用數字開頭
  • 不可使用烤肉串命名法 ex. my-name
  • 使用駝峰命名法 ex. myName
  • 大小寫視為不同變數
  • 特別使用場景下,可使用特殊符號 $ 及 _ 開頭

預告:接下來講資料型態 data type(給自己的備忘)
avatar-img
5會員
14內容數
本來是理科生,在被物理放棄之後成為了文科生,有時理性思考,偶爾卻會脫口出感性的字句;喜歡打字的聲音,以生活為靈感寫下過去、現在與未來。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
碎碎念 的其他內容
前言: 前一篇講了 JS 的定義,這裡來談談能用它來做什麼, 希望能限制在 500 字以內(這是我看文章的極限,超過字數就會開始分心(?))
前言: 一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。 結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。
使用 React 做出一個便條紙的頁面,可以紀錄自己的想法後丟上去。並且讓使用者即使重新整理頁面,也不會遺失資料。
C2 開始終於使用到 visual studio code, 這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構, 每天都在 coding,每週都在追進度, 用壓縮到極致的時間寫完作業, 但跟著課程內容寫程式碼,真的有學到嗎? 有,吧。 畢竟在寫最後的電影清單
這次的 Frontend Mentor challenge 是新手村最後一個挑戰 ▶ Intro component with sign up form 網頁,使用 jQuery validation plugin。
開始接觸網頁開發後,發現自己缺乏實作經驗, 於是老師推了 Frontend Mentor challenge , 免費的通常是獨立頁面,花錢則是可以挑戰多頁式網站, 初學還沒學到 javascript 或 API 也沒關係, 新手也有提供 HTML/CSS 的練習。 很適合用來增加自己寫網頁的經驗,
前言: 前一篇講了 JS 的定義,這裡來談談能用它來做什麼, 希望能限制在 500 字以內(這是我看文章的極限,超過字數就會開始分心(?))
前言: 一直想要把自己的學習筆記整理整理,至少在寫下筆記的時候,也能釐清觀念。 結果拖延到現在,終於要提筆了,不知道能堅持多久(???)。
使用 React 做出一個便條紙的頁面,可以紀錄自己的想法後丟上去。並且讓使用者即使重新整理頁面,也不會遺失資料。
C2 開始終於使用到 visual studio code, 這個階段學到 JavaScript 核心概念、DOM 操作、API 串接、MVC 架構, 每天都在 coding,每週都在追進度, 用壓縮到極致的時間寫完作業, 但跟著課程內容寫程式碼,真的有學到嗎? 有,吧。 畢竟在寫最後的電影清單
這次的 Frontend Mentor challenge 是新手村最後一個挑戰 ▶ Intro component with sign up form 網頁,使用 jQuery validation plugin。
開始接觸網頁開發後,發現自己缺乏實作經驗, 於是老師推了 Frontend Mentor challenge , 免費的通常是獨立頁面,花錢則是可以挑戰多頁式網站, 初學還沒學到 javascript 或 API 也沒關係, 新手也有提供 HTML/CSS 的練習。 很適合用來增加自己寫網頁的經驗,
你可能也想看
Google News 追蹤
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇內容,將會講解什麼是變數,以及與變數相關的知識。包括變數、資料型態、變數賦值、變數的命名規則、變數的作用區域、變數的可重複性、內建變數。
就是指變數可以被訪問和使用的範圍,來說一下var、let和const的作用域差異。 var :function example() { console.log(x); // 輸出: undefined 因為變量提升造成的 var x = 5; } 函數作用域或全域作用域 可以重複宣告
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
Thumbnail
在本章節中,我們將學習JavaScript的基本語法,包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
※ 認識變數: 變數(variable)是在程式裡面把東西存起來的概念。 基於不讓電腦每次都需要重新運算,把需要花時間運算的東西先存起來,之後再直接拿出來使用,所以我們需要變數。 變數儲存的位置在電腦裡的記憶體。變數就像是一個箱子,記憶體就像是一個倉庫。箱子的名稱就是變數名稱,箱子的內容物就是
Thumbnail
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
Thumbnail
在 CSS 的開發過程中,重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性,就需要用到 CSS 變量了,CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法,以及它對撰寫 CSS 的影響。
Thumbnail
隨著理財資訊的普及,越來越多台灣人不再將資產侷限於台股,而是將視野拓展到國際市場。特別是美國市場,其豐富的理財選擇,讓不少人開始思考將資金配置於海外市場的可能性。 然而,要參與美國市場並不只是盲目跟隨標的這麼簡單,而是需要策略和方式,尤其對新手而言,除了選股以外還會遇到語言、開戶流程、Ap
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇內容,將會講解什麼是變數,以及與變數相關的知識。包括變數、資料型態、變數賦值、變數的命名規則、變數的作用區域、變數的可重複性、內建變數。
就是指變數可以被訪問和使用的範圍,來說一下var、let和const的作用域差異。 var :function example() { console.log(x); // 輸出: undefined 因為變量提升造成的 var x = 5; } 函數作用域或全域作用域 可以重複宣告
Thumbnail
了解這些運算子及其優先等級有助於更好地理解和編寫 JavaScript 代碼
Thumbnail
這些章節的目的是為了介紹JavaScript中的各種數據類型,包括基礎類型和物件類型,以及如何將數據從一種類型轉換為另一種類型。此外,還介紹了如何創建自定義類型,以及如何使用JavaScript中的陣列、集合和字典。
Thumbnail
在本章節中,我們將學習JavaScript的基本語法,包括如何註解代碼和如何聲明變數。瞭解這些基礎知識對於進一步學習和使用JavaScript來編寫代碼是非常重要的。
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
※ 認識變數: 變數(variable)是在程式裡面把東西存起來的概念。 基於不讓電腦每次都需要重新運算,把需要花時間運算的東西先存起來,之後再直接拿出來使用,所以我們需要變數。 變數儲存的位置在電腦裡的記憶體。變數就像是一個箱子,記憶體就像是一個倉庫。箱子的名稱就是變數名稱,箱子的內容物就是
Thumbnail
JS 資料型別分為兩大類,原始型別 (Primitive values) 和物件型別 (Objects)。
Thumbnail
在 CSS 的開發過程中,重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性,就需要用到 CSS 變量了,CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法,以及它對撰寫 CSS 的影響。