How do you make an object iterable in javascript

1const collection = {
2
3one: 1,
4
5two: 2,
6
7three: 3,
8[Symbol.iterator]() {
9  const values = Object.keys(this);
10  let i = 0;
11  return {
12  next: () => {
13  return {
14  value: this[values[i++]],
15  done: i > values.length,
16  };
17  },
18  };
19},
20};
21
22const iterator = collection[Symbol.iterator]();
23
24console.log(iterator.next()); // → {value: 1, done: false}
25
26console.log(iterator.next()); // → {value: 2, done: false}
27
28console.log(iterator.next()); // → {value: 3, done: false}
29
30console.log(iterator.next()); // → {value: undefined, done: true}

1const collection = {
2
3one: 1,
4
5two: 2,
6
7three: 3,
8[Symbol.iterator]: function* () {
9  for (let key in this) {
10  yield this[key];
11  }
12},
13};
14
15const iterator = collection[Symbol.iterator]();
16
17console.log(iterator.next()); // {value: 1, done: false}
18
19console.log(iterator.next()); // {value: 2, done: false}
20
21console.log(iterator.next()); // {value: 3, done: false}
22
23console.log(iterator.next()); // {value: undefined, done: true}