An example of talking through your code

In my last email, I recommended an exercise to practice talking about code. Talking through your file line by line will quickly expose the holes in your understanding or vocabulary. Today, I thought I'd show you an example of what I mean. Let's take just this simple JavaScript module and describe it:


export const average = (...args) => {
  return sum(...args) / args.length
}

export const sum = (...args) => {
  return args.reduce((a, b) => a + b)
}

Your first attempt at this exercise might sound something like this:

This is a module which exports two functions, average and sum. Line 12 defines the average function, which takes a variable number of arguments. In line 13, I'm returning the sum of those arguments divided by the number of arguments (ie. the average.)

On line 16, I'm defining the sum function, which is used in the average function. sum takes a variable number of arguments. On line 17, I call reduce on the array of those arguments to get their sum and return that value.

That's more detail than you would probably use to describe this code to a coworker, but not actually enough to be helpful in this exercise.

We want to go deeper. Much deeper.

Try something like this:

This is an ES6 module using named exports but no default export. The two named exports are average and sum, which are defined as arrow functions instead of traditional functions. Arrow functions differ from traditional functions in that they [...go look it up...].

On line 12, I declare my first arrow function and assign it to a const, so that I can export it. I'm using the rest operator as an easy way to assign a variable number of arguments to the array called args. In the body of my function on line 13, I'm calculating the average by summing the arguments using a function I've defined below and dividing that sum by the length of the args array. Because sum accepts the same signature as average (a variable number of arguments) I have to spread the args array when I pass it into sum. The rest and spread operators look exactly the same, but [...go look up how they differ...] This function assumes that all arguments are numbers. It will not gracefully handle non-numeric input.

On line 16, I'm declaring the sum function and assigning it to an exported const. Again, this takes a variable number of arguments and I use the rest operator to assign them to the array called args. In the body of my function I reduce that array by passing a simple callback that returns the result of adding the accumulator a to the current value b. This is a very simple callback that makes use of a number of defaults and developer conveniences built into the reduce method. A more verbose version of this callback would look like [... go look up all the things you could do with reduce ...].

Both of these arrow functions could even be reduced to one-liners by making use of implicit return. Implicit return works by [... go look up implicit return so you can articulate it in detail ...]

I could go on. In fact, I challenge you to go on, using just the two functions above. What details can you describe that I haven't covered here, and more importantly, what holes in your understanding or vocabulary have you uncovered by trying?

Seriously, email me back. I want to know.


Did you like this?

I send a daily email with tips and ideas like this one. Join the party!

Icon