# DAY40 - JavaScript 78. 陣列數字相加、變數作用區域講解

### 陣列數字加減 - forEach()

- 以 forEach() 來加總陣列內的數字
根據程式碼內容，瀏覽各種結果:

- 陣列資料裡頭有 5,10 兩個數字，我們的目標是加總他們:

### data (全域)

let data = [5, 10];
// 設定儲存加總變數

let total = 0;

data.forEach(function (num, list) {
  total += num;
  console.log(total);
  // 5 forEach 第一次執行，外部變數紀錄:5;
  // 15 forEach 第二次執行，外部變數紀錄:5+10 = 15;
});


顯示結果:
// 5
// 15

### 結果為何這樣顯示:

- 由於在 forEach 執行，**陣列的數字會全部執行一次
這是由上至下去列印**，且 `total` 是寫在 function 外面
即是「全域變數」。

第一次執行，外部 total 紀錄:5
第二次執行，外部 total 紀錄:10+5 = 15

### 如何直接獲得總數而不是重複列印?

- 將 console print 結果直接列印在外面。

let data = [5, 10];
// 設定儲存加總變數

let total = 0;

data.forEach(function (num, list) {
  total += num;
  // 5 forEach 第一次執行，外部變數紀錄:5;
  // 15 forEach 第二次執行，外部變數紀錄:5+10 = 15;
});

console.log(total);

// 顯示結果: 15

---

### data(區域)

- 假如 data 今天是宣告在 function 內
會如何列印出結果?

- 以下列程式碼來說，成功加總會獲得:30
以結果來看，卻不是如此的。

let data = [5, 10, 15]; // 30

data.forEach(function (num, list) {
  let total = 0;
  total += num;
  console.log(total);
});

console(total);

// 5
// 10
// 15

// 顯示失敗

### 探討結果:

- 1. 在 forEach 內執行的陣列數值不是相加
因為在執行過程，它會全部執行一次，每執行一次，
會更新裡頭的 `total`
不像上一個範例， total 會記錄在外部變數(保存)
再去累積。**故這邊執行一次，就是刷新一筆數值**。

---

- 2. 為何會顯示: 失敗的結果? 由於 total 變數是宣告在函式內
變數若為區域變數，當下執行掉後，即會消失
這也是為何數值無法被累加的原因。

這時候，你若把 console 拉到外部去運行，
它是不可能撈到已經失去掉的變數。

// 這就是全域變數與區域變數的 差別。

###### tags: `Re:0 前端工程師之路 - JavaScript - 陣列/forEach 篇章`