View source for JavaScript/Higher-order programming

A '''higher-order function''' is a function that works with functions. That is, they either take them as arguments, or return them.

This article isn't about the theory behind higher-order functions or functional programming; you can find plenty of that on the intertubes. This article is about exploiting them to make coding in JavaScript a little easier.

Some examples make use of the <var>Print.js</var> module at the end of the page.

__TOC__

==Simple example: Potions==
{{:JavaScript/Higher-order programming/Example 1}}

==Tools of the trade==
Let's focus on the functional constructs that help us work with lots of values. Don't worry too much about how they work, just that they do.

===forEach===
<syntaxhighlight>
function forEach(array, action) {
  for (var i = 0; i < array.length; ++i)
    action(array[i]);
}
</syntaxhighlight>

This function goes through each element of array and runs it through action. <code>forEach</code> is the ''higher-order function'', since it works on the ''first-class function'' passed through the <var>action</var> parameter.

Here's an example that prints a bunch of names:
<syntaxhighlight>
var names = ["John", "Dean", "Sam"];
forEach(names, Print.printLine);
Print.display();
</syntaxhighlight>

Output:
<pre>
John
Dean
Sam
</pre>

===map===
<syntaxhighlight>
function map(func, array) {
  var result = [];
  forEach(array, function (element) {
    result.push(func(element));
  });
  return result;
}
</syntaxhighlight>

This function goes through all the elements of <var>array</var>, applies <var>func</var> to each one, and returns a new array with those transformed elements.

Here's an example of getting the squares of an array of numbers:
<syntaxhighlight>
function square(x) {
  return x * x;
}
 
var numbers = [1, 2, 3, 4, 5];
var result = map(square, numbers);
Print.printLine(result.join(", "));
Print.display();
</syntaxhighlight>

The output is:
<pre>
1, 4, 9, 16, 25
</pre>

===filter===
<syntaxhighlight>
function filter(condition, array) {
  var result = [];
  forEach(array, function (element) {
    if (condition(element))
      result.push(element);
  });
  return result;
}
</syntaxhighlight>

This function filters out any element in array that doesn't return true for the condition. Here's an example to weed out odd numbers from an array:
<syntaxhighlight>
function isEven(number) {
  return number % 2 === 0;
}
 
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var result = filter(isEven, numbers);
Print.printLine(result.join(", "));
</syntaxhighlight>

And the output:
<pre>
2, 4, 6, 8, 10
</pre>

===reduce===
<syntaxhighlight>
function reduce(combine, base, array) {
  forEach(array, function (element) {
    base = combine(base, element);
  });
  return base;
}
</syntaxhighlight>

This one's a bit tricky. It goes through each element of the array, rolling the result along using the combine function. Here's an example of summing a bunch of numbers.
<syntaxhighlight>
function add(a, b) {
  return a + b;
}
 
var numbers = [1, 2, 3, 4, 5];
var sum = reduce(add, 0, numbers);
Print.printLine(sum);
Print.display();
</syntaxhighlight>

The processing looks a bit like this:
<pre>
(0)  [1, 2, 3, 4, 5]  //  start
(1)     [2, 3, 4, 5]  //  0 + 1 (result + head of array)
(3)        [3, 4, 5]  //  1 + 2
(6)           [4, 5]  //  3 + 3
(10)             [5]  //  6 + 4
(15)              []  // 10 + 5
</pre>

Output:
<pre>
15
</pre>

==Example: Maximum length of an array of strings==
{{:JavaScript/Higher-order programming/Example 2}}

==Example: Detecting when all enemies have died in battle==
{{:JavaScript/Higher-order programming/Example 3}}

==Final words==
As you've hopefully seen here, functions can make working with lots of data easier. It's no silver bullet, just like object-oriented programming, but used the right way, and mixed with other techniques, it can help you beat code complexity before it beats you.

Some people avoid making new functions in JavaScript, due to namespace issues. In response to that, it's very possible to place functions inside little organised "modules" (See the further reading section.)

Some people avoid this style of programming altogether, due to the fact that they have trouble understanding it. Think of things this way: if you understood both traditional imperative programming and this style of programming equally well, wouldn't you choose the shorter one?

Finally, it's a nice change of pace if you're tired of using nested for loops.

==Further reading==
*	[http://eloquentjavascript.net/chapter6.html EloquentJavaScript.net Chapter 6] - The whole nine yards of functional programming in JavaScript. Provides explanations, code examples and exercises.
*	[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Iteration_methods Mozilla's JavaScript Array iteration methods] - Functional programming methods introduced after JS 1.5.
*	[http://w3future.com/html/stories/hop.xml Higher-order Programming] - Uses JavaScript for examples.
*	[http://eloquentjavascript.net/chapter9.html EloquentJavaScript.net Chapter 9] - Deals with the global namespace pollution issue by using modules.

==Appendix A: Print module==
This goes in Print.js:

{{:JavaScript/Higher-order programming/Print.js}}

To use it, in your main script file:
<syntaxhighlight>
RequireScript("Print.js");
</syntaxhighlight>

[[Category:Tutorials]]