Function Composition Explained Using Pokémon Evolution
Tags: javascript, beginners, codenewbie
Published: 2020-05-28 22:35:56

Yo, (scarf) dog. I heard you like functions, so I put a function in ur function so that you can function while it functions.  < / oldMemes >< / badJoke >

![Eevee shaking their head, disapproving of my bad joke](https://media.giphy.com/media/oabY4xGwzUB8c/giphy.gif)

ANYWAY, so my friend was starting to learn how to code and she needed help with understanding what the teacher was asking her to do.

This is what she sent me:
```javascript
/*
Create a function that takes in two inputs.
One should be a function and the other should be
the argument to call the input function with.

Then in the function you define call the passed in function
with the input argument. 
*/
```
...excuse me, but lolwut?

Here's the example function she sent:
```javascript
function sayHi(b,c){
c=prompt("Greet me!");
b(c);
```
Okay, that's a bit more clear, I guess.

---

##So, here we go:
From what I understand, we're looking to build a function that runs another function. I used the concept of **Pokémon evolution with stones** to illustrate this.

![Eevee evolving in the Detective Pikachu movie](https://media.giphy.com/media/41fc5hcRsUBqotI7WD/giphy.gif)


###*Evolution* is the overall universal function.
```javascript
function evolutionFn(pokemon, stone){
  stone = prompt('Which stone will you use?');
  return pokemon(stone);
}
```

Pokémon themselves are separate functions, but still universally utilize the same evolution function. The best example to use would be **Eevee** because the possibilities of their evolution are vast. (But for now, we're referencing their basic gen 1 evolutions).

![Eevee tossing a flower crown onto their head](https://media.giphy.com/media/133cAiXr4T1te/giphy.gif)

```javascript
const eevee = (x) => {
  let userInput = x.toLowerCase();
  if ( userInput === 'fire' ){
    return 'Congrats! You now have a Flareon!'
  }else if( userInput ==='thunder' ){
    return 'Congrats! You now have a Jolteon!'
  } else if( userInput === 'water' ){
    return 'Congrats! You now have a Vaporeon!'
  } else {
    return 'Huh. It didn\'t work.'
  }
}
```
I also created Pikachu to illustrate that a completely different Pokemon can utilize this method of evolution as well.

![Raichu spinning Pikachu around while dancing](https://media.giphy.com/media/Fbj7lIkDbwNLa/giphy.gif)

```javascript
const pikachu = (x) => {
  let userInput = x.toLowerCase();
  if ( userInput === 'thunder'){
    return 'Congrats! You now have a Raichu!'
  } else {
    return 'Huh. It didn\'t work.'
  }
}
```

Put it all together and we get the following:
```javascript
function evolutionFn(pokemon, stone){
  stone = prompt('Which stone will you use?');
  return pokemon(stone);
}

const eevee = (x) => {
  let userInput = x.toLowerCase();
  if ( userInput === 'fire' ){
    return 'Congrats! You now have a Flareon!'
  }else if( userInput ==='thunder' ){
    return 'Congrats! You now have a Jolteon!'
  } else if( userInput === 'water' ){
    return 'Congrats! You now have a Vaporeon!'
  } else {
    return 'Huh. It didn\'t work.'
  }
}

const pikachu = (x) => {
  let userInput = x.toLowerCase();
  if ( userInput === 'thunder'){
    return 'Congrats! You now have a Raichu!'
  } else {
    return 'Huh. It didn\'t work.'
  }
}

console.log(evolutionFn(eevee));
// example: if prompt => 'fire or FIRE or even FiRe', 
// it will say "Congrats! You now have a Flareon!"
// if it's anything else, the console will return "Huh. It didn't work."


console.log(evolutionFn(pikachu));
// Should return "Congrats you now have a Raichu"! etc. etc.
```
---

##**Play with it live on [Repl.it](https://repl.it/@catcarbonell/evolvefn)**!

---

And there you have it-- **Function composition: when you want to use a big function to execute little functions that essentially will output the same basic thing.** 

Also, fun fact-- you've been bamboozled! If you've ever used .map(), .split(), .join(), .reverse(), you have already experienced Function Composition! We see this in action when we use JavaScript methods *ALL. THE. TIME.*

---

##Thanks for reading!
If you'd like to keep in touch with me, follow me on [Twitter](https://twitter.com/catcarbn)! DMs are open.

Also, [sign up for my newsletter](https://catvscode.substack.com) where I give you tips/tricks on how to survive coding bootcamp and post-bootcamp/learning on your own by sharing some personal (sometimes embarassing) stories!