# DAY20- JavaScript 19. (重要) 變數記憶體指向講解

- 字串型別，章節 6.

### value 資料指向的重要性

- 在撰寫 JavaScript 的時候，宣告變數以及執行過程，
我們時常會出現一些，預期外的錯誤。

### 以 length 範例為例:

- 我們希望，console 可以直接帶出該變數的長度

let str = "123";

str.length;

// 上面撰寫了 length 撈取資料長度語法
console.log(str);


// 結果: 123
這邊卻不是顯示 3 

### 誤以為在 code to code 之間撰寫可以修改它，但實際上不可

- 這是在 JavaScript 中，資料的不可變性 **immutable**

被改變過的資料，需要去用**新的變數**來繼承。
以`避免資料處理上的互相衝突`。也是 **function programming** 的特色

- 正確的作法如下:

let str = "123";

// 撰寫新變數，繼承原有變數，且綁定他後續要執行的行為
let newStr = str.length;

// 讓新變數來產生舊變數執行修改後的結果:

console.log(newStr);

// 結果: 3 ✔️

---

### 範例. 以 trim() 為例:

- 會員要辦理註冊功能時，我們常常會需要輸入 EMail，不過也常常會有使用者在輸入上，犯錯而產生錯誤:

- 以下列資料為範例:

// 正確的格式
let emailData = "[e-mail]";

console.log(emailData.length);
// 17



// 錯誤的格式:

let fakerEmailData = "  [e-mail]  ";


console.log(fakerEmailData.length);
// 21

### 設定 trim()，自動消除空白處 - FAIL:

// 錯誤的格式:
let fakerEmailData = "  [e-mail]  ";

// 企圖中間修改資料:

fakerEmailData.trim();

console.log(fakerEmailData.length);
// 資料顯示:21，並沒有如預期修剪空白處
// 預期正確格式應該是: 16

### ### 設定 trim()，自動消除空白處 - successful:

let fakerEmailData = "  [e-mail]  ";

// 宣告新變數，繼承錯誤資料並賦予值修改資料:

let newData = fakerEmailData.trim();
console.log(newData.length);

// 17

###### tags: `Re:0 前端工程師之路 - JavaScript 字串 篇章`