🔁for-of

`for ( const value of iterable)` syntax. 🚧 -> TypeError

JS⟩ syntax ⟩ for loops ⟩ for-of

⭐️ ES6 (2015)

for (const value of iterable) {}      // loop over "values"
for (lvalue of iterable) {}           // lvalue can be used
for (const [key, value] of aMap) {}   // iterate over a Map.

🧨

(by default) object is not iterable❗

let obj = { x: 1, y: 2, z: 3 };
for (let value of obj) { }                 // TypeError

// workarounds
for (let key of Object.keys(obj) { ... }
for (let key in obj) { ... }                // for-in
for (let value of Object.values(obj) { ... }
for (let [key, value] of Object.entries(obj) { ... }

👉 for-in vs. for-of vs. in

arrays are iterated "live"❗️

⭐️

const

• can be used with for-in / for-of loop.

• can't be used with a classic for-loop.

👉 no const for classic "for"❗

⭐️ 注意： for-in, for-of 有 "(...)" 括號❗️

for (let key   in object) {}    // loop over "keys"
for (let value of object) {}    // loop over "values"
//  ^                   ^       // ⭐️ ( ... )

👉 Property flags and descriptors - “flags-aware” clone٭

• Reflect.ownKeys() ≈ .getOwnPropertyNames() + .getOwnPropertySymbols()

• obj.hasOwnProperty() ≈ Object.getOwnPropertyNames()

• Object.entries() ≈ Object.keys() + Object.values()

• ≈ ：代表「範圍一樣」

🔴

• for-of with objects

• for-in vs. for-of vs. in

• for-of vs. forEach

• arrays are iterated "live"❗️

🗺️

✅：string / symbol | ❌：not available | 🔤：String | 🔺：Symbol

method/operator	own enum	own nonenum	inherited enum	inherited nonenum
.assign()	✅	❌	❌	❌
Object spread	✅	❌	❌	❌
.keys(), .values(), .entries()	🔤	❌	❌	❌
.getOwnPropertyNames()	🔤	🔤	❌	❌
.getOwnPropertySymbols()	🔺	🔺	❌	❌
.getOwnPropertyDescriptors()	✅	✅	❌	❌
Reflect.ownKeys()	✅	✅	❌	❌
for-in (loop over keys)	🔤	❌	🔤	❌
for-of (loop over values)	🔤	❌	🔤	❌

👉 property enumeration (📘 MSN )

👥

• iterable

• for-in / for-in vs. for-of vs. in

• lvalue can be used to receive the iteration value of a for-of loop.

• "pure" object is an object without prototype.

• arr.entries

📗

• JS.info ⟩ prototypal inheritance ⟩ for...in iterates over (enumerable) properties (inherited properties included)

• JavaScript: The Definitive Guide ⟩ 5.4.4 for/of loop

• 談談 JavaScript 中 for ... in

• for...in 與 for...of 的差別

• JavaScript 之旅 (4)：Object.keys() & Object.values() & Object.entries() ⭐️

• JavaScript traits: the clean way to modify global prototypes

📘

• for...of

• Object ⟩

  • Object.keys()

  • Object.values()

  • Object.entries()

• Object.prototype ⟩

  • .hasOwnProperty()

• "in" operator

🚧

• for (let value of obj) { }        // TypeError