如何避免 Closure 在迴圈中不如預期 ?

Closure 最常踩到的雷就是當 Closure 在使用 var 設定 counter 的 for loop 當中使用，一不小心就會出乎我們的預期。

Version

ECMAScript 5

ECMAScript 2015

Closure in Loop

const func = () => {
  let result = [];

  for(var i = 0; i < 3; i++) {
    result.push(() => i);
  }

  return result;
};

console.log(func()[0]());
console.log(func()[1]());
console.log(func()[2]());

原本我們預期 i 為定義時的 i ，而非執行完時的 i ，所以應該印出 0 、 1 與 2 ，但卻都全部印出 3 。

原因在於我們只是將 () => i 放進 array 中並未執行，然後將整個 array 回傳。

當 [0]() 對 array 中的 () => i 執行時，由於本身的 scope object 找不到 i ，因此會透過 outer property 找到 func() 的 scope object 的 i ，此時 var i 已經執行完為 3 ，因此 3 個 function 的 i 都會得到 3 。

IIFE

const func = () => {
  let result = [];

  for(var i = 0; i < 3; i++) {
    (i => {
      result.push(() => i);
    })(i);
  }

  return result;
};

console.log(func()[0]());
console.log(func()[1]());
console.log(func()[2]());

剛剛寫法最大的問題在於 () => i 的 scope object 本身沒有 i ，在 for loop 中的 () => i 共用了相同的 scope object，在 ECMAScript 5 可以使用 IIFE 為每個 () => i 建立新的 scope object。

Let

const func = () => {
  let result = [];

  for(let i = 0; i < 3; i++) {
    result.push(() => i);
  }

  return result;
};

console.log(func()[0]());
console.log(func()[1]());
console.log(func()[2]());

若使用 ECMAScript 2015，就有更直覺的寫法了，因為 let 使每個 {} 都有自己的 scope object，因此等同於使用 ECMAScript 5 的 IIFE。

Array.prototype.map

const func = () => [0, 1, 2].map(i => () => i);

console.log(func()[0]());
console.log(func()[1]());
console.log(func()[2]());

若使用 Array.prototype 下的 method 使用 Closure 也沒有問題，因為每個 () => i 都有新的 scope object， 所以 i 都是定義時的 i ，而非執行完後的 i 。

Conclusion

• 若要在 for loop 中使用 Closure，建議改用 ECMAScript 2015 的 let
• 改用 Array.prototype 下的 method 也能避免 Closure 抓到執行完後的變數