Apollolux: created

2013-06-15T00:43:36Z

created

New page

We have HP, and we want some way to heal ourselves:
<syntaxhighlight>
var hero = {hp: 10, hpMax: 85};
</syntaxhighlight>

It'd be nice to have a Potion, a Super Potion and a Mega Potion, healing 10, 20 and 50 HP respectively. It'd also be nice to see a dialog saying which item was used and how much HP we recovered.

===The chump's way===
<syntaxhighlight>
function Potion() {
var oldHp = hero.hp;
hero.hp += 10;
if (hero.hp > hero.hpMax) hero.hp = hero.hpMax;

var heal = hero.hp - oldHp;
if (heal > 0)
Print.printLine("Drank Potion! Recovered " + heal + " HP.");
else
Print.printLine("Drank Potion! Nothing happened.");
}

function SuperPotion() {
var oldHp = hero.hp;
hero.hp += 20;
if (hero.hp > hero.hpMax) hero.hp = hero.hpMax;

var heal = hero.hp - oldHp;
if (heal > 0)
Print.printLine("Drank Super Potion! Recovered " + heal + " HP.");
else
Print.printLine("Drank Super Potion! Nothing happened.");
}

function MegaPotion() {
var oldHp = hero.hp;
hero.hp += 50;
if (hero.hp > hero.hpMax) hero.hp = hero.hpMax;

var heal = hero.hp - oldHp;
if (heal > 0)
Print.printLine("Drank Mega Potion! Recovered " + heal + " HP.");
else
Print.printLine("Drank Mega Potion! Nothing happened.");
}
</syntaxhighlight>

Ugh. Copy-pasting this was a pain. Imagine if we had to change the message format, or if we had 10 items. Miserable. Absolutely miserable. Anyway, we can use it like this:
<syntaxhighlight>
var inventory = [Potion, SuperPotion, MegaPotion];
inventory[0]();
inventory[1]();
inventory[2]();
</syntaxhighlight>

With the output:
<pre>
Drank Potion! Recovered 10 HP.
Drank Super Potion! Recovered 20 HP.
Drank Mega Potion! Recovered 45 HP.
</pre>

===A smarter way===
These potions do almost exactly the same thing. Let's reflect that in our code. We express the idea of a healing item '''once and only once'''. In fact, there's no reason to restrict it to HP.
<syntaxhighlight>
function HealingItem(name, stat, amount) {
return function () {
var oldStat = hero[stat];
hero[stat] += amount;
if (hero[stat] > hero[stat + "Max"]) hero[stat] = hero[stat + "Max"];

var heal = hero[stat] - oldStat;
if (heal > 0)
Print.printLine("Drank " + name + "! Recovered " + heal + " " + stat.toUpperCase() + ".");
else
Print.printLine("Drank " + name + "! Nothing happened.");
};
}

function Potion() {
return HealingItem("Potion", "hp", 10);
}

function SuperPotion() {
return HealingItem("Super Potion", "hp", 20);
}

function MegaPotion() {
return HealingItem("Mega Potion", "hp", 50);
}
</syntaxhighlight>

Here, the higher-order function is <code>HealingItem()</code>, because, as you can see, it returns a function as its result. Note that even after <code>HealingItem()</code> has returned, <var>name</var>, <var>stat</var> and <var>amount</var> are still "remembered". This funky property of returned functions is known as '''closure'''. We won't cover that here, but suffice to say, they're useful.
Potion(), SuperPotion() and MegaPotion() just wrap conveniently around HealingItem() so we don't have to provide all the mundane parameters such as the name, statistic and amount each time. We call them wrappers: they make code easier to read.

We can use them as before:
<syntaxhighlight>
var inventory = [Potion(), SuperPotion(), MegaPotion()];
inventory[0]();
inventory[1]();
inventory[2]();
</syntaxhighlight>

Producing the same output:
<pre>
Drank Potion! Recovered 10 HP.
Drank Super Potion! Recovered 20 HP.
Drank Mega Potion! Recovered 45 HP.
</pre>

Note that <code>Potion()</code>, <code>SuperPotion()</code> and <code>MegaPotion()</code> now ''make'' items, so we need to put the parentheses there to "manufacture" the potions.

This demonstrates both the power of JavaScript's functions, but also the flexibility provided by its '''reflection''': seeing and using program info when the program is running. Thanks to not restricting ourselves to HP, we can make ethers too:
<syntaxhighlight>
function Ether() {
return HealingItem("Ether", "mp", 10);
}

function SuperEther() {
return HealingItem("Super Ether", "mp", 20);
}

function MegaEther() {
return HealingItem("Mega Ether", "mp", 50);
}
</syntaxhighlight>

In the chump's way, this would have doubled the size of the code.

JavaScript/Higher-order programming/Example 1 - Revision history

Apollolux: created