Function Zoo

Function Zoo: Part 1 — Common types

Part 1 — Part 2 — Part 3

Let’s talk about functions in JavaScript. And let’s look at them differently this time. Let’s forget about functional programming and let’s see them from a different angle. I want to talk about function enhancing patterns, how you can make them even more potent, give them an edge, give them new abilities, empower or diminish them. And let’s see how this can be useful.

1. Hash table (not a function yet)

This happens all the time. When you need just to map values, you don’t really want to implement the function, you want a hash table .

const animals = {
  Frog: 'frog.jpg',
  Fish: 'fish.jpg',
}
animals.Frog // => frog.jpg

As you can see, you have to address the animal picture like this animals.Frog which is the same as animals['Frog'] , and it’s very similar to getAnimal('Frog') . In a way it looks like a syntactic sugar over the function declaration. And it is nice: brackets give you more accurate representation of what you actually want to do — to get an item from the collection. There is a semantic accent in it, so animals['Frog'] looks better than let’s say animals('Frog') . And in fact, in some programming languages the second syntax is used.

But then if you want to add second argument, you have to create deeper hashes:

const animals = {
  Frog: {
    'Infra Red': 'ir_frog.jpg',
    'Caribbean Green': 'cr_frog.jpg',
  },
  Fish: {
    'Infra Red': 'ir_fish.jpg',
    'Caribbean Green': 'cr_fish.jpg',
  }
}
animals.Frog['Caribbean Green'] // => cr_frog.jpg

Then the second level takes a role of the second argument:

animals['Frog']['Caribbean Green']

The good thing about hash tables is their simplicity, they are perfect for mapping keys to values — one layer of definitions to another.

But they are also very limiting indeed.

1. Well, first of all, the arguments list is a fixed set of strings or numbers. Where the function can accept any unlimited variations of different types of arguments
2. The error handling is predefined. When you try to get the wrong keys, you’ll get either undefined or TypeError . You might want it customize it in some way.
3. Hash tables can bring code duplication if abused.

So the first thing you do to get more powerful constructions than hash tables, you wrap it into a function.

2. Basic function

Let’s wrap our previous example into a basic function.

function getAnimal(type, color) {
  return animals[type][color];
}

This way it already becomes more powerful. You can add error handling here, and you can make some additional data manipulation. These types of function you create all the time.

3. Function with the state(closure)

In JavaScript you can create functions which can hold the state. They are usually called closures or functors. It works like this:

function createCounter() {
  let i = 0;
  return function() {
    i = i + 1;
    return i;
  };
}
const counter = createCounter();
counter(); // => 1
counter(); // => 2
counter(); // => 3

I try to avoid these types of functions, because they are not pure, and they can bring troubles during testing and repetitive runs. If you use this kind of functions, it’s usually a good idea to have a way to reset their state.

function createCounter() {
  let i = 0;
  return function(initialValue) {
    if (initialValue !== undefined) i = initialValue;
    i = i + 1;
    return i;
  };
}
const counter = createCounter();

counter();  // => 1
counter();  // => 2
counter(0); // => 1
counter();  // => 2

These types of functions can be useful for generating cross-application unique ids, like lodash uniqueId .

Over here we talked about some very common function types. Next time we are going to look at something more interesting. Happy coding, amigos!█