> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/grammar/statement/loop/for/of/live-array.md).

# arrays are iterated "live"❗️

[JS](/web/js.md)⟩ [syntax](broken://pages/-MkkESuTtsNsTLnJJJUC) ⟩ [for loops](/web/js/grammar/statement/loop/for.md) ⟩ [for-of](/web/js/grammar/statement/loop/for/of.md) ⟩ arrays are iterated "live"❗️

{% hint style="success" %}
changes made during the iteration may affect the outcome of the iteration.
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}

* replit： [arrays are iterated live](https://replit.com/@pegasusroe/arrays-are-iterated-live#index.js)   (require： Number extension)

```javascript
const _Number = require('./ext/Number_ext');    // for `num.isEven`

let [arr1, arr2, arr3] = [
    [1, 2, 3],
    [1, 2, 3],
    [1, 2, 3],
];

let [count1, count2, count3] = [0, 0, 0];

// ---------------------------------
// ⭐ arrays are iterated "live"❗
// ---------------------------------

// ⭐ 1. append elements
for (const value of arr1) {
    log(value);                              // 1,1,1,1,2,3❗
    if (count1 < 3) arr1.unshift(count1);    // ⭐ prepend element
    count1++;
}
// ┌─── next
// 1, 2, 3
//    ┌─── next
// 0, 1, 2, 3
//       ┌─── next
// 1, 0, 1, 2, 3
//          ┌─── next
// 2, 1, 0, 1, 2, 3
//             ┌─── next
// 2, 1, 0, 1, 2, 3
//                ┌─── next
// 2, 1, 0, 1, 2, 3
arr1,    // [ 2, 1, 0, 1, 2, 3 ]❗

// ⭐ 2. prepend/append
for (const value of arr2) {
    log(value);                     // 1,1,2,2,3,1❗
    if (count2 < 3) count2.isEven
        ? arr2.unshift(count2)      // ⭐ prepend new element
        : arr2.push(count2);        // ⭐ append new element
    count2++;
}
// ┌─── next
// 1, 2, 3
//    ┌─── next
// 0, 1, 2, 3
//       ┌─── next
// 0, 1, 2, 3, 1
//          ┌─── next
// 2, 0, 1, 2, 3, 1
//             ┌─── next
// 2, 0, 1, 2, 3, 1
//                ┌─── next        // iteration ended
// 2, 0, 1, 2, 3, 1
arr2,    // [ 2, 0, 1, 2, 3, 1 ]❗

// ⭐ 3. shift (remove first) element
for (const value of arr3) {
    log(`value = ${value}`);       // 1,3❗
    if (count3 < 3) log(`shifted value: ${arr3.shift()}`);    // ⭐ remove first element
    count3++;
}
// ┌─── next
// 1, 2, 3                         // iteration started (1 will be removed)
//    ┌─── next                    
// 2, 3                            // iteration ended (2 will be removed)
// 3,                              // (2 removed)  
arr3,    // [ 3 ]❗
```

{% endtab %}

{% tab title="👥" %}

* [iterable](/web/js/iteration/iterable.md)
* [for-in](/web/js/grammar/statement/loop/for/in.md)
* ["pure" object](/web/js/val/obj/create/object.create/pure-object.md) is an object without [**prototype**](/web/js/val/obj/proto.md).
* [arr.entries](/web/js/val/builtin/arr/method/arr.entries.md)
  {% endtab %}

{% tab title="📗" %}

* [ ] JS.info ⟩ prototypal inheritance ⟩ [for...in](https://javascript.info/prototype-inheritance#for-in-loop) \
  iterates over (**enumerable**) <mark style="color:orange;">**properties**</mark> (<mark style="color:orange;">**inherited**</mark> properties **included**)
* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ 5.4.4 for/of loop
* [ ] [談談 JavaScript 中 for ... in](https://pjchender.blogspot.com/2016/06/javascript-for-in-function.html)
* [ ] [for...in 與 for...of 的差別](https://kanboo.github.io/2018/01/30/JS-for-of-forin/)
* [ ] [JavaScript 之旅 (4)：Object.keys() & Object.values() & Object.entries()](https://titangene.github.io/article/javascript-object-keys-values-entries.html) ⭐️&#x20;
* [ ] [JavaScript traits: the clean way to modify global prototypes](https://itnext.io/straits-9ef2b9a563cd)
  {% endtab %}

{% tab title="📘" %}

* [ ] [for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
* [ ] [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) ⟩
  * [Object.keys()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
  * [Object.values()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
  * [Object.entries()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
* [ ] Object.prototype ⟩
  * [.hasOwnProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)
* [ ] &#x20;["in" operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in)
  {% endtab %}
  {% endtabs %}