Intro to the map function
Tags: functional, javascript, map
Published: 2017-09-14 06:50:00

---
title:  Intro to the map function
tags: [fp, javascript, map]
description: "Pretty sweet."
published: true
---

_this post was originally published on [my Github Pages site](http://johnnyreina.com/programming/functional/2017/09/13/intro-map.html) on September 13th, 2017_

This might sound a bit outlandish or ridiculous, but I seldom write loops nowadays. What I have found is that just about every programming language includes a set of methods or applicable functions that can replace just about every loop that I was previously writing. These [higher-order functions](https://github.com/hemanth/functional-programming-jargon#higher-order-functions-hof) are called map, filter, and fold.

## Map

The `map` function takes a function you provide and iterates over each item in your list, applying the function you provide and putting the result in the same spot in the new array. Since `map` takes an array and returns an array, you can chain together your `map` calls and transform your data _incrementally_.

### Baby steps
We'll start off with some easy examples:
{% gist https://gist.github.com/jreina/536f1f5683d33e3ae6c6bc138987113c.js %}

That didn't hurt too much, did it? In the first `map`, we essentially applied `f(x) = 2x` to each element in the sequence. Likewise, the second `map` applied `f(x) = xÂ²` to each element. Easy cheesy.  

### Learning to crawl
Here's an example of mapping over an array of objects:
{% gist https://gist.github.com/jreina/1dd766fc0bb99dedae6735448199dd2f.js %}

In the first `map` we are pulling out each person's name, their age in the second `map`, and their second hobby in the third `map`. If what is happening here isn't immediately apparent to you, here is the same thing in an imperative style:
{% gist https://gist.github.com/jreina/3e863b25bf9087284fa0ae09c4171f49.js %}

Crazy, right? What we can do with a single expression with `map`, takes FOUR lines with imperative code. Oh, and did you notice the fact that we did not mutate the value of the original array in the imperative example? This is also true for `map`, which is important since we might need to do other things to that original array. 

### Up and running!
Alright, "this is child's play", you say. Where are we REALLY gonna use `map`? Well, buckle up! Check out this real world example:
{% gist https://gist.github.com/jreina/3d20b073b95fffae0b5efc3f6d95ac9e.js %}
This example is straight outta [polysvg](https://github.com/jreina/polysvg), albeit cut down a bit for brevity. This `map` chain takes an array of six zeroes and performs the following steps:  
1. Numbers each spot according to its index
2. Multiplies each position by 60 to get the angles of each vertex from the centroid of a hexagon
3. Converts each angle to radians
4. Converts from polar to Cartesian coordinates
5. Rounds these nasty floats
6. Applies an offset to each point equal to the radius

[Without annotations, this is about nineteen lines of code.](https://github.com/jreina/polysvg/blob/master/n-gon.js). Most importantly, it works and you can [try it out yourself](http://polysvg.johnnyreina.com/).

### When should I use `map`?
Since `map` has a 1:1 relationship between the number of things you put in and the number of things you get out, you should use `map` when you want to _transform_ `x` amount of things into `x` amount of other things. If you need to turn `x` amount of things into `x - 5` amount of things, `map` might not be the ideal solution right away. You may need to segregate your things into subsets, and then `map` each subset separately.

### JavaScript is the worst! What other languages have `map`?
Like, all the good ones. Though the names might be a bit different. In an effort to avoid plagiarism and only write what I really know about, I'll list out a few equivalent methods/functions here.

| Language | Function/Method |
| --- | :---: |
| JavaScript | Array.prototype.map |
| C# | IEnumerable.Select\<T\> (as part of System.Linq) |
| Python | map |
| Haskell | map |
| PHP | array_map |
| MongoDB | $project (as part of an aggregation pipeline) |

<br />
### Alright, I'm convinced. When do I start?
Right now! Go! `map` all the things!  
The best way to get familiar with `map` is to just start using it.