[EloquentJS] Ch5. Higher-order Functions

• A large program is a costly program, and not just because of the time it takes to build. Size almost always involves complexity, and complexity confuses programmers. Confused programmers, in turn, introduce mistakes (bugs) into programs. A large program then provides a lot of space for these bugs to hide, making them hard to find.

• console.log(sum(range(1, 10)));

• It is more likely to be correct because the solution is expressed in a vocabulary that corresponds to the problem being solved. Summing a range of numbers isn’t about loops and counters. It is about ranges and sums.
• The definitions of this vocabulary (the functions sum and range) will still involve loops, counters, and other incidental details. But because they are expressing simpler concepts than the program as a whole, they are easier to get right.

Abstraction

• In the context of programming, these kinds of vocabularies are usually called abstractions. Abstractions hide details and give us the ability to talk about problems at a higher (or more abstract) level.

Abstracting repetition

• Plain functions, as we’ve seen them so far, are a good way to build abstractions. But sometimes they fall short.

• Since “doing something” can be represented as a function and functions are just values, we can pass our action as a function value.

• function repeat(n, action) {
      for (let i = 0; i < n; i++) {
          action(i);
      }
  }
  
  repeat(3, console.log);

• Often, it is easier to create a function value on the spot instead.

• let labels = [];
  repeat(5, i => {
      labels.push(`Unit ${i + 1}`);
  });
  console.log(labels);

• In cases like this example, where the body is a single small expression, you could also omit the braces and write the loop on a single line.

Higher-order functions

• Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions. Since we have already seen that functions are regular values, there is nothing particularly remarkable about the fact that such functions exist.

• The term comes from mathematics, where the distinction between functions and other values is taken more seriously.

• Higher-order functions allow us to abstract over actions, not just values. They come in several forms. For example, we can have functions that create new functions.

• function greaterThan(n) {
      return m => m > n;
  }
  let greaterThan10 = greaterThan(10);
  console.log(greaterThan10(11));
  // true

• And we can have functions that change other functions.

• function noisy(f) {
      return (...args) => {
          console.log("calling with", args);
          let result = f(...args);
          console.log("called with", args, ", returned", result);
          return result;
      };
  }
  noisy(Math.min)(3, 2, 1);

• We can even write functions that provide new types of control flow.

• function unless(test, then) {
      if (!test) then();
  }
  
  repeat(3, n => {
      unless(n % 2 == 1, () => {
          console.log(n, "is even");
      });
  });

• There is a built-in array method, forEach, that provides something like a for/of loop as a higher-order function.

• ["A", "B"].forEach(l => console.log(l));

Script data set

• One area where higher-order functions shine is data processing.

Filtering arrays

• function filter(array, test) {
      let passed = [];
      for (let element of array) {
          if (test(element)) {
              passed.push(element);
          }
      }
      return passed;
  }
  
  console.log(filter(SCRIPTS, script => script.living));

• Note how the filter function, rather than deleting elements from the existing array, builds up a new array with only the elements that pass the test. This function is pure. It does not modify the array it is given.

• Like forEach, filter is a standard array method. The example defined the function only to show what it does internally.

• console.log(SCRIPTS.filter(s => s.direction == "ttb"));

Transforming with map

• The map method transforms an array by applying a function to all of its elements and building a new array from the returned values. The new array will have the same length as the input array, but its content will have been mapped to a new form by the function.

• function map(array, transform) {
      let mapped = [];
      for (let element of array) {
          mapped.push(transform(element));
      }
      return mapped;
  }
  
  let rtlScripts = SCRIPTS.filter(s => s.direction == "rtl");
  console.log(map(rtlScripts, s => s.name));

• Like forEach and filter, map is a standard array method.

Summarizing with reduce

• Another common thing to do with arrays is to compute a single value from them.

• The higher-order operation that represents this pattern is called reduce (sometimes also called fold). It builds a value by repeatedly taking a single element from the array and combining it with the current value.

• The parameters to reduce are, apart from the array, a combining function and a start value.

• function reduce(array, combine, start) {
      let current = start;
      for (let element of array) {
          current = combine(current, element);
      }
      return current;
  }
  
  console.log(reduce([1, 2, 3, 4], (a, b) => a + b, 0))

• The standard array method reduce, which of course corresponds to this function, has an added convenience. If your array contains at least one element, you are allowed to leave off the start argument. The method will take the first element of the array as its start value and start reducing at the second element.

• console.log([1, 2, 3, 4].reduce((a, b) => a + b));

• To use reduce (twice) to find the script with the most characters, we can write something like this:

• function characterCount(script) {
      return script.ranges.reduce((count, [from, to]) => {
          return count + (to - from);
      }, 0);
  }
  
  console.log(SCRIPTS.reduce((a, b) => {
      return (characterCount(a) < characterCount(b)) ? b : a;
  }));

