Variables

Terms

• Declaration
• Assignment
• Intialization

Variable Lifetime

• Global variables live until the page is discarded.

Data Types

dynamic types

Primitive Data Types

A simple data value without properties and methods.

• string
• number
• boolean
• undefined

Complex Data Types

• function
• object
• ,etc.

關於資料型態的一些注意事項

• All JavaScript data types have a valueOf() and a toString() method.

Number

• All numbers in JavaScript are stored as 64-bits Floating point numbers (Floats).
  ​​​​// W3School example:
  ​​​​
  ​​​​let x = 0.1, y = 0.2;
  ​​​​let z = x + y;        // the result in z will not be 0.3
  ​​​​
  ​​​​let ok = (x * 10 + y * 10) / 10;    // ok will be 0.3
  

Object

• Property, Method
• 常用 const
• 不要使用 new 來創建 Number, String, Boolean objects
• destructor
  

undefined & null

• objects, variables, properties, and methods can be undefined;
• In addition, empty objects can have the value null.
• 如何測試一個存在的物件不是null?
  (typeof notNullObj !== "undefined" && notNullObj !== null)
  • === "undefined" 物件存在會回傳true
  • === null 若物件存在且有值才會回傳true
• null 是一個特製物件，代表空值

undefined vs. null vs. empty string

• undefined 是無定義型態的變數
• null 是沒有內容的 物件 ( typeof object )
• empty string 是沒有內容的 字串 ( typeof string )

Important Tips

• 要注意任何變數使用JSON格式儲存會變成 string
• undefined、null 以JSON格式儲存都會變成 string 的 undefined、null

Type Conversion

Type Conversion

• use a function
• Automatic Type Conversion (JS自動轉換)

use Functions

• Converting to Strings

  • String()
  • .toString()

• Converting to Numbers

  • from String: Number(), +
  • from Date: Number(), getTime(), getDate(), getDay() , etc.
    ​​​​// Number() Method
    ​​​​Number("3.1415926")    // legal string-type numbers => 3.1415926
    ​​​​Number("")             // empty string => 0
    
    ​​​​// Unary + Operator
    ​​​​typeof (x= +"5")               // x is number type and has value 5
    ​​​​typeof (x= +"")                // x is number type and has value 0
    ​​​​typeof (x= +"GiveMeNumber")    // x is number type but has NaN
    ​​​​
    

Automatic Conversion

• Truthy values
• Falthy value
  • false
  • 0, -0 (* 0 === -0)
  • NaN
  • ""
  • null
  • undefined
    
    
    

Scopes

accessibility, visibility

Types of Scopes

• Global Scope
  • Global variables
  • A variable automatically becomes global anywhere if has not been declared but is assined the value.
• Function Scope (Local Scope)
  • Local variables: variables declared within function scope.
• Block Scope (ES6)
  
  

Relate Articles

• JavaScript Variable Scopes

Strict Mode

Strict Mode

• In "Strict Mode", undeclared variables are not automatically global.
• Add "use strict"; to the beginning of a script (global scope) or a function (function scope).

Pros & Cons

• 可避免不小心打錯變數名稱，而創造了一個新的全域變數；
• 可避免以下這些assignments: Any assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object.
• function 裡面的 this
  1. 非 Strict Mode的情況: this 指的是window object；
  2. Strict Mode: this 沒有指明特定物件，就會回傳 undefined。
• 只支援比較新的瀏覽器版本。
  
  
  

this Keyword

this Keyword

• function的this會指向呼叫這個function的物件
• 改變this的指向: apply(), bind(), call()
• 要注意 this 也有 precedence
  • bind() > apply(), call() > object method > global scope
• arrow function
  • 會根據函式在哪裡被建立的來決定
  • 通常指的是 window object
  • 箭頭函式沒有bind()，且其appli()、call()傳入的this自動被忽略。
  ​​​​// obj.func 是在global context被建立的
  ​​​​var tmp = 'a';
  ​​​​var obj = {
  ​​​​    tmp: 'b';
  ​​​​    func: ()=> console.log(this.tmp);
  ​​​​}
  ​​​​console.log(tmp); // a
  ​​​​obj.func();       // a
  

used in	this refers to
(alone use)	global object
object	this object
event	the element received the event
call(), apply(), bind()	calling/binding object
(regular) function	the object that called the function
(regular) function	undefined (Strict Mode)
arrow function	always the object that defined the arrow function

Execution Context

JavaScript Execution Context

Hoisting

Definition: JavaScript's default behavior of moving all declarations to the top of the current scope.

• i.e., Every variable can be used before its declaration.
• 要注意 Hoisting 只發生在declarations，不會作用於Intializations
  • 因此，let, const 變數在還沒初始化以前不能使用。(ES6)
    
    
    

---

References