DEV Community: Gilad Bar

The Superpowers of Array.reduce()

Gilad Bar — Sat, 11 Jan 2020 11:26:01 +0000

ECMAScript 5 introduced many awesome features in 2009, the majority of them being array methods like isArray, forEach, map, filter, every, some. But let's talk about my favorite one: reduce.

The reduce method

The reduce method executes a reducer callback function (provided by the user) on each element of the array, resulting in a single output value.

reducer

The reducer function takes four arguments:

Accumulator (acc)
Current value (cur)
Current index (idx)
Source array (src)

Your reducer function's return value is assigned to the accumulator, whose value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.

Important: On each iteration, you must return the accumulator value for the next iteration (which will eventually be the final return value), or else the accumulator's next (and ultimately final) value will be undefined.

initialValue

The reduce method takes a second optional argument: initialValue.
If not provided, the initial value of the accumulator will be the first element of the array, and the first iteration will point to the second element. If initialValue is provided, it will be the initial value of the accumulator, and the first iteration will point to the first element of the array.

Examples

Summing numbers with/without an initial value

const numbers = [1, 2, 3];

// Without initialValue
const sum = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue
);

// Prints 6
console.log(sum);

// With initialValue
const initialValue = 3;
const sumWithInitialValue = numbers.reduce(
  (accumulator, currentValue) => accumulator + currentValue
, initialValue);

// Prints 9
console.log(sumWithInitialValue);

Without the initial value, the first iteration will have accumulator pointing to the first element of the array (1), and currentValue pointing to the second element of the array (2).

Given the initial value, the first iteration will have an accumulator with the value of the given initial value (3), and currentValue will point to the first element of the array (1).

Counting the number of occurrences in an array

Let's count the number of occurrences of words in the following and store the results in a map:

How much wood would a woodchuck chuck
If a woodchuck could chuck wood?
He would chuck, he would, as much as he could,
And chuck as much as a woodchuck would
If a woodchuck could chuck wood.

const sentence = "how much wood would a woodchuck chuck" +
  "if a woodchuck could chuck wood " +
  "he would chuck he would as much as he could " +
  "and chuck as much as a woodchuck would " +
  "if a woodchuck could chuck wood";

const words = sentence.split(" ");

const occurencesMap = words.reduce(
  (occurences, word) => {
    const numOfOccurences = (occurences.get(word) || 0) + 1;
    occurences.set(word, numOfOccurences);
    return occurences;
  }
, new Map());

const numOfWoodchucks = occurencesMap.get("woodchuck");

// 4
console.log(numOfWoodchucks);

We initialize an empty map and use it as the initial value of the accumulator, initializing or updating the number of occurrences of each word as we iterate over the words in the sentence.

These are only two examples, but by now you must have realized how awesome reduce is, right?

It allows you to take an array and reduce its values to basically anything that can be derived from the data it holds. It also allows you to return any type of data, regardless of the type of the elements of the array.

One Method to Rule Them All?

Revisiting other ES5 array methods, we can see that each method uses the given callback function on the array and returns some kind of result.

For example:

map transforms each element of the array, returning a new array.
every checks if the given condition applies to every element in the array, returning the corresponding Boolean value.

Looks familiar, right?

Using what we already know, let's try to use reduce to implement other ES5 array methods.

Note: we'll add the new methods to Array's prototype in each example, where this will point to the array on which we're operating.

map

The map() method creates a new array where each original element is transformed by the given transformer callback.

Usage

const array = [1, 2, 3];
const doubled = array.map(num => num * 2);

// Prints [2, 4, 6]
console.log(doubled);

Using a transformer callback that doubles every number in the array, we get a new array where every element is twice its original value.

With `reduce`

map operates on an array and returns a new array, so the accumulator has to be an array.

Array.prototype.mapWithReduce = function(transformer) {
  return this.reduce((newArray, currentElement) => {
    const newElement = transformer(currentElement);
    newArray.push(newElement);
    return newArray;
  }, []);
}

const array = [1, 2, 3];
const doubled = array.mapWithReduce(num => num * 2);

// Prints [2, 4, 6]
console.log(doubled);

Using reduce, we start with an empty array accumulator and iterate over the array. We then apply the transformer callback on each element and push it to the accumulating array.

filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Usage

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenOnly = array.filter(num => num % 2 === 0);

// Prints [2, 4, 6, 8, 10]
console.log(evenOnly);

Using a test callback that filters out all odd numbers, we get a new array with all the even elements of the original array.

With `reduce`

Just like the previous example, filter also operates on an array and returns a new array, so the accumulator has to be an array.

