DEV Community

loading...
Cover image for Function Composition Explained Using Pokémon Evolution

Function Composition Explained Using Pokémon Evolution

cat profile image Cat ・3 min read

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

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:

/*
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. 
*/
Enter fullscreen mode Exit fullscreen mode

...excuse me, but lolwut?

Here's the example function she sent:

function sayHi(b,c){
c=prompt("Greet me!");
b(c);
Enter fullscreen mode Exit fullscreen mode

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

Evolution is the overall universal function.

function evolutionFn(pokemon, stone){
  stone = prompt('Which stone will you use?');
  return pokemon(stone);
}
Enter fullscreen mode Exit fullscreen mode

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

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.'
  }
}
Enter fullscreen mode Exit fullscreen mode

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

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

Put it all together and we get the following:

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.
Enter fullscreen mode Exit fullscreen mode

Play with it live on Repl.it!


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! DMs are open.

Also, sign up for my newsletter 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!

Discussion

pic
Editor guide
Collapse
shimphillip profile image
Phillip Shim

Nice, this is the beauty of JavaScript. Passing in functions as arguments make the language to do some interesing stuff..

Also not relevant to composition but using switch statement is better inside eevee function since there are more than 2 different conditionals.

Collapse
cat profile image
Cat Author

True. I wanted to use the switch function, but since my friend was a complete newbie and was already inundated with all the info, I stuck with what she knew: if/else. lol

Collapse
adam_cyclones profile image
Adam Crockett

Higher order functions are not unique to JavaScript tho, so it's just a really nice feature.

Collapse
shimphillip profile image
Phillip Shim

Good to know :)

Collapse
essheck profile image
essheck

I'm new to Dev world as well, And your example was explained really well, But I didn't understand why the Evolution function needs a second argument in it's definition.. As we are prompting the user to input the second argument.

Collapse
cat profile image
Cat Author

I was under the thought that I needed a “holder” for the prompt so we can pass that through the individual Pokémon function to get their evolution result.

Also, I wanted to help my friend meet assignment requirements, which asked for 2 arguments.

But, I should definitely try it out without the second parameter.

Collapse
miketalbot profile image
Mike Talbot

I loved this. Absolutely loved it. But I'm pretty sure I need a lie down - never was any good at Pokemon :)

Collapse
cat profile image
Cat Author

I can't even with the latest stuff with "IV"s and shiny hunting stuff these days. But I'm glad you enjoyed the article!!

Collapse
dailydevtips1 profile image
Chris Bongers

Awesome wat of explaining this!

Collapse
cat profile image
Cat Author

Thank you!!!

Collapse
anabneri profile image
Ana Beatriz

OMGGGG I loved, I love explain things using pokemon too, your article was very good, I will share it with the people of the Brazilian communities <3 Tnkss Cat

Collapse
adrianbruhnardo profile image
Adrian Bernardo

I always forget that .map(), .split(), .join(), and .reverse() are examples of function compositions. But your Pokemon references really helped me understand them more!

Collapse
cat profile image
Cat Author

I'm glad it helped!! :)

Collapse
vonheikemen profile image
Heiker

This is the best game ever
*article

Collapse
cat profile image
Cat Author

Ohhh my god lmao those 3 idiots.
Image of ROFLMAOing Pikachu