Write your own map filter and reduce

So most of us know that these functions already exists.

[].map();
[].filter();
[].reduce();

But how do they work internally? It's actually pretty easy. So let's just write them ourselves. Cool

Map

function map(array, cb){
   const result = [];
   for(let i = 0; i < array.length; i++){
      const item = array[i];
      result.push(cb(item, i));
   }
   return result;
}

Map is pretty simple.

Filter

function filter(array, cb){
    const result = [];
    for(let i = 0; i < array.length; i++){
       const item = array[i];
       const check = cb(item, i);
       if(check){
            result.push(item);
       }
    }
    return result;

}

Also not too tough.

Reduce

function reduce(array, cb, init){
    let result = init;
    for(let i = 0; i < array.length; i++){
        const item = array[i];
        result = cb(result, item, i);
    }

    return result;
}

Reduce is a little more involved but it isn't anything too crazy. We just make sure to return what they passed last iteration to the next iteration.

Final note:

Interestingly enough. Reduce can be our base construct for all our other loops and we can use it to implement map and filter

Map using reduce

function map(array, cb){
    return reduce(array, (carry, item, i) => {
        const result = cb(item, i);
        carry.push(result);
        return carry;
    }, [])
}

Filter using reduce

function filter(array, cb){
    return reduce(array, (carry, item, i) => {
        const check = cb(item, i);
        if(check){
            carry.push(result);
        }
        return carry;
    }, []);
}

Anyway don't roll your own reduces and maps unless you have a good reason. But it is nice to know how things work at a lower level. That way you can better utilize them in the future.

Thanks for reading.

Blog

Write your own map filter and reduce

Clay Murray

Map

Filter

Reduce

Final note:

Map using reduce

Filter using reduce

Join Our Newsletter. No Spam, Only the good stuff.

Related