---
title: JavaScipt Variable
description:
tags: javascript
lang: zh-tw
robots: noindex, nofollow
---
{%hackmd BkVfcTxlQ %}
# 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.

:warning: 關於資料型態的一些注意事項
- 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` )

:::danger
**Important Tips**
- 要注意任何變數使用JSON格式儲存會變成 `string`
- undefined、null 以JSON格式儲存都會變成 `string` 的 undefined、null
:::

# Type Conversion
[Type Conversion](https://www.w3schools.com/js/js_type_conversion.asp "W3School")
- 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
<br/><br/>

# 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)
<br/>

Relate Articles
- [JavaScript Variable Scopes](https://www.javascripttutorial.net/javascript-variable-scope/ "JavaScript Variable Scopes")

## Strict Mode
[Strict Mode](https://www.w3schools.com/js/js_strict.asp "W3School")
- 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。
- 只支援比較新的瀏覽器版本。
<br/><br/>

# this Keyword

[this Keyword](https://www.w3schools.com/js/js_this.asp "W3School")
- 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](https://www.javascripttutorial.net/javascript-execution-context/ "JavaScript Tutorial")

# Hoisting
> [Definition](https://www.w3schools.com/js/js_hoisting.asp "W3School"): 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)
<br/><br/>

---
## References