---
# System prepended metadata

title: DAY20- JavaScript 19. (重要) 變數記憶體指向講解
tags: ['Re:0 前端工程師之路 - JavaScript 字串 篇章']

---

# 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 = "user123@gmail.com";

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



// 錯誤的格式:

let fakerEmailData = "  user123@gmail.com  ";


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

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

```
// 錯誤的格式:
let fakerEmailData = "  user123@gmail.com  ";

// 企圖中間修改資料:

fakerEmailData.trim();

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

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



```
let fakerEmailData = "  user123@gmail.com  ";

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

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

// 17
```



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