JavaScript Iterables

In JavaScript, an iterable is any object that implements the iterable protocol, meaning it has a Symbol.iterator method. This allows it to be used in loops like for...of, spread syntax (...), and Array.from().

1️⃣ What is an Iterable?

An iterable is an object that can be iterated over using a for...of loop. Examples of built-in iterables include:
✔️ Arrays
✔️ Strings
✔️ Maps
✔️ Sets
✔️ TypedArrays
✔️ Arguments Object
✔️ NodeLists

2️⃣ Using for...of Loop with Iterables

The for...of loop works on iterables by calling their Symbol.iterator method.

let arr = [10, 20, 30];

for (let num of arr) {
    console.log(num);
}
// Output:
// 10
// 20
// 30

3️⃣ Built-in Iterables

🔹 Strings are Iterables

let str = "Hello";

for (let char of str) {
    console.log(char);
}
// Output:
// H
// e
// l
// l
// o

🔹 Arrays are Iterables

let numbers = [1, 2, 3];

for (let num of numbers) {
    console.log(num);
}
// Output:
// 1
// 2
// 3

🔹 Sets are Iterables

let uniqueNumbers = new Set([10, 20, 30]);

for (let num of uniqueNumbers) {
    console.log(num);
}
// Output:
// 10
// 20
// 30

🔹 Maps are Iterables

let userMap = new Map([
    ["name", "John"],
    ["age", 30]
]);

for (let [key, value] of userMap) {
    console.log(`${key}: ${value}`);
}
// Output:
// name: John
// age: 30

4️⃣ The Spread Operator (...) with Iterables

The spread operator works on iterables to expand their contents.

let str = "JavaScript";
let letters = [...str];
console.log(letters); 
// Output: ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

let set = new Set([1, 2, 3]);
let arr = [...set];
console.log(arr);
// Output: [1, 2, 3]

5️⃣ Array.from() with Iterables

The Array.from() method can convert iterables into arrays.

let str = "Code";
let arr = Array.from(str);
console.log(arr);
// Output: ['C', 'o', 'd', 'e']

6️⃣ Creating a Custom Iterable

We can create a custom iterable by implementing the [Symbol.iterator]() method.

let range = {
    start: 1,
    end: 5,
    [Symbol.iterator]() {
        let current = this.start;
        let last = this.end;
        return {
            next() {
                if (current <= last) {
                    return { value: current++, done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

for (let num of range) {
    console.log(num);
}
// Output:
// 1
// 2
// 3
// 4
// 5

7️⃣ Generators as Iterables

Instead of manually creating an iterator, we can use generators (function*).

function* numberGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

let numbers = numberGenerator();

for (let num of numbers) {
    console.log(num);
}
// Output:
// 1
// 2
// 3

8️⃣ Checking if an Object is Iterable

To check if an object is iterable, we check if it has [Symbol.iterator].

let obj = {};

console.log(typeof obj[Symbol.iterator]); // undefined (not iterable)
console.log(typeof [1, 2, 3][Symbol.iterator]); // function (iterable)

🎯 Summary

✔ Iterables are objects that implement [Symbol.iterator]()
✔ for...of loop works on iterables
✔ Built-in iterables include Arrays, Strings, Maps, and Sets
✔ Spread operator (...) and Array.from() work with iterables
✔ Custom iterables can be created using [Symbol.iterator]()
✔ Generators (function*) provide an easier way to create iterators

🚀 Now you understand JavaScript iterables! Let me know if you need more examples. 😊