TIL coding
  • Initial page
  • 排版
  • Flexbox
  • Grid
  • jQuery
  • Untitled
  • JavaScript
    • An Introduction to JavaScript
    • Hello, world!
    • Code structure
    • The modern mode, "use strict"
    • Variables
    • Data types
    • Type Conversions
    • Operators
    • Comparisons
    • Interaction: alert, prompt, confirm
    • Conditional operators: if, '?'
    • Logical operators
    • Loops: while and for
    • The "switch" statement
    • Functions
    • Function expressions and arrows
    • JavaScript specials
    • Comments
    • Ninja code
    • Automated testing with mocha
    • Polyfills
    • Objects
    • Garbage collection
    • Symbol type
    • Object methods, "this"
    • Object to primitive conversion
    • Constructor, operator "new"
    • Methods of primitives
    • Numbers
    • Strings
    • Arrays
    • Array methods
    • Iterables
    • Map, Set, WeakMap and WeakSet
    • Object.keys, values, entries
    • Destructuring assignment
    • Date and time
    • JSON methods, toJSON
    • Recursion and stack
    • Rest parameters and spread operator
    • Closure
    • The old "var"
    • Global object
    • Function object, NFE
    • The "new Function" syntax
    • Scheduling: setTimeout and setInterval
    • Decorators and forwarding, call/apply
    • Function binding
    • Currying and partials
    • Arrow functions revisited
    • Property flags and descriptors
    • Property getters and setters
    • Prototypal inheritance
    • F.prototype
    • Native prototypes
    • Prototype methods, objects without __proto__
    • The “class” syntax
    • Class inheritance
    • Static properties and methods
    • Private and protected properties and methods
    • Extending built-in classes
    • Class checking: "instanceof"
    • Mixins
    • Error handling, "try..catch"
    • Custom errors, extending Error
    • Introduction: callbacks
    • Promise
    • Promises chaining
    • Error handling with promises
    • Promise API
  • Bootstrap
    • Navbar
Powered by GitBook
On this page
  • A variable
  • A real-life analogy
  • Variable naming
  • Constants
  • Name things right

Was this helpful?

  1. JavaScript

Variables

大多時候應用 JavaScript 需要資料,像是購物網站需要被售出的貨物、購物車、付款;聊天室需要使用者、訊息、圖片等等,變數就是用來儲存需要的資料。

A variable

變數是用來儲存資料的。

宣告變數

let message;

儲存資料

message = 'Hello'; // store the string

同時宣告並儲存

let message = 'Hello!'; // define the variable and assign the value

alert(message); // Hello!

同時宣告多個變數

let user = 'John', age = 25, message = 'Hello';

let user = 'John'; // seperate define
let age = 25;
let message = 'Hello';

let user = 'John', // another style
  age = 25,
  message = 'Hello';
  
let user = 'John' // comma first
  , age = 25
  , message = 'Hello';

A real-life analogy

把變數想像成箱子,裡面可以放資料,可以丟掉舊資料,放新的資料。

let message;

message = 'Hello!';

message = 'World!'; // value changed

alert(message);

不同箱子可以放一樣的資料。

let hello = 'Hello world!';

let message;

// copy 'Hello world' from hello into message
message = hello;

// now two variables hold the same data
alert(hello); // Hello world!
alert(message); // Hello world!

Variable naming

命名變數有幾項限制:

  • 變數名稱只能用字母、數字、$、_

  • 第一個字不能是數字

  • 有分大小寫

  • 可以用其他語言,但不推薦,因為可能有其他國家的人要閱讀。

在以前可以不用宣告就使用變數,用 "use strict" 則無法。

// note: no "use strict" in this example

num = 5; // the variable "num" is created if it didn't exist

alert(num); // 5
"use strict";

num = 5; // error: num is not defined

Constants

宣告值不變的變數用const。

用const儲存很難記的資料,使用大寫跟 _ 命名,這樣的好處是比較好記、不會打錯、有意義。

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...when we need to pick a color
let color = COLOR_ORANGE;
alert(color); // #FF7F00

用大寫命名的時機:在執行前需要的變數,有些變數是在計算時才出現,就不需要用大寫。

Name things right

變數名稱要乾淨、有意義、描述儲存的值,從命名變數可以區別是新手或老手,好的變數名稱比較好維護。命名變數有以下規則:

  • 用普通人讀得懂的名稱

  • 不要用過短的縮寫像是 a、b、c

  • 盡量描述並且有意義,不好的名稱像 data、value

  • 團隊統一特定的變數名稱,像 user vs visitor vs manintown。

有一些懶惰的工程師會重複使用變數,但這會造成不知道變數裡存放的資料是什麼,不一樣的東西丟進一樣的箱子,這會需要更長時間 debug,現在有打包工具可以簡化 JavaScript,所以不需要擔心新增新的變數會造成效能問題。

PreviousThe modern mode, "use strict"NextData types

Last updated 5 years ago

Was this helpful?

有 programming languages,像是 or ,一旦變數儲存資料就無法改變,要裝別的資料要重新命名變數 ( 新的箱子 )。

有多個單字通常使用 命名

有幾個名稱 已經被使用,無法作為變數。

functional
Scala
Erlan
camelCase
list of reserved words