[JavaScript]Map 與 forEach的差異:數據不變性

[JavaScript]Map 與 forEach的差異:數據不變性

[JavaScript]Map 與 forEach 的差異- 前言

Map和foreahc是JS中遍歷數組(Array)中很方便也很常用的方法，用法跟參數上兩者幾乎一模一樣，同時上網查詢Map 與 forEach的差異時，提到了數據的不變性原則(immutability)，大部分文章都提到以下的說法，「map不改變原數組 vs foreach會改變原數組」，文章都會特別是在是否改變原始數據上。但我個人感到奇怪因此這篇文章將探討 Map 與 forEach 的差異，並說明兩者原始數據不變性的差異

圖片來源:https://chloelin.coderbridge.io/2022/01/06/js-foreach-map-differ/

1. Map 函數的用法

Map 函數的一個關鍵特點是它不推薦直接修改原始數據。因此它返回一個新的數據結構，從而保持了原始數據的不可變性。這種做法有助於代碼的可讀性和理解，同時減少了副作用的風險。

let arr = [1, 2, 3, 4];
//map((value,index,array),*thisArg) 
let newArr = arr.map(x => x * 2);
// 現在 newArr = [2, 4, 6, 8]，但 arr 仍然是 [1, 2, 3, 4]

2. Foreach 函數的用法

與 Map 不同，forEach 函數主要用於遍歷集合中的每個元素並對其進行操作。這個函數沒有返回值，因此如果要針對數據進行操作通常會直接在原始數據上進行操作。

let arr = [1, 2, 3, 4];
//不直接操作元素
let newArr = arr.forEach((x => x * 2));
//這時候arr還是[1,2,3,4],newArr是undefined
-------------------------------
//直接操作原始Array的元素
arr.forEach((element, index, array) => {
  array[index] = element * 2;
});
// 現在 arr = [2, 4, 6, 8]

3 矛盾結論

問題來了，由於map函數一樣可以採用array[index] = element * 2;的方式操作原數組，因此不能直接說「map函數不會改變原數組，foreach會改變原數組」，MDN文檔提到「變與不變」說明的是操作的核心概念。

個人理解是Map相較於Foreach方法設計了返回值，是基於不變性原則的概念進行設計德

4 更多教學