Iterators and Generators

  • 11.1 Don’t use iterators. Prefer JavaScript’s higher-order functions instead of loops like for-in or for-of. eslint: no-iterator no-restricted-syntax

    Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side effects.

    Use map() / every() / filter() / find() / findIndex() / reduce() / some() / … to iterate over arrays, and Object.keys() / Object.values() / Object.entries() to produce arrays so you can iterate over objects.

    1. const numbers = [1, 2, 3, 4, 5];
    3. // bad
    4. let sum = 0;
    5. for (let num of numbers) {
    6.   sum += num;
    7. }
    8. sum === 15;
    10. // good
    11. let sum = 0;
    12. numbers.forEach((num) => {
    13.   sum += num;
    14. });
    15. sum === 15;
    17. // best (use the functional force)
    18. const sum = numbers.reduce((total, num) => total + num, 0);
    19. sum === 15;
    21. // bad
    22. const increasedByOne = [];
    23. for (let i = 0; i < numbers.length; i++) {
    24.   increasedByOne.push(numbers[i] + 1);
    25. }
    27. // good
    28. const increasedByOne = [];
    29. numbers.forEach((num) => {
    30.   increasedByOne.push(num + 1);
    31. });
    33. // best (keeping it functional)
    34. const increasedByOne = numbers.map(num => num + 1);

  • 11.2 Don’t use generators for now.

    Why? They don’t transpile well to ES5.

  • 11.3 If you must use generators, or if you disregard our advice, make sure their function signature is spaced properly. eslint: generator-star-spacing

    Why? function and * are part of the same conceptual keyword - * is not a modifier for function, function* is a unique construct, different from function.

    1. // bad
    2. function * foo() {
    3.   // ...
    4. }
    6. // bad
    7. const bar = function * () {
    8.   // ...
    9. };
    11. // bad
    12. const baz = function *() {
    13.   // ...
    14. };
    16. // bad
    17. const quux = function*() {
    18.   // ...
    19. };
    21. // bad
    22. function*foo() {
    23.   // ...
    24. }
    26. // bad
    27. function *foo() {
    28.   // ...
    29. }
    31. // very bad
    32. function
    33. *
    34. foo() {
    35.   // ...
    36. }
    38. // very bad
    39. const wat = function
    40. *
    41. () {
    42.   // ...
    43. };
    45. // good
    46. function* foo() {
    47.   // ...
    48. }
    50. // good
    51. const foo = function* () {
    52.   // ...
    53. };