JavaScript V. Higher Order Functions

Transcription

1 JavaScript V Higher Order Functions

2 Tzu-li and Tzu-ssu were boasting about the size of their latest programs. Two-hundred thousand lines, said Tzu-li, not counting comments! Tzu-ssu responded, Pssh, mine is almost a million lines already. Master Yuan-Ma said, My best program has five hundred lines. Hearing this, Tzu-li and Tzu-ssu were enlightened. Master Yuan-Ma, The Book of Programming Which program is more likely to have a bug?

3 Which is easier to follow? Which requires more background knowledge? Abstraction As an analogy, compare these two recipes for pea soup: Put 1 cup of dried peas per person into a container. Add water until the peas are well covered. Leave the peas in water for at least 12 hours. Take the peas out of the water and put them in a cooking pan. Add 4 cups of water per person. Cover the pan and keep the peas simmering for two hours. Take half an onion per person. Cut it into pieces with a knife. Add it to the peas. Take a stalk of celery per person. Cut it into pieces with a knife. Add it to the peas. Take a carrot per person. Cut it into pieces. With a knife! Add it to the peas. Cook for 10 more minutes. And the second recipe: Per person: 1 cup dried split peas, half a chopped onion, a stalk of celery, and a carrot. Soak peas for 12 hours. Simmer for 2 hours in 4 cups of water (per person). Chop and add vegetables. Cook for 10 more minutes.

4 This eyesore is a roundabout way of saying print all the numbers in an array Abstracting Array Traversal It s error prone in that it includes extra elements

5 Compare the first and second functions: the second abstracts away the operation to be performed on each element of the array --- the caller determines the action Abstraction: Passing a Function as an Argument

6 Using the function in the previous slide, define a function on the fly, within the parentheses of the containing function: now we can name the current element something more meaningful Arrays already have a built in foreach Function a = [1,2,3,4] a.foreach(console.log); a.foreach(function(number){console.log(number *number)});

7 Higher Order Functions Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions

8 Another example:

9 Inner functions can use stuff in outer functions, but not vice versa: functions can play the role of {} in nested loops A new type of control flow:

10 The first example has a problem: only one argument can be passed into f, even if f takes more than one argument Passing Along Arguments A solution: use apply and pass in an array of arguments

11 One can use higher order functions to filter arrays (remove unwanted elements) and other data structures using whatever filtering function you want Filtering An Array Filtering functions return a boolean to say whether a value should be kept yourarray.filter() is also a standard method on arrays; pass in your filtering function as an argument

12 Map transforms elements of a data structure Transforming with Map yourarray.map() is also a standard method on arrays; pass in your transformation function

13 Reduce (aka fold) involves computing a single value from an array: summarizing the data. E.g., sum Summarizing with Reduce yourarray.reduce() is a built-in function. Pass in your reducing function. It takes current total, current value, optional array index of current element, and optional the array). The function will be applied to each element of the array.

14 Composability Consider this data set of the author s ancestors:

15 Instead of a tangle of nested loops, we have clear functions defined with words we understand Composability Continued Now consider the composition of functions below: Code readability is important, but there is overhead for using a lot of function calls: consider which is most important for your programming goals

16 bind, which all functions have, creates a new function but with some arguments already fixed Binding

17 JSON A format for passing data via strings that resembles the syntax for creating JavaScript objects JavaScript has JSON.stringify and JSON.parse to convert data to and from this format JSON is widely used by web services to pass data to client websites or mobile applications Example: openweathermap api