• Note the use of destructuring in the parameter list of the reducer function.

Composability

• Higher-order functions start to shine when you need to compose operations.

• function average(array) {
      return array.reduce((a, b) => a + b) / array.length;
  }
  
  console.log(Math.round(average(
      SCRIPTS.filter(s => s.living).map(s => s.year))));
  console.log(Math.round(average(
      SCRIPTS.filter(s => !s.living).map(s => s.year))));   

• You can usually afford the readable approach, but if you’re processing huge arrays, and doing so many times, the less abstract style might be worth the extra speed.

Strings and character codes

• function characterScript(code) {
      for (let script of SCRIPTS) {
          if (script.ranges.some(([from, to]) => {
              return code >= from && code < to; 
          })) {
              return script;
          }
      }
      return null;
  }
  
  console.log(characterScript(121));

• The some method is another higher-order function. It takes a test function and tells you whether that function returns true for any of the elements in the array.

• But how do we get the character codes in a string?

• JavaScript strings are encoded as a sequence of 16-bit numbers. These are called code units.

• A Unicode character code was initially supposed to fit within such a unit (which gives you a little over 65,000 characters). When it became clear that wasn’t going to be enough, many people balked at the need to use more memory per character.

• To address these concerns, UTF-16, the format used by JavaScript strings, was invented. It describes most common characters using a single 16-bit code unit but uses a pair of two such units for others.

• UTF-16 is generally considered a bad idea today. It’s easy to write programs that pretend code units and characters are the same thing. (Consider two-unit characters.)

• Unfortunately, obvious operations on JavaScript strings, such as getting their length through the length property and accessing their content using square brackets, deal only with code units.

• let horseShoe = "🐴👟";
  console.log(horseShoe.length);
  // 4
  console.log(horseShoe[0]);
  // Invaild half-character
  console.log(horseShoe.charCodeAt(0));
  // 55357 (Code of the half-character)
  console.log(horseShoe.charPointAt(0));
  // 128052 (Code of horse emoji)

• JavaScript’s charCodeAt method gives you a code unit, not a full character code. The codePointAt method, added later, does give a full Unicode character.

• But the argument passed to codePointAt is still an index into the sequence of code units. So to run over all characters in a string, we’d still need to deal with the question of whether a character takes up one or two code units.

• I mentioned that a for/of loop can also be used on strings. Like codePointAt, this type of loop was introduced at a time where people were acutely aware of the problems with UTF-16. When you use it to loop over a string, it gives you real characters, not code units.

• let roseDragon = "🌹🐉";
  for (let char of roseDragon) {
      console.log(char);
      // cf> typeof char - string
  }

• If you have a character (which will be a string of one or two code units), you can use codePointAt(0) to get its code.

Recognizing text

• function countBy(items, groupName) {
      let counts = [];
      for (let item of items) {
          let name = groupName(item);
          let known = counts.findIndex(c => c.name == name);
          if (known == -1) {
              counts.push({name, count: 1});
          } else {
              counts[known].count++;
          }
      }
      return counts;
  }

• It uses another array method—findIndex. This method is somewhat like indexOf, but instead of looking for a specific value, it finds the first value for which the given function returns true. Like indexOf, it returns -1 when no such element is found.

• Using countBy, we can write the function that tells us which scripts are used in a piece of text.

• function testScripts(text) {
      let scripts = countBy(text, char => {
          let script = characterScript(char.codePointAt(0));
          return (script) ? script.name : "none";
      }).filter(s => s.name != "none");
  
      let total = scripts.reduce((n, {count}) => n + count, 0);
      if (total == 0) return "No scripts found";
  
      return scripts.map(({name, count}) => {
          return `${Math.round(count * 100 / total)}% ${name}`;
      }).join(", ");
  }

Exercises

Flattening

console.log(arrays.reduce((a, b) => a.concat(b), []));

Your own loop

function loop(n, test, update, body) {
    for ( ; test(n); n = update(n)) {
        body(n);
    }
}

Everything

• Analogous to the some method, arrays also have an every method. This one returns true when the given function returns true for every element in the array.

  // version 1
  function every(array, test) {
    for (let element of array) {
        if (!test(element)) {
            return false;
        }
    }
    return true;
  }
  // version 2
  function every(array, test) {
    return !array.some(e => !test(e));
  }

Dominant writing direction

function dominantDirection(text) {
    let counted = countBy(text, char => {
        let script = characterScript(char.codePointAt(0));
        return (script) ? script.direction : "none";
    }).filter(({name}) => name != "none");

    // exceptional case...
    if (counted.length == 0) return "ltr";

    return counted.reduce((a, b) => {
        return (a.count < b.count) ? b : a;
    }).name;
}