Array.prototype.filterWithReduce = function(tester) {
  return this.reduce((newArray, currentElement) => {
    if (tester(currentElement)) {
      newArray.push(currentElement);
    };
    return newArray;
  }, []);
}

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenOnly = array.filterWithReduce(num => num % 2 === 0);

// Prints [2, 4, 6, 8, 10]
console.log(evenOnly);

Using reduce, we start with an empty array accumulator and iterate over the array. We then use the tester callback to check if each element should be pushed to the accumulating array.

every

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Usage

const array = [1, 2, 3, 4, 5];
const result = array.every(num => num < 10);

// Prints true
console.log(result);

Using a callback function that tests every element in the array, we get a boolean that indicates whether all elements pass the test. In this case, all elements are smaller than 10, and thus every returns true.

With `reduce`

every operates on an array and returns a Boolean value, so the accumulator has to be a boolean.

Array.prototype.everyWithReduce = function(tester) {
  return this.reduce((acc, currentElement) =>
    acc && tester(currentElement)
  , true);
}

const array = [1, 2, 3, 4, 5];
const result = array.everyWithReduce(num => num < 10);

// Prints true
console.log(result);

Using reduce, we start with a boolean accumulator value of true (we'll discuss the reason later on) and iterate over the array. We then chain the result of the tester callback to the accumulator using the logical AND (&&), to eventually return true if all elements pass the test, and false otherwise.

Why start with true?

If the array is empty, every returns true regardless of the test callback (even if the callback returns false).

Else, if all elements fulfill the condition, the chaining of the initial true value using the logical AND will eventually resolve to true. If not, the chaining will eventually resolve to false.

some

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

Usage

const array = [1, 2, 3, 4, 5];
const result = array.some(num => num > 3);

// Prints true
console.log(result);

Using a callback function that tests every element in the array, we get a boolean that indicates whether any element passes the test. In this case, the fourth element is larger than 3, and thus some returns true.

With `reduce`

some operates on an array and returns a boolean value, so the accumulator has to be a boolean.

Array.prototype.someWithReduce = function(tester) {
  return this.reduce((acc, currentElement) =>
    acc || tester(currentElement)
  , false);
}

const array = [1, 2, 3, 4, 5];
const result = array.someWithReduce(num => num > 3);

// Prints true
console.log(result);

Using reduce, we start with a boolean accumulator value of false (we'll discuss the reason later on) and iterate over the array. We then chain the result of the tester callback to the accumulator using the logical OR (||), to eventually return true if any element passes the test, and false otherwise.

Why start with false?

If the array is empty, some returns false regardless of the test callback (even if the callback returns true).

Else, if any element fulfills the condition, the chaining of the initial false value using the logical OR will eventually resolve to true. If not, the chaining will eventually resolve to false.

Disclaimer (every and some)

The every method executes the provided callback function once for each element present in the array until it finds the one where callback returns a falsy value (a value that becomes false when converted to a boolean). If such an element is found, every immediately returns false.

Similarly, the some method executes the callback function once for each element present in the array until it finds the one where callback returns a truthy value (a value that becomes true when converted to a boolean). If such an element is found, some immediately returns true.

However, there's no pretty way to terminate reduce mid-loop.
This means that while both implementations (both the original every/some method and the corresponding implementations using reduce) have a runtime of O(n), the original implementations are likely to terminate without having to iterate over the entire array, making them more efficient.

filter + map

Given an array of numbers, what is the most efficient way to filter out all even elements and square the remaining ones (using ES5 methods)?

Let's try filter followed by map:

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const tester = num => num % 2 === 1;
const transformer = num => num * num;

const result = array.filter(tester).map(transformer);

// Prints [1, 9, 25, 49, 81]
console.log(result);

We create a tester function that keeps only odd elements and a transformer function that squares the given elements. We then use these two callback functions when chaining the filter and map methods, and return the desired array.

Let's use what we know about implementing filter and map with reduce, only this time let's combine them in one go.

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const tester = num => num % 2 === 1;
const transformer = num => num * num;

const result = array.reduce((newArray, currentElement) => {
  if (tester(currentElement)) {
    const newElement = transformer(currentElement);
    newArray.push(newElement); 
  }
  return newArray;
}, []);

// Prints [1, 9, 25, 49, 81]
console.log(result);

We use the same tester and transformer functions to test if each element should be kept in the array and transform it if it should.

This approach saves us the need to create an intermediate array of filtered values, and we get a slightly more efficient algorithm as we don't have to iterate over two different arrays (the original and the intermediate).

Conclusion

These were a few examples of how to use the powerful reduce method to implement other ES5 methods.

How do you use it in your day-to-day coding? Share in the comments!

Sources

ES5 features by w3schools
Javascript array methods by MDN web docs. Every method documentation in this article is taken from here.
Cover Photo by Esteban Lopez on Unsplash

How I Got Over My Fear of webpack

Gilad Bar — Sat, 11 Jan 2020 11:04:58 +0000

Disclaimer: this is not a webpack tutorial; there are plenty of those out there.

Without a doubt, using webpack and understanding what it does has actually made me a better developer. But first things first - what is webpack?

From webpack's GitHub repo:

"webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."

Or in short: it is magic.

Up until a year ago, I was terrified of webpack. Working with React.js, I was satisfied with simply knowing how to code and create components, nothing beyond, and left the configuration and heavy lifting to the pros in my team.
It always seemed to be a boring and complicated task.

However, I always thought that understanding this mystical creature was some unattainable dream I would one day find the powers to achieve, something only the bravest, most senior developers could tackle.

I was thrilled when Facebook's create-react-app came out because it meant that moving forward, I wouldn't have to know how to bundle my app, and I'd be able to go at it guilt-free. At least, that's what I was told:

See? Even their docs say so!

And that's how I managed to get by during the majority of my years as a front-end developer, creating awesome React applications without having to handle that spooky tool.

You can be an awesome front-end developer without knowing the entire process from coding to bundling to deployment, but do you really want that? (Spoiler alert --- you don't.)

Starting

As the months flew by, I started a new job at a new company, and was the only one on the team who knew front end, making me the front-end lead. Eventually, this meant that I had to step up my game. Taking on my fearsome arch-nemesis was a fitting first step toward achieving that goal.

I created a new React app, only this time, I didn't allow myself to just resort to an out-of-the-box solution; I created a new app from scratch, going step-by-step, until eventually I installed webpack and started the configuration process.

As a junior front-end developer, I was completely oblivious to some critical concepts I needed to know and understand to become better. Not only did I not know what they meant, I didn't even know the wording.

Up until that point, I was used to having some magic take my source code and turn it into something (let's call this something... a bundle!) that could be served and deployed, but I never stopped to think what was going on under the hood.

My first step was to start reading the getting started manual (well, duh).

This seemingly simple step made me come across some of these concepts, which at the time seemed to be super advanced. I needed to review them to understand webpack and the flow of code-to-bundle, and so I went on to further read about terms like bundling and transpilation.

Bundling is when webpack (or any other similar tool) processes your application and builds a dependency graph, which then maps every module your project needs, and generates one or more bundles.

Transpilation is the process of reading source code, written in one programming language, and producing the equivalent code in another language.

For example, webpack can use plugins such as the Babel JavaScript compiler to take ES6 JavaScript code and transform it into plain old ES5 JavaScript that any browser could understand.

Starting to see the bigger picture and completing the getting started section, I went on to experimenting.

I started with the default configuration, adding and removing attributes as I went on, seeing how it affected the bundle (or, more accurately, what errors were caused due to breaking the configuration).

Eventually, I pretty much understood how to configure webpack for my needs, a task that seemed impossible to achieve before.

Other great ways to learn about webpack and what you can do with it are browsing through different webpack plugins, or manipulating and overriding the default out-of-the-box webpack configuration used by create-react-app, using the react-app-rewired module.

A wonderful project such as create-react-app has an awesome webpack configuration, which is responsible for much of the magic taking place behind the scenes.

My Experience With webpack

My experience with webpack was the first time I conquered my "fear of the unknown" and stepped out of my comfort zone. The payoff was tremendous, resulting in a huge level-up that is still ongoing.

Starting with basic concepts like bundling and transpiling, I was on a roll and knew I was only scratching the tip of the iceberg. Equipped with newly found confidence, I was now encouraged to learn more about the front-end world, which, over time, made me fall deeper in love with it.

Stepping out of my comfort zone led to me improving, which in turn helped me gain more confidence, until I felt comfortable enough to give front-end presentations to my team and my company's front-end guild.

So, zooming out, that initial, minor, uncomfortable encounter with webpack actually set me on the course to becoming a better, more confident developer who absolutely loves what he does.

My main takeaway is:

Always be curious about the mechanics and the under-the-hood of the tools and technologies you use, something you (probably) take for granted.

Don't be satisfied with just understanding something only to the point of making it work.

Dig deeper because you might just accidentally enjoy it.

DEV Community: Gilad Bar

The Superpowers of Array.reduce()

The reduce method

reducer

initialValue

Examples

Summing numbers with/without an initial value

Counting the number of occurrences in an array

One Method to Rule Them All?

map

Usage

With reduce

filter

Usage

With reduce

every

Usage

With reduce

some

Usage

With reduce

Disclaimer (every and some)

filter + map

Conclusion

Sources

How I Got Over My Fear of webpack

Starting

My Experience With webpack

With `reduce`

With `reduce`

With `reduce`

With `reduce`