1. Abstraction
In the context of programming, these kinds of vocabularies are usually called abstractions. Abstractions hide details and give us the ability to talk about problems at a higher (or more abstract) level.
As an analogy, compare these two recipes for pea soup. The first one goes like this:
Put 1 cup of dried peas per person into a container. Add water until the peas are well covered. Leave the peas in water for at least 12 hours. Take the peas out of the water and put them in a cooking pan. Add 4 cups of water per person. Cover the pan and keep the peas simmering for two hours. Take half an onion per person.
Cut it into pieces with a knife. Add it to the peas. Take a stalk of celery per person. Cut it into pieces with a knife. Add it to the peas. Take a carrot per person. Cut it into pieces. With a knife!
Add it to the peas. Cook for 10 more minutes.
And this is the second recipe:
Per person: 1 cup dried split peas, half a chopped onion, a stalk of celery, and a carrot.
Soak peas for 12 hours. Simmer for 2 hours in 4 cups of water (per person). Chop and add vegetables. Cook for 10 more minutes.
The second is shorter and easier to interpret. But you do need to understand a few more cooking-related words, such as soak, simmer, chop, and, I guess, vegetable.
When programming, we can’t rely on all the words we need to be waiting for us in the dictionary. Thus, we might fall into the pattern of the first recipe—work out the precise steps the computer has to perform, one by one, blind to the higher-level concepts that they express.
It is a useful skill, in programming, to notice when you are working at too low a level of abstraction.
2. Abstracting Repetition
Plain functions, as we’ve seen them so far, are a good way to build abstractions. But sometimes they fall short.
It is common for a program to do something a given number of times. You can write a for loop for that, like this:
for (let i = 0; i < 10; i++) {
console.log(i);
}
Can we abstract “doing something N times” as a function? Well, it’s easy to write a function that calls console.log N times.
function repeatLog(n) {
for (let i = 0; i < n; i++) {
console.log(i);
}
}
But what if we want to do something other than logging the numbers? Since “doing something” can be represented as a function and functions are just values, we can pass our action as a function value.
function repeat(n, action) {
for (let i = 0; i < n; i++) {
action(i);
}
}
repeat(3, console.log);
// → 0
// → 1
// → 2
We don’t have to pass a predefined function to repeat. Often, it is easier to create a function value on the spot instead.
let labels = [];
repeat(5, i => {
labels.push(‘Unit ${i + 1}’);
});
console.log(labels);
// → [“Unit 1”, “Unit 2”, “Unit 3”, “Unit 4”, “Unit 5”]
This is structured a little like a for loop—it first describes the kind of loop and then provides a body. However, the body is now written as a function value, which is wrapped in the parentheses of the call to repeat. This is why it has to be closed with the closing brace and closing parenthesis.
In cases like this example, where the body is a single small expression, you could also omit the braces and write the loop on a single line.
Source: Haverbeke Marijn (2018), Eloquent JavaScript: A Modern Introduction to Programming,
No Starch Press; 3rd edition.